[Deep Dive] 배열

🌼27. 배열

자바스크립트에서 배열은 여러 개의 값을 순차적으로 나열한 자료구조로 엄밀히 말에 자료구조에서 통용되는 일반적인 의미의 배열이 아니다. 자바스크립트의 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체다.

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

자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다. 즉, 배열의 요소는 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접해 있다. 이러한 배열을 밀집 배열(dense array)이라 한다.

하지만 자바스크립트의 배열은 자료구조에서 말하는 일반적인 배열의 의미와 다르다. 즉, 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있다. 배열의 요소가 연속적으로 이어져 있지 않는 배열을 희소 배열(sparse array)라고 한다.

• 일반적인 배열은 각 요소가 동일한 데이터 크기를 가지며 빈틈없이 연속적으로 이어져 있으므로 인덱스를 통해 단 한번의 연산으로 임의의 요소에 접근할 수 있어 매우 효율적이다. 하지만 특정 요소를 검색하거나 요소를 삽입 또는 삭제하는 경우에는 배열의 요소를 연속적으로 유지하기 위해 각 요소들을 이동시켜야해서 효율적이지 않다. (정렬되어 있지 않은 값을 선형 탐색할 경우, O(n)만큼의 시간복잡도가 걸린다.)

• 자바스크립트 배열은 해시 테이블로 구현된 객체이므로 인덱스로 요소에 접근하는 경우 일반적인 배열보다 성능적인 면에서 느릴수 밖에 없는 구조적인 단점이 있다. 하지만 특정 요소를 검색하거나 요소를 삽입 또는 삭제하는 경우에는 일반적인 배열보다 빠른 성능을 기대할 수 있다.

console.log(Object.getOwnPropertyDescriptors([1,2,3]));
/*

1. 인덱스를 나타내는 문자열을 프로퍼티 키로 갖는다.
2. length 프로퍼티를 갖는 특수한 객체다.
3. 배열의 요소는 사실 프로퍼티 값이다.
4. 자바스크립트에서 사용할 수 있는 모든 값은 객체의 프로퍼티 값이 될 수 있다.
   즉, 어떤 값이라도 배열의 요소가 될 수 있다.

{
  '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
  }
}
*/

🌼27.3 length 프로퍼티와 희소 배열

length 프로퍼티는 요소의 개수, 즉 배열의 길이를 나타내는 0 이상의 정수를 값으로 갖는다. length 프로퍼티 값은 요소의 개수, 즉 배열의 길이를 바탕으로 결정되지만 임의의 숫자 값을 명시적으로 할당할 수도 있다.

• 현재 length 프로퍼티 값보다 작은 숫자 값을 할당한 경우: 배열의 길이가 줄어든다.

const arr = [1, 2, 3, 4, 5];
arr.length = 3;
console.log(arr); // [1, 2, 3]

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

/*
1. <2 empty items>는 실제로 추가된 배열의 요소가 아니다. 값이 존재하지 않는다.
2. length 프로퍼티는 성공적으로 변경되지만 실제 배열에는 아무런 변함이 없다.
   비어 있는 요소를 위해 메모리 공간을 확보하지 않으면 빈 요소를 생성하지도 않는다.
*/
const arr = [1];
arr.length = 3;
console.log(arr.length); // 3
console.log(arr); // [1, <2 empty items>]

희소 배열은 length와 배열의 요소의 개수가 일치하지 않는다. 자바스크립트는 문법적으로 희소 배열을 허용하지만 희소 배열은 사용하지 않는 것이 좋다. 희소 배열은 연속적인 값의 집합이라는 배열의 기본적인 개념과 맞지 않으며, 성능에도 좋지 않은 영향을 준다. 모던 자바스크립트 엔진은 요소의 타입이 일치하는 배열을 생성할 때 일반적인 의미의 배열처럼 연속적인 메모리 공간을 확보하는 것으로 알려져 있다. 그러므로 배열에는 같은 타입의 요소를 연속적으로 위치시키는 것이 최선이다.

🌼27.4 배열 생성

• 배열 리터럴: 가장 일반적인 방식으로 0개 이상의 요소를 쉼표로 구분하여 대괄호로 묶는다.

• Array 생성자 함수: new 연산자와 함께 호출하지 않더라도 배열을 생성한다. 전달된 인수가 2개 이상이면 인수를 요소로 갖는 배열을 생성하며 전달된 인수가 숫자가 아니면 해당 인수를 요소로 갖는 배열을 생성한다.

