[모던 자바스크립트] 배열(1) - 내가 아는 배열이 배열이 아니었던 썰

배열(Array)

여러 개의 값을 순차적으로 나열한 자료구조

특징

• 사용 빈도가 높은 기본적인 자료구조
• 유용한 메서드 다수 제공

용어 정리 with 예시

const arr = ['apple', 'banana', 'orange'];

• 요소 : 배열이 가지고 있는 값
  • 모든 값은 배열의 요소가 될 수 있다.
  • ex. 'apple', 'banana', 'orange'
• 인덱스 : 배열에서 자신의 위치를 나타내는 0이상의 정수
  • 배열 요소에 접근할 때 사용
  • ex. arr[0] = 'apple'

생성 방법

• 배열 리터럴
• Array 생성자 함수
• Array.of, Array.from 메서드로 생성

배열 vs 객체

구분	객체	배열
구조	프로퍼티 키, 프로퍼티 값	인덱스와 요소
값의 참조	프로퍼티 키	인덱스
*값의 순서	X	O
*length프로퍼티	X	O

 * 배열과 일반객체를 구분하는 가장 명확한 차이

 

자바스크립트 배열은 배열이 아니다...

자료 구조에서의 배열

동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조

• 인덱스로 요소에 빠르게 접근 가능
• 요소를 삽입 또는 삭제하는 경우에는 비효율적

자바스크립트에서의 배열

배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있다. 이처럼 배열 요소가 연속적으로 이어져 있지 않은 배열을 희소 배열 이라 한다.

일반적인 배열의 동작을 흉내낸 특수 객체

console.log(Object.getOwnPropertyDescriptors([1, 2, 3]));
/*
{
  '0': {value: 1, writable: true, enumerable: true, configurable: true}
  '1': {value: 2, writable: true, enumerable: true, configurable: true}
  '2': {value: 3, writable: true, enumerable: true, configurable: true}
  length: {value: 3, writable: true, enumerable: false, configurable: false}
}
*/

• 해시 테이블로 구현된 객체 이므로 인덱스로 접근하는 경우 일반 배열보다 성능적인 면에서 느려질 수밖에 없다
• 요소를 삽입 또는 삭제하는 경우 빠른 성능을 기대할 수 있다

const arr = [];

console.time('Array Performance Test');

for (let i = 0; i < 10000000; i++) {
  arr[i] = i;
}
console.timeEnd('Array Performance Test');
// 약 340ms

const obj = {};

console.time('Object Performance Test');

for (let i = 0; i < 10000000; i++) {
  obj[i] = i;
}

console.timeEnd('Object Performance Test');
// 약 600ms

length 프로퍼티 : 배열의 길이

• *반복문(while, for, map등)을 통해서 순차적으로 요소에 접근할 수 있음
• 요소를 추가하거나 삭제하면 자동 갱신됨
• 배열의 길이를 바탕으로 결정하지만, 임의의 숫자값을 명시적으로 할당할 수 있음

arr.length // -> 3

// 배열의 순회
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 'apple' 'banana' 'orange'
}

주의

length 프로퍼티 값보다 큰 숫자값을 할당하는 경우 프로퍼티 값은 변경되지만 실제로 배열 길이가 늘어나지 않는다

값 없이 비어있는 요소를 위해 메모리 공간을 확보하지 않으며 빈 요소를 생성하지도 않는다.

 

console.log(Object.getOwnPropertyDescriptors(arr));
/*
{
  '0': {value: 1, writable: true, enumerable: true, configurable: true},
  length: {value: 3, writable: true, enumerable: false, configurable: false}
}
*/