배열을 생성하는 방법

배열을 생성하는 방법에는 총 4가지가 있다. 배열 리터럴, Array 생성자 함수, Array.of, Array.from 각각의 특징을 알아보자.

1. 배열 리터럴

• 가장 일반적인 배열 생성 방식
• 배열 리터럴은 0개 이상의 요소를 쉼표로 구분하여 대괄호로 묶어 생성
• 객체 리터럴과 달리 프로퍼티 키가 없고 값만 존재

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

• 배열 리터럴에 요소를 하나도 추가하지 않으면 빈 배열 생성

  const arr = [];
  console.log(arr.length);    // 0

• 배열 리터럴에 요소를 생략하면 희소 배열 생성

  const arr = [1, , 3];    // 희소 배열
  console.log(arr.length);    // 3
  console.log(arr);    // [1, empty, 3]
  console.log(arr[1]);    // undefined

희소 배열이란?

• 배열의 요소가 연속적으로 위치하지 않고 일부가 비어 있는 배열 (ex. [1, , 3])
• 자바스크립트는 희소 배열을 문법적으로 허용
• 희소 배열의 length > 배열 요소의 개수
• 희소 배열은 성능에 좋지 않고 배열의 의미와 동떨어져 있기 때문에 권장하지 않음
• 배열에는 같은 타입의 요소를 연속적으로 위치시키는 것을 권장

2. Array 생성자 함수

• Array 생성자 함수를 통해 배열 생성
• 전달된 인수의 개수에 따라 다르게 동작하므로 주의가 필요

1. 전달된 인수가 1개이고 숫자인 경우

   • length 프로퍼티 값이 인수인 배열 생성 = 인수 개수만큼 배열 요소 생성

   const arr = new Array(10);
   
   console.log(arr);    // [empty, empty, empty, ... , empty]
   console.log(arr.length);    // 10

   • 이때 생성된 배열은 희소 배열
   • length 프로퍼티 값은 0이 아니지만 실제로 배열의 요소는 존재하지 않음

2. 전달된 인수가 없는 경우
   • 빈 배열 생성
   • 배열 리터럴 [ ]과 같음

   new Array();    // []

3. 전달된 인수가 2개 이상이거나 숫자가 아닌 경우
   • 인수를 요소로 갖는 배열 생성

   new Array(1, 2, 3);    // [1, 2, 3]
   new Array({});    // [{}]

• Array 생성자 함수는 new 연산자와 함께 호출하지 않아도 배열을 생성하는 생성자 함수로 동작 -> Array 생성자 함수 내부에서 new.target을 확인하기 때문

Array(1, 2, 3);    // [1, 2, 3]

3. Array.of

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

Array.of(1);    // [1]
Array.of(1, 2, 3);    // [1, 2, 3]
Array.of('hello');    // ['hello']

4. Array.from

• ES6에 도입

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

  // 유사 배열 객체 -> 배열
  Array.from({ length: 2, 0: 'a', 1: 'b' });    // ['a', 'b']
  
  // 이터러블 -> 배열
  Array.from('hello');    // ['h', 'e', 'l', 'l', 'o']

유사 배열 객체와 이터러블 객체

• 유사 배열 객체
  • 배열처럼 인덱스로 프로퍼티 값에 접근 가능
  • length 프로퍼티를 갖고 있음
  • 배열처럼 for문으로 순회 가능
• 이터러블 객체
  • Symbol.iterator 메서드를 구현하여 for...of문으로 순회 가능
  • 스프레드 문법, 배열 디스트럭처링 할당 대상으로 사용할 수 있는 객체
  • Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments 등이 해당

• Array.from에 length만 존재하는 유사 배열 객체를 전달하면 요소를 undefined로 채움

  Array.from({ length: 3 });    // [undefined, undefined, undefined]

• Array.from에 두 번째 인수로 콜백 함수를 전달하면 콜백 함수의 반환값으로 구성된 배열을 반환

  Array.from({ length: 3}, (_, i) => i);    // [0, 1, 2]

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