• Array.of: Array 생성자 함수와 다르게 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.

• Array.from: 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환한다.

  • 유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다. 유사 배열 객체는 마치 배열처럼 for문으로 순회할 수도 있다.

const arr1 = [1, 2, 3];

const arr2 = new Array(10); // [ <10 empty items> ]
const arr3 = Array(1, 2, 3); // [1, 2, 3]

const arr4 = Array.of(1); // [1]

const arr5 = Array.from({ length: 2, 0: 'a', 1: 'b' }); // ['a', 'b']
const arr6 = Array.from('Hello'); // [ 'H', 'e', 'l', 'l', 'o' ]
const arr7 = Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]

🌼27.6 배열 요소의 추가와 갱신

배열의 요소를 추가할 때 정수 이외의 값을 인덱스처럼 사용하면 요소가 생성되는 것이 아니라 프로퍼티가 생성된다. 이때 추가된 프로퍼티는 length 프로퍼티 값에 영향을 주지 않는다.

const arr = [];
// 배열 요소의 추가
arr[0] = 1;
// 프로퍼티 추가
arr['foo'];
arr.bar = 4;

console.log(arr); // [1, foo: 3, bar: 4]

//프로퍼티는 length에 영향을 주지 않는다
console.log(arr.length); // 1

🌼27.7 배열 요소의 삭제

배열은 사실 객체이기 때문에 배열의 특정 요소를 삭제하기 위해 delete 연산자를 사용할 수 있다. delete 연산자를 객체의 프로퍼티를 삭제하는데 이때 배열은 희소배열이 되며 length 프로퍼티 값은 변하지 않는다.

희소 배열을 만들지 않으면서 배열의 특정 요소를 완전히 삭제하려면 Array.prototype.splice 메서드를 사용한다.

🌼27.8 배열 메서드

배열 메서드는 결과물을 반환하는 패턴이 두 가지이므로 주의가 필요하다. 배열에는 원본 배열을 직접 변경하는 메서드(mutator method)와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드(accessor method)가 있다. ES5부터 도입된 배열 메서드는 대부분 원본 배열을 직접 변경하지 않지만 초창기 배열 메서드는 직접 변경하는 경우가 있어 부수 효과가 있으므로 사용할 때 주의해야 한다. 따라서 가급적 원본 배열을 직접 변경하지 않는 메서드를 사용하는 편이 좋다.

• 배열에 특정 요소가 존재하는지 확인할 때는 가독성 측면에서 indexOf 보다 includes 메서드를 사용하는 것이 좋다.

• 원본 배열 마지막에 요소를 추가할 때는 push 메서드보다 length 프로퍼티를 사용하여 배열의 마지막에 요소를 직접 추가하는 것이 좋다. 또 스프레드 문법을 사용하면 원본 배열의 수정없이 요소를 추가할 수 있어 부수 효과가 없다.

const arr = [1, 2];
arr[arr.length] = 3; // push 대신

• push나 unshift 메서드를 대체할 수 있는 것으로 concat 메서드가 있다. 원본 배열을 해체시켜 새로운 배열을 구성한다.

const group1 = [1, 2];
const group2 = [3, 4];

const newGroup = group1.concat(group2); // [ 1, 2, 3, 4 ]

• 별도의 메서드를 사용하지 않고 ES6의 스프레드 문법을 사용하면 push/unshift/concat 메서드를 대체할 수 있다. 일관적으로 스프레드 문법을 사용할 것을 권장한다. 스프레드 문법을 사용하면 이터러블 객체를 간단하게 배열로 변경할 수도 있다.

const originalArr = [1, 2, 3];
const arr1 = [...arr, 4]; // push 대신
const arr2 = [0, ...arr]; // unshift 대신

• forEach 메서드는 함수형 프로그래밍 패러다임에서 for 반복문을 대체할 수 있는 메서드로 복잡성을 낮추고 가독성을 높혀준다. forEach 메서드도 결국은 내부적으로 for문으로 구현된 로직으로 for문에 비해 성능이 좋지는 않지만 요소가 대단히 많은 배열을 순회하거나 시간이 많이 걸리는 복잡한 코드 또는 높은 성능이 필요한 경우가 아니라면 forEach 메서드를 사용할 것을 권장한다.

출처: 모던 자바스크립트 Deep Dive-이웅모