스터디 8주차 주간 공부 내용 - JS Array

배열

배열은 여러 개의 값을 순차적으로 나열한 자료구조이다. 값의 순서와 length 프로퍼티를 갖기 때문에 순차적으로 값에 접근하기 적합한 자료구조다.

❗️잠깐 배열에 대해서 더 알아보자.

자료구조에서 말하는 일반적인 배열:

• 각 요소가 동일한 데이터 크기를 가지며, 배열의 요소가 하나의 데이터 타입으로 통일 되어있으며, 빈틈없이 연속적으로 이어져 있는 밀집 배열 자료구조를 말한다.

  검색 대상 요소의 메모리 주소 = 배열의 시작 메모리 주소 + 인덱스 * 요소의 바이트 수

• 👍Pros

  즉 배열은 인덱스를 통해 단 한번의 연산으로 임의의 요소에 접근 할 수 있으므로 매우 빠르게 동작한다. (시간 복잡도 O(1))

• 🖕Cons

  그러나 정렬되지 않은 배열에서 특정한 요소를 검색하는 경우 배열의 모든 요소를 처음부터 특정 요소를 발견할 때까지 차례대로 검색해야한다. (선형 검색, 시간 복잡도 O(n))
  또한 배열에 요소를 삽입하거나 삭제하는 경우 배열의 요소를 연속적으로 유지하기 위해 요소를 이동시켜야 하는 단점도 있다.

자바스크립트의 배열:

• 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. 즉 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있다 (희소 배열).
• 해시 테이블로 구현된 객체인 자바스크립트 배열은 일반 배열과 반대로 인덱스로 요소에 접근하는 경우 일반 배열보다 성능면에서 느리다는 단점이 있다. 하지만 특정 요소를 검색하거나 삽입, 삭제하는 경우 일반 배열보다 빠른 성능을 기대할 수 있다.

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

const arr = [1,2,3]
typeof arr // 'object'

arr.constructor === Array //true
Object.getPrototypeOf(arr) === Array.prototype //true

엄밀히 말하자면 자바스크립트의 배열은 일반적인 배열의 동작을 흉내낸 특수한 객체이다. 아래 코드를 봐보자.

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

이처럼 자바스크립트의 배열은 인덱스를 나타내는 문자열을 프로퍼티 '키'로 가지며, length 프로퍼티를 갖는 객체이다. 배열의 요소는 사실 프로퍼티의 값이다.

자바스크립트의 일반 객체와 배열

자바스크립트의 배열은 요소에 접근할 때 일반적인 배열보다 느릴 수밖에 없는 구조를 보완하기 위해 일반 객체와 배열을 구별하여 좀 더 배열처럼 동작하도록 구현했다.
아래 코드를 보면 배열과 일반 객체의 성능은 속도에서 2배정도가 차이난다.

const obj = {}
console.time('obj performance test')
for(let i = 0; i < 100000000; i ++){
    obj[i] = i;
}
console.timeEnd('obj performance test')
// obj performance test: 1097.928955078125 ms

const arr = []
console.time('arr performance test')
for(let i = 0; i < 100000000; i ++){
    arr[i] = i;
}
console.timeEnd('arr performance test')
// arr performance test: 556.688720703125 ms