본 글은 Udemy(유데미)에서 제공하는 Colt Steele님의 「The Web Developer 부트캠프 2023」 강의를 수강하며 배운 내용을 바탕으로 작성했습니다.
웹 해킹 및 보안에 쓰이는 자바스크립트 코드를 보고 이해할 수 있는 수준에 다다르기 위해 전반적인 내용을 가볍게 훑어보는 기획입니다.
이번에는 JS의 데이터 구조, 배열과 객체를 간단하게 알아보겠습니다.
이를 활용하는 반복 구문도 함께 알아보도록 합시다.
배열(array)
연속된 데이터를 표현할 수 있는 구조로, 어떤 자료형이든 넣을 수 있습니다.
대괄호로 감싸서 배열임을 표현합니다.
let array = [] #배열 선언
let colors = ["red", "orange"]
자바스크립트에서 배열은 다른 언어에서의 리스트(list)와 유사하게 동작합니다.
배열에는 여러 자료형이 섞여도 상관없습니다.
let anything = [true, 12, 9.99, NaN, "Hello"]
배열 자료형인 만큼 인덱스를 통해 요소에 접근할 수 있습니다.
문자열 역시 인덱스를 통해 문자에 접근할 수 있습니다.
배열에 포함된 문자열의 문자에는 인덱스를 두 번 사용하여 접근할 수 있습니다.
첫 번째 인덱스로 배열의 요소에 접근하고,
두 번째 인덱스로 문자열의 문자에 접근합니다.
let days = ["monday", "tuesday"]
days[0][0] //"m"
배열의 크기보다 큰 인덱스에 값을 대입하면 그만큼 빈 공간이 생깁니다.
let days = ["monday", "tuesday"]
days[5] = "saturday"
days.length //6
days
// ['monday', 'tuesday', empty × 3, 'saturday']배열 메서드
자바스크립트의 배열은 스택과 큐로 활용할 수 있습니다.
- push: 배열의 마지막에 원소를 추가합니다.
- pop: 배열의 마지막에 있는 원소를 삭제합니다.
- shift: 배열 가장 앞에 있는 원소를 삭제합니다.
- unshift: 배열 가장 앞에 원소를 추가합니다.
let nums = [1, 2];
nums.push(3);
// (3) [1, 2, 3]
nums.pop();
// (2) [1, 2]
nums.unshift(0);
// (3) [0, 1, 2]
nums.shift()
// (2) [1, 2]
- concat: 배열을 합쳐 새로운 배열을 반환합니다.
- includes: 특정 값이 배열에 포함되어 있는지 알려줍니다.
- indexOf: 인자와 일치하는 값의 시작 인덱스를 반환합니다..
- reverse: 배열의 순서를 뒤집습니다. 새 값을 반환하지 않고 호출한 배열 자체를 변경합니다.
- slice: 배열의 일부를 슬라이싱합니다.
- splice: 원소를 삽입하거나 제거합니다.
splice는 인자로 시작 인덱스, 삭제할 원소 개수, 추가할 요소를 받습니다.
array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) //구문
const months = ['Jan', 'Mar']
months.splice(1, 0, 'Feb'); //인덱스[1]에 Feb를 추가한다. 삭제할 원소는 0개
//(3) ['Jan', 'Feb', 'Mar']
months.splice(2, 1); //인덱스[2]부터 원소 1개를 삭제한다
//(2) ['Jan', 'Feb']- sort: 유니코드 순으로 정렬합니다.
객체
객체(object)는 속성(properties)의 집합입니다.
속성은 키-값(key-value) 쌍으로 이루어집니다.
객체의 요소에 접근하는 방법은 []를 이용하는 방법과 .(점)을 이용하는 방법이 있습니다.
const person =
{
firstName: "Park",
lastName: "Jason"
}
//access
person["firstname"] //"Park"
person.lastName //"Jason"
모든 키는 string으로 변환됩니다. 2020과 같은 number 타입도 key로 사용되면 문자열로 인식합니다.
const years =
{
2020: "worst",
2023: "best"
}
years["2020"]
//'worst'
[] 호출과 . 호출의 차이는 표현식을 사용할 수 있는지 여부입니다.
person["first" + "Name"] //"Park"반복문
반복문을 통해 배열에 있는 원소에 한 번에 접근할 수 있습니다.
for of
const colors = ["red", "orange", "yellow"]
for(let it of colors) {
console.log(it)
}
for in
객체에서 키로 지정된 속성에 대해 반복해 줍니다.
const person =
{
firstName: "Park",
lastName: "Jason"
}
for(let it in person) {
console.log(it)
}
/* result
firstName
lastName
*/
key가 아닌 value에 접근하고 싶다면
Object.values()를 사용합니다.
const person =
{
firstName: "Park",
lastName: "Jason"
}
for(let it of Object.values(person)) {
console.log(it)
}
/* result
Park
Jason
*/
Objects.keys(): 키에 대해 반복합니다.
Objects.values(): 값에 대해 반복합니다.
Objects.entries() :키-값 쌍에 대해 반복합니다.