JavaScript

Array vs JavaScript Array

Array

밀집 배열(dense: 빽빽한, 짙은, 밀집한 Array)

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

배열은 각 요소가 동일한 데이터 크기를 가지며, 빈틈없이 연속적으로 이어져 있다.

---

JavaScript Array

희소 배열(sparse: 드문, (밀도가)희박한 array)

자바스크립트의 배열은 배열이 아닌 객체(일반적인 배열의 동작을 흉내낸 특수한 객체)이다. 

자바스크립트의 배열은 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며 연속적으로 이어져 있지 않을 수도 있다.

 

객체와 배열의 차이 : 가장 명확한 차이는 값의 순서와 length 프로퍼티의 유무이다.

---

const arr = [1, 2, 3];
console.log(typeof arr); // object!!
console.log(Array); // Function: Array
console.log(arr.constructor === Array); // true
console.log(Object.getPrototypeOf(arr) === Array.prototype); // true

const obj = new Object({ 0: 1, 1: 2, 2: 3 });
console.log(obj.length); // undefined
console.log(arr.length); // 3

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 }
}
*/
console.log(Object.getOwnPropertyDescriptors(obj));
/*
{
  '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 },
}
*/

자바스크립트의 배열 === 객체

 

자바스크립트 배열은 인덱스를 나타내는 문자열 프로퍼티를 key로 가지고 length 프로퍼티를 갖는 특수한 '객체'이다.

자바스크립트 배열의 요소는 사실 value 값이다.

 

자바스크립트에서는 모든 값(value))이 객체의 프로퍼티(key) 값이 될 수 있으므로

어떠한 값이라도 배열의 요소( 要 요긴할 요 素 본디/ 바탕 소 : 사물의 성립이나 효력 발생 따위에 꼭 필요한 성분. 또는 근본 조건) 가 될 수 있다.

 

- 일반적인 배열

   인덱스로 요소에 빠르게 접근 가능

   특정 요소를 검색하거나 삽입 또는 삭제가 효율적이지 않음

   fixed-list로서 초기에 배열의 크기를 지정해 줘야함.

   연속적으로 나열된 배열구조

- 자바스크립트의 배열

   해시 테이블로 구현된 객체이므로 인덱스로 요소에 접근하는 경우 일반적인 배열보다 성능적으로 느림

   특정 요소를 검색하거나 삽입 또는 삭제하는 경우에는 일반적인 배열보다 성능적으로 빠름

 

---

length 프로퍼티와 희소 배열

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

arr.push(4);
console.log(arr.length); // 4

arr.pop();
console.log(arr.length); // 2

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

const arr3 = [1, 2];
arr3.length = 4;

console.log(arr3.length); // 4
console.log(arr3); // [1, 2, <2 empty items>]

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

 */
// configurable : 구성 가능 enumerable : 셀 수 있는

arr3[3] = 4;
console.log(arr3);
console.log(arr3.length);
console.log(arr3[2], arr3[3]);

//값이 없는 요소를 위해 메모리 공간을 확보하지 않는다!!
//이렇게 배열의 요소가 연속적으로 위치하지 않고 일부가 비어있는 배열을 희소 배열이라고 한다.
console.log(Object.getOwnPropertyDescriptors(arr3));
/**
{
  '0': { value: 1, writable: true, enumerable: true, configurable: true },
  '1': { value: 2, writable: true, enumerable: true, configurable: true },
  '3': { value: 4, writable: true, enumerable: true, configurable: true },
  length: { value: 4, writable: true, enumerable: false, configurable: false }
}
 */

---

배열인지 체크하는 방법

자바스크립트 코드를 작성하다 보면 배일인지 아닌지 체크해야 할 때가 있다.

위에서 언급했다 시피 배열은 object 객체로 만들어져 있기 때문에 보통의 경우 처럼 typeof를 사용할 수 없다.

=> 배열인지 아닌지 체크하는 메서드를 제공한다.

=> Array.isArray()를 사용하여 배열인지 체크할 수 있다. 

const checkArr = [1, 2, 3];
console.log(typeof checkArr); //object
console.log(Array.isArray(checkArr)); //true

 

---

 

[JavaScript] 배열이 배열이 아니라고?