new Array() vs []

자바스크립트에서 배열을 선언하는 방식은 2가지가 있습니다.

Array 객체를 이용한 선언	객체 리터럴을 이용한 선언
let arr = new Array();	let arr = [];

 

두 방식의 차이점에 대해 이야기해보도록 하겠습니다.

 

왜 new Array() 보다 []의 선호도가 높을까?

new Array()는 직관적이지 않습니다.

 

- Array 객체의 constructor에 전달하는 숫자가 1개인 경우와 2개 이상인 경우

A.

//run Chrome

let arr1 = new Array(5);

console.log(arr1);
// [empty × 5]

arr1.length
// 5

arr1[0];
// undefined

 

B.

//run Chrome

let arr2 = new Array(1, 2, 3, 4, 5);

console.log(arr2);
// [1, 2, 3, 4, 5]

arr2.length
// 5

arr2[0];
// 1

 

A와 같이 new Array의 constructor에 하나의 숫자만 넣으면 배열의 크기로 인식하지만, 두 개 이상의 숫자를 전달하면 전달받은 값으로 배열을 초기화합니다. A의 사유로 하나의 숫자만 넣은 배열을 만들 수가 없습니다.

 

- A에서 만들어진 배열을 스트링으로 변환

//run Chrome

arr1.toString();
// ',,,,'

 

위 실험을 통해 arr1의 크기는 5라는 것을 알 수 있습니다. (원소 사이에 ,가 생깁니다.)

 

- []를 이용하면 A 문제점이 사라짐

//run Chrome

let arr3 = [5];

arr3.toString();
// '5'

arr3[0];
// 5

arr3.length;
// 1

 

 

+ 간결하다는 장점으로 []의 사용을 권장한다고 합니다. 여기에서 더 많은 내용을 확인하실 수 있습니다.

속도 비교

테스트 코드

console.time('using[]')
for(var i=0; i<200000; i++){var arr = []};
console.timeEnd('using[]')

console.time('using new')
for(var i=0; i<200000; i++){var arr = new Array};
console.timeEnd('using new')

 

크롬에서는 []를 실행하는 것의 속도가 더 빨랐습니다.  상황에 따라 new Array()의 속도가 더 빠르게 나올 때도 있었지만 전반적으로 []의 실행속도가 빨랐습니다.

테스트 대상 브라우저 : Chrome, IE, Edge

Edge의 경우 실행시간의 차이가 세 브라우저 중 가장 컸습니다. (using[]: 392.3ms, using new: 948.4ms)

 

new Array에 크기를 지정한다면 []보다 더 빠르게 실행될 수도 있습니다. 테스트 내용, 원문에 대해서는 여기를 확인해주세요.

 

기타

[] 를 사용하여 초기화할 때 주의점

마지막 요소의 끝에 , 를 넣는 것은 지양해야 합니다. 브라우저마다 다르게 해석할 수 있습니다.

var cars = [
  "Saab",
  "Volvo",
  "BMW", // 여기 붙은 ,
];

 

원본 글은 여기에서 확인할 수 있습니다.