[JAVASCRIPT.INFO] 5.4 배열

5.4 배열

배열선언

let arr = new Array();
let arr = [];
let fruits = ["apple", "orange", "plum"];

alert(fruits[0]);        // apple
alert(fruits[1]);        // orange
alert(fruits[2]);        // plum

fruits[2] = "pear";            // 배열이 ["apple", "orange", "pear"]로 바뀜

fruits[3] = "lemon";        // ["apple", "orange", "pear", "lemon"]으로 바뀜

alert(fruits.length);        // 4 , 배열의 길이를 알아낼 수 있다.
alert(fruits);        // apple,orange,pear,lemon   배열 요소 전체를 출력할 수 있다.

배열 요소의 자료형엔 제약이 없다.

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

pop, push 와 shift, unshift

pop

배열 끝 요소를 제거하고, 제거한 요소를 반환한다.

let fruits = ["사과", "오렌지", "배"];
alert(fruits.pop());        // 배
alert(fruits);        // 사과, 오렌지

push

배열 끝에 요소를 추가한다.

let fruits = ["사과", "오렌지"];
fruits.push("배");
alert(fruits);    // 사과,오렌지,배

fruits.push(...)를 호출하는 것은 fruits[fruits.length] = ...하는 것과 같은 효과를 보인다.

shift

배열 앞 요소를 제거하고, 제거한 요소를 반환한다.

let fruits = ["사과", "오렌지", "배"];
alert(fruits.shift());        // 배열에서 "사과"를 제거하고 제거된 요소를 얼럿창에 띄운다.
alert(fruits);         // 오렌지, 배

unshift

배열 앞에 요소를 추가한다.

let fruits = ["오렌지", "배"];
fruits.unshift('사과');
alert(fruits); // 사과,오렌지,배

push, unshift는 요소 여러 개를 한 번에 더해줄 수 있다.

배열의 내부 동작 원리

배열의 본질은 객체이다. 배열은 자바스크립트의 일곱 가지 원시 자료형에 해당하지 않고, 원시 자료형이 아닌 객체형에 속하기 때문에 객체처럼 동작한다.

let fruits = ["banana"];
let arr = fruits;        // 참조를 복사함(두 변수가 같은 객체를 참조)
alert(arr === fruits);        // true
arr.push("배");        // 참조를 이용해 배열을 수정한다.
alert(fruits);        // 바나나, 배    - 요소가 두 개가 됨

배열은 객체이기 때문에 원하는 프로퍼티를 추가해도 문제가 발생하지 않지만, 순서가 있는 자료의 컬렉션처럼 다루지 않는다면 배열의 이점이 사라진다.

성능

push와 pop은 빠르지만, shift와 unshift는 느리다.

shift메서드를 호출한 것과 동일한 효과를 보려면,

1. 인덱스가 0인 요소를 제거
2. 모든 요소를 왼쪽으로 이동
3. length 프로퍼티 값을 갱신

위 과정을 수행해야 하기 때문에 속도가 느려진다.

push, pop은 요소 이동을 수반하지 않기 때문에 메서드의 실행 속도가 빠르다.

반복문

배열은 객체형에 속하므로 for ... in도 사용가능하나, 모든 프로퍼티를 대상으로 순회하기 때문에 키가 숫자가 아닌 프로퍼티도 순회 대상에 포함된다. 브라우저나 기타 호스트 환경에서 쓰이는 객체 중, 배열과 유사한 형태를 보이는 '유사 배열' 객체가 있다. 유사 배열 객체엔 배열처럼 length 프로퍼티도 있고 요소마다 인덱스도 붙어있다. 여기에 더하여 배열과 달리 키가 숫자형이 아닌 프로퍼티와 메서드가 있을 수 있어 for ... in을 함꼐 사용하면 이 모든 것을 대상으로 순회가 이루어진다.

for ... in 반복문은 배열이 아니라 객체와 함께 사용할 때 최적화 되어 있어서 배열에 사용하면 객체에 사용하는 것 대비 10 ~ 100배 정도 느리다. 그러디 배열엔 되도록 for ... in을 쓰지 않도록 한다.

'length' 프로퍼티

length프로퍼티는 배열 내 요소의 개수가 아니라 가장 큰 인덱스에 1을 더한 값이다. 따라서 배열에 요소가 하나 있고, 이 요소의 인덱스가 아주 큰 정수라면 배열의 length프로퍼티도 아주 커진다.

length 프로퍼티의 또 다른 특징 중 하나는 쓰기가 가능하다는 것이다. length의 값을 수동으로 증가시키면 아무 일도 일어나지 않지만 값을 감소시키면 배열이 잘리게 된다. 짧아진 배열은 다시 되돌릴 수 없다.

let arr = [1,2,3,4,5];
arr.length = 2;
alert(arr);        // [1,2];

new Array()

숫자형 인수 하나를 넣어서 new Array를 호출하면 배열이 만들어지는데, 이 배열엔 요소가 없는 반면 길이는 인수와 같아진다.

let arr = new Array(2);
alert(arr[0]);        // undefined가 추력됨
alert(arr.length);        // 2

new Array(number)로 생성한 배열의 요소는 모두 undefined이다.

toString

배열엔 toString메서드가 구현되어 있어 이를 호출하면 요소를 쉼표로 구분한 문자열이 반환된다.

let arr = [1,2,3];
alert(arr);         // 1,2,3
alert(String(arr) == '1,2,3');        // true

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