[모던 JavaScript 튜토리얼] 23. 배열

본문 바로가기

pop·push와 shift·unshift

pop() 은 맨 뒤 요소를 꺼낸다. push() 는 맨 뒤에 요소를 추가한다.

shift() 는 맨 앞 요소를 꺼낸다. unshift() 는 맨 앞에 요소를 추가한다.

위 네 가지 연산으로 stack, queue, deque 로 작동할 수 있다.

배열의 내부 동작 원리

배열의 본질은 객체다.

• 배열 arr 의 요소를 arr[0] 과 같이 대괄호로 접근하는 것도 객체 문법에서 비롯됐다.
• 길이 정보를 갖고 있는 length 같은 프로퍼티도 제공한다.

let arr = [];

arr.cnt = 5;

console.log(arr); // [ cnt: 5 ]

따라서, 배열을 객체처럼 사용할 수도 있다. 하지만 위처럼 숫자가 아닌 값을 프로퍼티로 사용하는 경우, 배열을 다룰 때만 적용되는 최적화 기법이 동작하지 않아 배열 특유의 이점이 사라진다고 한다.

위의 경우는 굳이 배열을 사용할 필요가 없어 보인다.

let arr = [];

arr[0] = 0;
arr[1000] = 1000;

console.log(arr); // [ 0, <999 empty items>, 1000 ]

위의 경우도 잘못된 사용 방법이라고 한다. 맨 처음과 맨 마지막 사이 999개 공간에 아무런 요소가 없어서, 요소를 인접한 메모리 공간에 저장하는 배열의 이점을 없앤다.

let arr = [];

arr[1000] = 1000;
console.log(arr); // [ <1000 empty items>, 1000 ]

arr[999] = 999;
console.log(arr); // [ <999 empty items>, 999, 1000 ]

요소를 역순으로 채우는 경우, 뒤의 모든 요소를 한 칸씩 뒤로 미루는 동작이 필요하기에, 속도가 느리다. 이는 push() 와 pop() 은 빠르지만, shift() 와 unshift() 가 느린 이유가 된다.

배열 요소 순회

let fruits = ["사과", "오렌지", "자두"];

for (let fruit of fruits) {
    console.log(fruit); // 사과, 오렌지, 자두
}

for...of 로 값을 읽어올 수 있다.

let fruits = ["사과", "오렌지", "자두"];

for (let idx in fruits) {
    console.log(idx);         // 0,   1,    2
    console.log(fruits[idx]); // 사과, 오렌지, 자두
}

for...in 으로 인덱스를 얻어올 수 있다. 하지만 다음과 같은 특징을 지니기 때문에, 배열에 for...in 구문 사용은 되도록 피하자.

1. for…in 구문은 모든 프로퍼티를 대상으로 순회한다. 키가 숫자가 아닌 프로퍼티도 순회 대상에 포함된다.
2. for..in 구문은 배열이 아니라 객체와 함께 사용할 때 최적화 되어 있어서, 객체에 사용하는 것 대비 10~100배 느리다.
3. 반복되는 순서는 구현에 따라 다르기 때문에, 각 요소를 일관된 순서로 방문하지 못할 수 있다. ([백준] 1713. 후보 추천하기 참고.)

length 프로퍼티

let fruits = [];
fruits[9] = "사과";

console.log(fruits);        // [ <9 empty items>, '사과' ]
console.log(fruits.length); // 10

length 프로퍼티는 배열 내 요소 개수가 아니라, 가장 큰 인덱스에 1을 더한 값으로 설정된다. 위 예처럼, 요소가 1개 있어도 length 는 10이 된다.

let arr = [1, 2, 3, 4, 5];

arr.length = 2;
console.log(arr); // [ 1, 2 ]

arr.length = 5;
console.log(arr); // [ 1, 2, <3 empty items> ]

arr[2] = 3;
console.log(arr); // [ 1, 2, 3, <2 empty items> ]

arr.push(4);
console.log(arr); // [ 1, 2, 3, <2 empty items>, 4 ]

위 예제처럼, 임의로 length 를 줄이거나 늘리는 등의 변경도 가능하다.

let arr = [1, 2, 3, 4, 5];

arr.length = 0;

console.log(arr);

length 에 0을 줌으로써, 배열 내부 모든 요소를 간단히 제거할 수 있다.

new Array()

let arr = new Array(5);

console.log(arr); // [ <5 empty items> ]

위 코드와 같이 생성자를 이용해 배열을 만들 수도 있다. 혹은, new 키워드 없이 생성자를 호출해도 배열이 생성된다. 생성자의 파라미터로 length 프로퍼티 값을 지정해 줄 수 있다. 만들어진 배열의 모든 요소의 값은 undefined 로 설정된다.

다차원 배열

[JavaScript] 배열을 생성 및 초기화하는 방법 참고.

toString

배열엔 toString 메서드가 오버라이딩 되어 있어, 호출시 요소를 쉼표로 구분한 문자열이 반환된다.