27장 : 배열

4. 배열 생성

1) 배열 리터럴

 

대괄호에 원소를 넣어 만든다.

배열 리터럴은 프로퍼티 키 없이 값만 존재한다.

 

2) Array 생성자 함수

전달된 인수의 개수에 따라 다르게 동작한다.

const arr = new Array(10);

console.log(arr); // [empty × 10]
console.log(arr.length); // 10

전달된 인수가 하나인 경우,

그 인수를 length로 갖는 빈 배열을 생성한다.

 

new Array(); // -> []

전달된 인수가 없으면 빈 배열을 생성한다.

배열 리터럴 []와 동일하다.

 

// 전달된 인수가 2개 이상이면 인수를 요소로 갖는 배열을 생성한다.
new Array(1, 2, 3); // -> [1, 2, 3]

// 전달된 인수가 1개지만 숫자가 아니면 인수를 요소로 갖는 배열을 생성한다.
new Array({}); // -> [{}]


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

전달된 인수가 2개 이상이거나

하나더라도 숫자가 아닌 인수를 넘겨준 경우

해당 인수를 요소로 갖는 배열을 생성한다.

 

또한 new 키워드를 생략해도 똑같이 동작한다.

 

 

3) Array.of

Array 생성자 함수와 다르게 

몇 개의 인수를 전달하더라도

해당 인수를 요소로 갖는 배열을 생성한다.

 

// 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.
Array.of(1); // -> [1]

Array.of(1, 2, 3); // -> [1, 2, 3]

Array.of('string'); // -> ['string']

 

4) Array.from

유사 배열 객체, 이터러블 객체를 인수로 전달받아 배열로 변환해서 반환한다.

// 유사 배열 객체를 변환하여 배열을 생성한다.
Array.from({ length: 2, 0: 'a', 1: 'b' }); // -> ['a', 'b']

// 이터러블을 변환하여 배열을 생성한다. 문자열은 이터러블이다.
Array.from('Hello'); // -> ['H', 'e', 'l', 'l', 'o']

 

// Array.from에 length만 존재하는 유사 배열 객체를 전달하면 undefined를 요소로 채운다.
Array.from({ length: 3 }); // -> [undefined, undefined, undefined]

// Array.from은 두 번째 인수로 전달한 콜백 함수의 반환값으로 구성된 배열을 반환한다.
Array.from({ length: 3 }, (_, i) => i); // -> [0, 1, 2]

또한 두 번째 인수로 전달한 콜백함수를 통해 값을 만들면서 요소를 채운다.

콜백함수의 첫 파라미터는 각 요소, 

두 번째 파라미터는 인덱스이다. 

 

 

유사배열 객체란?

배열처럼 인덱스로 프로퍼티 값에 접근 가능하고,

length 프로퍼티를 갖는 객체

for문 처럼 순회도 가능

 

 

이터러블 객체란?

for..of로 순회 가능하고

스프레드 문법과 구조분해 할당 대상으로 사용 가능한 객체

Array, String, Map, Set, DOM 컬렉션, arguments가 있다.