JS 배열 생성하는 방법 (리터럴, 생성자 함수)

이번 포스트에서는 JS에서 배열을 생성하는 방법에 대해 복습하는 시간을 가져보자.

배열의 정의가 궁금하다면 해당 문서를 읽고 오길 바란다.

 

---

배열 생성 

자바스크립트에서 배열을 선언하는 방법은 크게 두 가지로 나뉜다. 

배열 리터럴 [ ]인 대괄호를 사용해 선언하는 방법과 배열 생성자 함수를 통해 선언하는 방법이다.

 

배열 리터럴 []

 

필자는 두 방식 모두 사용하긴 하지만 배열 리터럴을 사용해 선언하는 편이 더 직관적이라 일반적인 경우에는 이 방식을 사용하고 있다.

빈 배열 또는 숫자 1, 2, 3, 4를 요소로 가지는 배열을 만들기 위해서는 아래와 같은 방식으로 선언해주면 된다.

 

const array = []; // 빈 배열 (length가 0인 배열)
const number = [1, 2, 3, 4]; // 요소 1,2,3,4 를 가진 배열 (length가 4인 배열)

 

Array 생성자 함수

 

위와 똑같은 결과물을 Array 생성자 함수를 통해서도 만들 수 있다.

다른 생성자 함수와 마찬가지로 new 키워드와 함께(생략가능) 새로운 배열을 아래와 같이 생성할 수 있다.

 

const array = new Array(); // 빈 배열
const number = new Array(1,2,3,4); // 요소 1,2,3,4 를 가진 배열 (length가 4인 배열)

 

Array 생성자의 인자로는 위에 보이는것처럼 배열의 요소를 차례대로 넘겨줄 수 있고

인자를 0 에서 2^32 - 1 사이 정수로 하나만 넘겨줄 수도 있는데 후자의 경우 해당 크기를 가진 배열이 선언된다. 

 

예를 들어 3을 인자로 넘겨주게 되면 아래와 같이 요소의 값이 미정인 크기 3의 배열이 생성된다.

 

console.log(new Array(3)) // [undefined, undefined, undefined]

 

여기서 주의할점은 콘솔에는 각 요소가 undefined로 나오지만 배열 리터럴을 사용해서 선언한

[undefined, undefined, undefined] 와는 다르게 동작한다 (브라우저마다 콘솔에  찍히는 값의 차이가 있을 수 있음).

 

각 요소를 순회하면서 새로운 배열을 반환하는 map함수를 예시로 들어보자.

 

const constructorArray = new Array(3).map(e => 'element') // [undefined, undefined, undefined]
const literalArray = [undefined, undefined, undefined].map(e => 'element')  // ['element', 'element', 'element']

 

같은 undefined로 채워진 배열임에도 불구하고 생성자 함수로 생성된 배열은 'element'라는 값을 매핑하지 못했다. 

이 이유는 new Array(length)는 단지 length 크기의 배열을 생성하는 의도로만 사용되도록 설계되었기 때문이다.

따라서 배열의 요소를 순회하는 함수들 (map, forEach, filter 등) 에서 요소는 없는 값으로 인식되기 때문에 제대로 작동하지 않는다.

 

일부 브라우저 (파이어 폭스)에서 콘솔을 찍으면 undefined가 아니고 아래와 같이 empty slots 라고 좀 더 명확하게 표기해준다.

 

[ <3 empty slots> ]

 

요소가 하나인 배열을 만들 상황이 많진 않겠지만 만약 3을 요소로 갖는 배열을 만들 의도 였다면 처음 설명했던 방법인 배열 리터럴을 사용하던가 Array.of 메서드를 사용하면 된다.

 

console.log([3]) // [3]
console.log(new Array.of(3)) // [3]

 

 

 

 

참고 자료 :

 

What’s the difference between "Array()" and "[]" while declaring a JavaScript array?

---

 

생성자 함수를 이용해 배열을 생성하는 방법이 상대적으로 복잡하다고 해서 두 방식의 성능에 차이가 있는건 아니다.

배열 리터럴 (중괄호)를 이용한 방법도 내부적으로는 생성자 함수를 사용해 배열을 생성하는것이기 때문에 기능상 차이는 없다.