[인사이드 자바스크립트] 자바스크립트 데이터 타입과 연산자 5 - 배열 2

배열

배열의 프로퍼티 동적 생성

배열도 자바스크립트 객체이므로, 인덱스가 숫자인 배열 원소 이외에도 객체처럼 동적으로 프로퍼티를 추가할 수 있다.

 

 

• 동적 프로퍼티가 추가될 경우 배열의 length 값은 바뀌지 않는다. 배열의 length 프로퍼티는 배열 원소의 가장 큰 인덱스가 변했을 경우만 변경된다.

배열의 프로퍼티 열거

객체는 for in 문으로 프로퍼티를 열거한다. 배열도 객체이므로 for in 문을 사용해서 배열 내의 모든 프로퍼티를 열거할 수 있지만, 이렇게 되면 불필요한 프로퍼티가 출력될 수 있으므로 되도록 for 문을 사용하는 것이 좋다.

 

 

배열 요소 삭제

배열도 객체이므로, 배열 요소나 프로퍼티를 삭제하는 데 delete 연산자를 사용할 수 있다.

 

 

• delete arr[2]로 배열의 요소를 삭제하면, arr[2]에 undefined가 할당되며, delete 연산자로 배열 요소 삭제 후에도 배열의 length 값은 변하지 않는다.

즉, delete 연산자는 해당 요소의 값을 undefined로 설정할 수 있을 뿐 원소 자체를 삭제하지는 않는다. 때문에 보통 배열에서 요소들을 완전히 삭제할 경우 자바스크립트에서는 splice() 배열 메서드를 사용한다.

 

* splice() 배열 메서드

- splice(start, deleteCount, item ...)

- start : 배열에서의 시작 위치

- deleteCount : start가 지정한 시작 위치부터 삭제할 요소의 수

- item : 삭제할 위치에 추가할 요소

 

Array() 생성자 함수

배열은 일반적으로 배열 리터럴로 생성하지만, 배열 리터럴도 결국 자바스크립트 기본 제공 Array() 생성자 함수로 배열을 생성하는 과정을 단순화시킨 것이다. 

Array() 생성자 함수는 호출할 때 인자 개수에 따라 동작이 다르므로 주의해야 한다. 

• 호출할 때 인자가 1개이고, 숫자일 경우 : 호출된 인자를 length로 갖는 빈 배열 생성
• 그 외의 경우 : 호출된 인자를 요소로 갖는 배열 생성

 

유사 배열 객체

배열의 length 프로퍼티는 배열의 동작에 있어서 중요한 프로퍼티이다. 그렇다면 만약 일반 객체에 length라는 프로퍼티가 있으면 어떻게 될까? 자바스크립트에서는 이렇게 length 프로퍼티를 가진 객체를 유사배열객체(array-like objects)라고 부른다. 

유사배열객체의 가장 큰 특징은 객체임에도 불구하고, 자바스크립트의 표준 배열 메서드를 사용하는 게 가능하다는 것이다.

 

• 유사 배열 객체인 obj는 배열이 아니므로 바로 push() 메서드를 호출할 경우 에러가 발생한다.

하지만 유사 배열 객체의 경우 apply() 메서드를 사용하여 명시적 this 바인딩을 이용하면 객체지만 표준 배열 메서드를 활용하는 것이 가능하다.