배열
- 자바스크립트 배열은 특수한 객체
- 배열 안에 있는 데이터는 순서가 있음 이를 index라고 부름
- 유용한 메서드를 많이 가짐
배열의 생성
- 배열 리터럴 표기법 (array literal syntax)
const fruits = ['사과', '바나나', '딸기'];
- 배열 생성자 표기법 (array constructor syntax)
const fruits = new Array('사과', '바나나', '딸기');
배열 접근
- 대괄호([])를 통해 배열 안에 있는 값에 접근 가능
- 배열의 시작 index는 0부터 시작
const fruits = ['사과', '바나나', '딸기'];
console.log(fruits[0]);
fruits[2] = '포도';
console.log(fruits[2]);
자주 사용하는 배열 API (프로퍼티, 메서드)
const fruits = ['사과', '바나나', '딸기'];
console.log('fruits.length: ', fruits.length);
// 결과 : 3
const fruits = ['사과', '바나나', '딸기'];
console.log('마지막 값: ', fruits[fruits.length - 1]);
// 결과 : 딸기
const fruits = ['사과', '바나나', '딸기'];
fruits.push('귤');
console.log(fruits);
// 결과 : 사과, 바나나, 딸기, 귤
- forEach : 배열의 항목을 순환하며 처리
const fruits = ['사과', '바나나', '딸기'];
fruits.forEach(function (item, index) {
console.log(index, item);
});
// 0 사과
// 1 바나나
// 2 딸기
const fruits = ['사과', '바나나', '딸기'];
fruits.pop();
let removedItem = fruits.pop(); // 이런 식으로 받을 수 있음
console.log('제거 완료', fruits); // 사과, 바나나
console.log('removedItem: ', removedItem); // 딸기
const fruits = ['사과', '바나나', '딸기'];
fruits.shift();
console.log(fruits);
// 바나나, 딸기
const fruits = ['사과', '바나나', '딸기'];
fruits.unshift('수박');
console.log(fruits);
// 수박, 사과, 바나나, 딸기
- indexOf : 배열 안 항목의 인덱스 찾기
const fruits = ['사과', '바나나', '딸기'];
const index = fruits.indexOf('바나나');
console.log('index: ', index);
// 결과 : 1
// 찾고자 하는 인덱스가 없을 경우 -1 반환
- splice : 인덱스 위치에 있는 항목 제거
const fruits = ['사과', '바나나', '딸기'];
fruits.splice(1, 2); // 1번째 인덱스부터 2개 제거
console.log(fruits);
// 사과
구조 분해 할당
- 배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게 해줌
일반 - 배열 항목을 개별 변수에 담는 경우
let fruits = ['사과', '바나나', '딸기'];
let apple = fruits2[0];
let banana = fruits2[1];
let strawberry = fruits2[2];
구조 분해 할당 - 배열 항목을 개별 변수에 담을 때
const fruits = ['사과', '바나나', '딸기'];
let [apple, banana, strawberry, ...others] = [
'사과',
'바나나',
'딸기',
'a',
'b',
'c',
];
console.log(apple); // 사과
console.log(banana); // 바나나
console.log(strawberry); // 딸기
console.log(others); // ...others : 나머지는 others에 할당
// others 값 : ['a', 'b', 'c']
Spread syntax (전개 구문)
- 배열을 할당할 때 참조값을 할당 하는 것이 아닌 배열 안의 항목을 펼치는 방식으로 할당
- ... 표기법을 사용
let fruits = ['사과', '바나나', '딸기'];
let items = [...fruits3]; // = let items = ['사과', '바나나', '딸기']랑 똑같음
console.log(items);
// 밑에 두 개처럼 쓸 수도 있음
// let items = ['abc', ...fruits3, '수박'];
// let items = [...fruits2, ...fruits3];
Rest parameters (나머지 매개변수 구문)
- 함수가 무한한 수의 파라미터를 배열로 받을 수 있음
print('a', 'b', 'c');
function print(...values) {
console.log(values[0]);
console.log(values[1]);
console.log(values[2]);
}
// a
// b
// c
배열 복사
- 배열은 객체이기 때문에 참조값을 갖고 있음
- 아래 코드같이 하면 같은 참조값을 가지기에 얕은 복사가 됨
let source = ['사과', '바나나', '딸기'];
let target = source;
target[0] = '파인애플';
console.log(source); // 파인애플, 바나나, 딸기
console.log(target);// 파인애플, 바나나, 딸기
let source2 = ['사과', '바나나', '딸기'];
let target2 = [...source2]; // 이거 말고도 밑에 두 개처럼 해도 됨
// let target2 = Array.from(source2);
// let target2 = source2.slice();
target2[0] = '파인애플';
console.log(source2); // 사과, 바나나, 딸기
console.log(target2); // 파인애플, 바나나, 딸기
정리
- 자바스크립트에서 배열은 특수한 객체이고 배열 안의 값들은 인덱스를 가지며 유용한 메서드가 많음
- 배열을 생성하는 방법에는 두 가지 방법이 있고 그중에서 리터럴 표기법을 많이 사용함
- 대괄호를 이용하여 배열에 접근 가능
- 여러 개의 유용한 배열 API가 많음
- 구조 분해 할당을 이용하여 쉽게 새로운 변수에 값을 할당할 수 있음
- 전개 구문을 이용하여 참조값이 아닌 배열 안의 항목을 펼칠 수 있음
- 나머지 매개변수 구문을 이용하여 함수의 파라미터를 배열로 받을 수 있음
- 배열 복사에는 얕은 복사와 깊은 복사가 있음