이유 : 배열을 리터럴 방식으로 생성할 경우 자바스크립트 컴파일러 시점에서 [] 문자를 읽자마자 이미 배열을 생성하겠다는 것이 명확함 반대로 new Array 의 경우 더 많은 단어로 이루어져 있으며 new 문자열을 읽고 이후 Array 문자열을 읽은 후 배열을 생성하겠다는 것이 명확해짐
또한 각 선언방식을 해석하면 아래와 같이 분석할 수 있는데
[]: ARRAY_INIT
[1]: ARRAY_INIT (NUMBER)
[1, foo]: ARRAY_INIT (NUMBER, IDENTIFIER)
new Array: NEW, IDENTIFIER
new Array(): NEW, IDENTIFIER, CALL
new Array(5): NEW, IDENTIFIER, CALL (NUMBER)
new Array(5,4): NEW, IDENTIFIER, CALL (NUMBER, NUMBER)
new Array(5, foo): NEW, IDENTIFIER, CALL (NUMBER, IDENTIFIER)
Array 라는 문자열은 IDENTIFIER 즉 식별자로써 분석이 됨. 자바스크립트 컴파일러 입장에서는 Array 라는 문자열이 배열을 생성하는 식별자 라는 것을 알기 위해서 식별자 목록을 조회하게 됨
추가 테스트
위쪽에서는 var 형태로 배열을 생성하였고 리터럴 형태로 사용했을 때 배열의 생성속도가 더 빠른것을 확인하였음 추가로 let, const 형태로 배열을 선언하는 테스트를 해보았다.
console.time('using var []')
for(var i=0; i<2000000; i++){var arr = []};
console.timeEnd('using var []')
console.time('using var new')
for(var i=0; i<2000000; i++){var arr = new Array()}
console.timeEnd('using var new')
console.time('using let []')
for(var i=0; i<2000000; i++){let arr1 = []};
console.timeEnd('using let []')
console.time('using let new')
for(var i=0; i<2000000; i++){let arr2 = new Array()}
console.timeEnd('using let new')
console.time('using const []')
for(var i=0; i<2000000; i++){const arr1 = []};
console.timeEnd('using const []')
console.time('using const new')
for(var i=0; i<2000000; i++){const arr2 = new Array()}
console.timeEnd('using const new')
결과
크롬, Node.js, 파이어폭스, 엣지브라우저에서 테스트를 진행한 결과
엔진별로 차이가 있지만 현재 가장 많이 사용되는 자바스크립트 엔진인 V8 엔진에서는 let, const로 배열을 생성 시 리터럴 방식과 객체방식간의 큰 성능 차이는 없는 것으로 보임
그러나 파이어폭스와 엣지 브라우저에서는 확연한 성능차이가 확인되었으며 사용자의 브라우저 환경을 특정할 수 없고 더 간편하고 안전한 배열 생성방식인 리터럴 방식으로 배열을 생성하는 것이 좋음 또한 배열은 가능하다면 const로 생성하는것이 좋다.
