Javascript 배열

자바스크립트 배열이란?

const arr = [1, 2, 3];

arr.constructor === Array;
Object.getPrototypeOf(arr) === Array.prototype;

• 배열이란 인덱스에 대응하는 데이터들로 이루어진 자료구조를 말합니다.

• 자바스크립트에서는 배열 타입이 별도로 존재하지 않으며 배열은 객체입니다. 배열은 배열 리터럴, Array 생성자 함수, Array of, Array.from 메서드로 생성할 수 있습니다.

자바스크립트 배열의 특징

const arr = [, 2, , 4];

// [empty, 2, empty, 3] 출력
console.log(arr);

// 4 출력
console.log(arr.length);

• 자바스크립트 배열은 해시 테이블로 구현된 객체이므로 인덱스로 요소에 접근하는 경우 일반적인 배열보다 성능적인 면에서 떨어지지만 요소를 삽입, 삭제하는 경우에는 일반적인 배열보다 빠른 성능을 기대할 수 있습니다. 자바스크립트는 배열의 중간 요소를 비울 수 있는 희소 배열을 문법적으로 허용합니다.
  희소 배열은 연속적인 값의 집합이라는 배열의 기본적인 개념과 맞지 않으며, 성능에도 좋지 않은 영향을 줍니다.

모던 자바스크립트 배열

• 최적화가 잘 되어 있는 모던 자바스크립트 엔진은 요소의 타입이 일치하는 배열을 생성할 때 일반적인 의미의 배열처럼 연속된 메모리 공간을 확복합니다. 배열을 생성할 때 희소 배열을 생성하지 않도록 주의하고, 배열에는 같은 타입의 요소를 연속적으로 위치시키는 것이 최선입니다.

배열 생성 방법

// 배열 리터럴
let arr = [1, 2, 3];

// length 5개인 배열 생성
arr = new Array(5);

// [1,2,3] 요소를 가진 배열 생성
arr = new Array(1, 2, 3);

// 요소가 1인 배열 생성
arr = Array.of(1);

// 유사 배열 객체, 이터러블로 배열 생성
arr = Array.from({ length: 2, 0: "a", 1: "b" });

arr = Array.from("Hello");

• Array.of, Array.from은 ES6에 추가된 배열 생성 방법입니다.

유사 배열 객체(array-like object)

• 유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 전급할 수 있고 length 프로퍼티를 갖는 객체를 말합니다.

이터러블(iterable object)

• 이터러블 객체는 Symbol.iterator 메서드를 구현하여 for...for 문으로 순회할 수 있으며, 스프레드 배열 디스트럭처링 할당의 대상으로 사용할 수 있는 객체를 말합니다.

배열 요소 추가와 삭제

const arr = [20, 30, 40];

// 뒤에 요소 추가
arr.push(100);

// 뒤에 요소 삭제
arr.pop();

// 배열 요소 삭제
delete arr[0];

arr.splice(0, 1);

// [30, 40] 출력
console.log(arr);

• 배열은 객체이며 배열의 특정 요소를 삭제하기 위해서는 delete 연산자를 사용할 수 있습니다. 하지만, 이때 희소배열이 되며 length 프로퍼티 값은 변하지 않습니다. 그렇기 때문에 splice 메서드를 사용하는 것이 더 좋습니다.