오브젝트 리터럴 ('{}') 이 new Object() 보다 빠른 이유

오브젝트 생성, {} 와 new Object() 의 퍼포먼스 차이

console.time("new Object");
for (var i = 0; i < 200000; i++) {
  var arr = new Object();
}
console.timeEnd("new Object");

console.time("object literal");
for (var i = 0; i < 200000; i++) {
  var arr = {};
}
console.timeEnd("object literal");

두 오브젝트 생성의 퍼포먼스를 콘솔로 찍어보면, 오브젝트 리터럴({}) 형태가 더 성능이 좋게 나온다. 그 이유는 constructor 함수 호출에 있다.

new 키워드는 얼핏 보면, 단순히 객체를 생성하는 것 같지만 실제로는 내부에 있는 constructor 함수를 호출함으로써, 객체를 생성하고 있다.

자바스크립트에서 함수가 호출되면 this 값 초기화, arguments 초기화, 실행 컨텍스트의 스코프 체인 계산 등 많은 부가작업을 한다.

반면 오브젝트 리터럴({}) 은 constructor 함수 호출이라는 오버헤드 없이 한번에 객체를 생성하기 때문에 new Object() 보다 상대적으로 오버헤드가 적다.

다만, 이러한 차이는 실제 앱을 만들 때 커다란 성능 차이가 되진 않는다. 성능차이가 안나더라도 더욱 간결하고 명확한 오브젝트 리터럴이 훨씬 낫다고 생각한다.

오브젝트 리터럴 ({}) 을 선호할만한 이유

• 성능이 더 좋다.
• .js 파일 사이즈가 작아진다.
• 멍청이가 Object 를 스코프 내에서 오버라이드 하는 경우에도 피해를 입지 않는다.