5. Javascript 배열 (3) - 배열 push( ) 메소드

 

length 프로퍼티 기반 배열 표준 메소드

대부분의 배열 관련 표준 메소드는 length 프로퍼티를 기반으로 동작합니다. 그래서 length 프로퍼티의 유무 여부는 해당 객체가 배열인지의 여부와 거의 직접적인 관계가 있다고 해도 과언이 아닐 정도로 중요합니다. 단순히 배열 객체 안의 원소 개수만을 출력하는 기능이라고 가볍게 여겨서는 안되죠. 

 

여기서는 간단하게 예시로 push( )메소드를 통해, 배열 표준 메소드의 동작 방식을 살펴보도록 하겠습니다.

 

 

push( ) 메소드

배열 표준 메소드인 push( )는 인자로 넘어온 값을 해당 배열의 끝에 추가하는 메소드 입니다. 단, 여기서 '배열의 끝'의 기준은 해당 배열의 length가 됩니다. 요약해 정의하면, [현재 length 프로퍼티 값과 동일한 인덱스에 원소를 추가한다]가 되겠습니다.

 

length는 사실상 현재 배열이 가지고 있는 인덱스 값 + 1이 되기 때문에, 관념적으로는 새로운 인덱스를 배열 끝부분에 하나 추가해 새로운 원소를 생성하는 꼴이 되는 것이죠. 더불어, 해당 인덱스에 원소가 있고 없고는 중요하지 않습니다. 무조건 새로운 인덱스가 추가되는 개념이라고 생각해 주세요.

 

다소 설명이 복잡하게 되었지만, 실제로 예시를 통해 살펴보도록 하겠습니다.

 

var newArr = ['a', 'b', 'c'];

newArr.push('d');
console.log(newArr);
/* 출력 */
// [ 'a', 'b', 'c', 'd' ]


newArr.length = 5;
newArr.push('e');

console.log(newArr);
/* 출력 */
// [ 'a', 'b', 'c', 'd', <1 empty item>, 'e' ]

 

위의 예시에서 보다시피, 3번 라인에서 'd'를 추가했더니 자연스럽게 배열 newArr의 끝 부분에 'd'가 추가된 것을 확인할 수 있습니다. 이 상태에서 newArr의 length값은 얼마일까요? 바로 4가 되겠죠. 인덱스는 0~3이 생성되어 있습니다. 

 

이때, newArr의 length를 임의로 5로 변경해 주었습니다. 이 때 어떤 일이 벌어지는지 알고 계시죠? 인덱스는 0~4까지 생성된 상태가 됩니다. newArr[4]는 원소가 없기 때문에 undefined 상태입니다. 

 

이때 newArr.push('e')를 실행하게 되면, 현재의 length 값인 5와 동일한 newArr[5] 인덱스가 새로 생성되고 여기에 'e'가 할당됩니다. 그럼 이로 인해 newArr의 length값은 6으로 늘어나게 됩니다. 이 때 newArr을 출력해보면 newArr[5]는 'e'가 할당되어 있고, newArr[4]는 undefined가 되어있는 것을 볼 수 있습니다.