자바스크립트 배열은 배열이 아니다. 자바스크립트 배열은 사실 객체다. length와 index 프로퍼티를 갖고 있는, 일반적인 배열의 동작을 흉내 낸 특수한 객체다.
자바스크립트에서 배열은 해시 테이블로 구현된 객체이므로 일반적인 배열보다 요소 접근이 느릴 수 있어도 삽입/삭제가 빠르다.
어떤 타입의 값이라도 배열의 요소가 될 수 있고, 중간이 비어있을 수 있는 희소배열이다. 그렇지만 같은 타입으로 하는 게 좋다
1
2
3
4
| // example
[].length // 0
[1,2,3].length // 3
[1, , 3] // 희소배열
|
배열 메서드
배열 메서드의 패턴은 두 가지가 있다.
- 원본 배열을 직접 변경한는 메서드
- 새로운 배열을 생성하여 반환하는 메서드
원본 배열을 직접 변경하는 메서드는 외부 상태를 직접 변경하는 부수 효과가 있으므로, 가급적 원본 배열을 직접 변경하지 않는메서드를 사용하는 편이 좋다.
| | 원본 배열 변경 | 새로운 배열 생성 | ES6 (권장) |
|---|
| 맨 앞 요소 제거 | shift() | | |
| 맨 앞 요소 추가 | unshift(elem) | | -> spread 권장 |
| 맨 뒤 요소 제거 | pop() | | |
| 맨 뒤 요소 추가 | push(elem) | concat() | -> spread 권장 |
| 중간에 추가/제거/변경 | splice() | | |
| 그 외 | | 권장 |
|---|
| 요소 존재 확인 | indexOf(elem) | -> includes(elem) |
includes()를 사용하면 가독성이 높아지므로 사용 권장. 또한 indexOf는 NaN이 배열에 포함되어 있는지 확인할 수 없음.
1
2
| [NaN].indexOf(NaN) !==
-(1)[NaN].includes(NaN); // false // true
|
그리고 일관성 있는 코드를 위해 웬만하면 다 spread operator 사용하는 것을 권장.
Array.from
1
2
3
4
5
6
7
| //유사배열 객체를 반환하여 배열을 생성한다
Array.from({ length: 2, 0: "a", 1: "b" }); // -> ['a','b']
Array.from("Hello"); // -> ['H', 'e', 'l','l','o']
// 두 번째 인수로 전달한 콜백 함수의 반환값으로 구성된 배열을 반환한다.
Array.from({ length: 3 }, (_, i) => i); // -> [0, 1, 2]
|
Array.splice(start, deleteCount, items)
1
2
3
4
5
6
7
8
9
10
11
12
| const arr = [1, 2, 3, 4];
const result = arr.splice(1, 2, 20, 30); // [1, 20, 30, 4]
const result1 = arr.splice(1, 0, 100); // [1, 100, 2, 3, 4]
const result2 = arr.splice(1, 2); // [1, 4]
const result3 = arr.splice(1); // [1]
// vs. filter
arr.filter((v) => v !== item); // -> 해당되는 모든 요소를 제거한다
const index = arr.indexOf(item);
arr.splice(index, 1); // -> 첫 번째로 해당되는 요소를 제거한다
|
Array.slice(start, end)
1
2
3
4
5
6
7
8
9
| const arr = [1, 2, 3];
arr.slice(0, 1); // [1]
arr.slice(1, 2); // [2]
arr.slice(1); // [1]
arr.slice(-1); // [3]
arr.slice(-2); //[2, 3]
const copy = arr.slice(); //복사본을 생성하여 반환 (shallow copy)
|
깊은 복사 vs 얕은 복사
Array.join()
1
2
3
| arr.join(); //기본 구분자는 컴마(,)
arr.join(" ");
arr.join(":");
|
Array.reverse()
Array.fill()
- 초기화에 사용
- 오직 하나의 값으로 밖에 채울 수 없기 때문에 Array.from 메서드를 이용하면 여러 값들로 채울 수 있다.
1
2
3
| arr.fill(0); // 채울 값
arr.fill(0, 1); // 1번 index부터 채우기
arr.fill(0, 1, 3); // [1,3) index 채우기
|
Array.includes(elem, (start))
1
2
| arr.includes(2);
arr.includes(1, 1);
|
책 ‘모던 자바스크립트 Deep Dive’를 읽고 정리한 내용입니다.
