Modern Javascript 배열

작성일 | In

[Modern Javascript] 배열

본 내용은 모던 자바스크립트 배열을 보고 공부, 정리한 내용입니다.

배열이란?

순서가 있는 컬렉션을 저장할 때 쓰는 자료구조이다.
배열 요소의 자료형은 서로 다를 수 있다.

1
let arr = [ '사과', { name: '이보라' }, true, function() { alert('안녕하세요.'); } ];

pop, push, shift, unshift

pop, shift 는 배열에서 요소를 제거할 때 쓰이는 메서드이다.
제거된 요소를 반환한다.

push, unshift는 배열에 요소를 추가할 때 쓰이는 메서드이다.
추가 후 배열의 길이를 반환한다.
여러 개의 요소를 한 번에 추가할 수 있다.

pop, push → 배열의 맨 뒤의 요소를 제거 / 추가
shift, unshift → 배열의 맨 앞 요소를 제거 / 추가

배열의 내부 동작

배열은 기본적으로 객체이다. 즉, 객체처럼 속성 추가도 가능하고, 숫자형이 아닌 값을 key로 삼을 수도 있다. 하지만 이러한 잘못된 배열 조작은 배열만이 갖는 장점이 사라진다.

배열은 연속적인, 순서를 갖는 데이터들을 관리하기에 최적화되어 있다. 대표적으로 배열의 요소를 인접한 메모리 공간에 차례로 저장하여 연산 속도를 높이는 방법이 그러하다. 따라서 배열에 요소를 듬성듬성 저장하거나, 역순으로 배열을 초기화하면 배열의 빠른 연산 속도 이점을 잃게 된다.

pop, push와 shift, unshift의 차이

pop, push는 배열 뒤에서 작업이 일어나고 shift, unshift는 배열 앞에서 작업이 이루어진다.

pop, push가 동작 속도가 더 빠르다. 그 이유는 아래와 같다.

  • shift, unshift의 경우 배열의 앞 요소를 제거, 추가하는 메서드이므로 뒤 인덱스의 모든 요소들을 옮겨야하는 작업이 필요하다.
    예를 들어, shift의 경우 맨 앞 요소를 제거하고, 뒤 인덱스들을 모두 한 칸 앞으로 옮긴 후 length 속성을 1 감소시킨다.

  • pop,push의 경우 배열의 뒤 요소를 제거, 추가하는 메서드이므로 작업 후 length만 증가시키면 된다.

length 프로퍼티

length 속성은 아주 흥미로운 성질을 가지고 있다. 우선 length가 의미하는 바는 배열의 가장 큰 인덱스에 + 1한 값이다. (실질적인 배열의 요소 개수가 아님)

1
2
3
const a = new Array();
a[1000] = 0;
console.log(a.length); // 1001

정상적인 length를 수동으로 늘리면 length만 증가하고 배열에는 변화가 없다.
하지만 현재 배열에 존재하는 요소보다 작게 length를 줄이면 해당 요소는 사라진다.
이후 length를 다시 늘려도 해당 요소는 복원되지 않는다.

1
2
3
4
5
6
7
8
9
const a = new Array();
a[1000] = 0;
a.length = 999;

console.log(a.length); // 999
console.log(a); // [ <999 empty items> ]

a.length = 1002;
console.log(a); // [ <1002 empty items> ]

이 성질을 이용하면 a.length = 0; 으로 간단하게 배열을 비울 수 있다.

toString

배열에는 Symbol.toPrimitive나 valueOf 메서드가 존재하지 않는다.
따라서 배열의 형 변환이 발생할 시 문자열로 변경된다.

arr.toString()은 배열 내 요소를 ‘,’ 로 이어붙인 문자열을 반환한다.

1
2
3
alert( [] + 1 ); // "1"
alert( [1] + 1 ); // "11"
alert( [1,2] + 1 ); // "1,21"
0%