[TIL/모던 자바스크립트 Deep Dive] 2023/07/24

27장. 배열 🟢

27-5. 배열 요소의 참조 🟡

배열의 요소를 참조할 때에는 대괄호 표기법을 사용한다. 대괄호 안에는 인덱스가 와야 한다. 정수로 평가되는 표현식이라면 인덱스 대신 사용할 수 있다. 인덱스는 값을 참조할 수 있다는 의미에서 객체의 프로퍼티 키와 동일한 역할을 한다.

존재하지 않는 요소에 접근하면 undefined가 반환된다.

배열은, '인덱스를 나타내는 문자열'을 프로퍼티 키로 갖는 객체다. 따라서 객체와 동일하게, 존재하지 않는 요소를 참조할 경우 undefined를 반환하게 되는 것이다. 마찬가지로 희소 배열의 존재하지 않는 요소를 참조해도 undefined가 반환된다.

27-6. 배열 요소의 추가와 갱신 🟡

객체에 프로퍼티를 동적으로 추가할 수 있는 것처럼, 배열에도 요소를 동적으로 추가할 수 있다. 존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가된다. length 프로퍼티의 값은 자동적으로 갱신된다.

현재 배열의 length 프로퍼티 값보다 큰 인덱스로 새로운 요소를 추가하면 희소 배열이 된다. 다만, 인덱스로 요소에 접근하여 명시적으로 값을 할당하지 않은 요소는 생성되지 않는다.

인덱스는 요소의 위치를 나타낸다. 따라서 반드시 0이상의 정수(또는 정수 형태의 문자열)를 사용해야 한다. 정수 이외의 값을 인덱스처럼 사용하면 요소가 아닌 '프로퍼티'가 생성되고, 이때 추가된 프로퍼티는 length 프로퍼티 값에 영향을 주지 않는다. 다음과 같다.

27-7. 배열 요소의 삭제 🟡

배열은 실상 객체이기에, 배열의 특정 요소를 삭제하기 위해 delete 연산자를 사용할 수 있다.

배열에서 특정 요소가 삭제되었는데 희소 배열이 되며 length 프로퍼티의 값이 변하지 않는 현상은, 코드의 예측 가능성을 저하시킨다. 따라서 희소 배열을 만드는 delete 연산자를 사용하는 것은 지양하는 것이 좋다. 대신 Array.prototype.splice 메서드를 사용하도록 하자.