중요한 배열 - 생성

배열을 생성하는 방법에 대해 알아보자!

배열 생성

배열 리터럴

Array 생성자 함수

Array.of

Array.from

 

배열 리터럴

0개 이상의 요소를 쉼표로 구분해 대괄호로 묶는다.

객체 리터럴과 달리 프로퍼티 키가 없고 값만 존재

요소를 하나도 추가하지 않으면 배열의 길이(length 프로퍼티)가 0인 빈 배열이된다.

요소 생략 시 희소 배열 생성

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

Array 생성자 함수

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

전달된 인수가 1개이고 length 프로퍼티 값이 인수인 배열 => 희소 배열, 배열의 요소는 존재하지 않는다.

전달된 인수가 범위(length 프로퍼티 범위: 0 ~ 2**32 - 1)를 벗어나면 RangeError 발생

전달된 인수가 없는 경우 빈 배열 생성 = 배열 리터럴[]

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

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

Array 생성자 함수는 new 연산자와 함께 호출하지 않더라고 배열을 생성하는 생성자 함수로 동작

Array 생성자 함수 내부에서 new.target을 확인하기 때문

 

Array.of

전달된 인수를 요소로 갖는 배열을 생성

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

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

 

Array.from

유사배열 객체(array-like object) 또는 이터러블 객체(iterable object)를 인수로 전달받아 배열로 변환해 반환

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

두 번째 인수로 전달한 콜백 함수에 첫 번째 인수에 의해 생성된 배열의 요소값과 인덱스를 순차적으로 전달하면서 호출, 콜백 함수의 반환값으로 구성된 배열을 반환

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

• 유사 배열 객체
  배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체
  배열처럼 for문으로 순회 가능
• 이터러블 객체
  Symbol.iterator 메서드를 수현하여 for of 문으로 순회할 수 있다.
  스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있는 객체

 

본 게시글은 모던자바스크립트 Deep Dive - 자바스크립트의 기본 개념 책을 읽고 정리했습니다.
더 자세한 내용은 책을 구매해보시길 권장드립니다!