객체선언에 Literal ({}) 표현을 선호하는 이유
new Object vs {}

자바스크립트 개발을 하다가 일정 수준 이상이 되면, 코드 가독성 및 더 좋은 패턴에 대해 연구하게 되고, 널리 쓰이는 패턴을 사용하곤 한다.

물론 책으로도 대부분 접할 수가 있으며 JSHINT나, JSLINT와 같은 정적 검사 도구로 체크하여 잘못된 패턴을 지양하고, 좋은 패턴을 사용한다.

그 중 자바스크립트에서 가장 중요한 패턴이라고 알려진 Literal 표기법에 대해서 알아보자.
이 글에서는 우선 객체 선언만 다룰 예정이다.
우선 자바스크립트의 DATA Type은 총 7개가 있으며 아래와 같다.

Boolean
Null
Undefined
Number
String
Symbol (ES6에서 추가)
Object

위 리스트에서 6번까지는 primitive type이며 Object는 primitive가 아니다.
여기서 각 type별로 선언하는 여러가지 방법이 있지만 Object는 다음과 같이 주로 선언한다.

            
                var obj1 = {};
                var obj2 = new Object();

위 코드에서 obj1과 obj2 객체는 동일한 역할을 하게 된다.
즉 아무것도 없는 빈 객체를 생성해서, 향후 프로퍼티 또는 메소드를 추가할 수 있는 객체가 된다.

하지만 위 코드에서 좋은 패턴은 어떤 패턴일까?

주로 대부분의 글이며, 책, 자료에서는 아래와 같은 방식을 좋은 패턴이라고 말한다.

            
                var obj1 = {}; // good pattern

위 코드를 바로 literal 표기법이라고 한다.
간단하게 객체를 선언할 수 있으며 아래와 같은 코드에서는 가독성 또한 좋아진다.

            
                //객체 생성과 할당
                var obj1 = {
                    a: 1,
                    b: 2
                };

                //객체 생성한 후 할당
                var obj2 = new Object();
                obj2.a = 1;
                obj2.b = 2;

그렇다면 단순히 가독성을 위해서 {} 를 new Object에 비해 권장하는 것일까?
이제 본론으로 들어가자.
이번 내용을 공부하면서, 갖고 있던 근원적인 물음은 다음과 같다.

1. {}과 new Object()는 동일한 객체를 생성할까?

우선 Literal 기법과 new 기법으로 생성된 객체는 동일한 객체이다.
(의미적으로 동일하다는 말이다. 참고로 String은 다르다.)
[참고]

                    
                        var str1 = "";
                        var str2 = new String();
                        console.log( typeof str1 ); // "string"
                        console.log( typeof str2 ); // "object"

위 코드에서 str1과 str2는 다르다.
str1은 type이 string이지만 str2는 object이다.
여튼 1번의 물음이 해결되고 나서 다시 궁금한 점이 생겼다.

2. 그렇다면 {}를 권장하는 이유는 무엇인가? (단순히 가독성 때문에?)

사실 2번에 대한 이유는 몇 가지 알고 있었다. (대체적으로 가독성, 속도 정도 였고, 자바스크립트 내장함수가 override 되는 버그(?))

하지만 뭔가 다른 이유가 있을 것이라 생각하며 문제를 하나씩 찾아보았다.

첫번째로 가독성이다.

Literal 기법이 대체적으로 더 짧고 직관적이며 객체를 생성하기도 더욱 용이하다.
위에서 살펴보았듯이 생성과 할당에 더 적합하다.
또한 가장 기본적인 데이터를 선언하는 데 있어서 new 표현을 덜 쓰면서, 가독성도 더 좋아진다.

두번째는 속도다.

이미 여러가지 실험을 통해 Literal 기법이 속도가 더 빠르다는 것이 증명되었다. (약 12.14% 빠르다고한다.)

https://jsperf.com/new-array-vs-literal/26

하지만 사실상 미미하며, 정말 복잡도가 높은 어플리케이션을 개발할 경우만 필요할 수도 있다고 생각한다.
이전 브라우저에서는 많이 차이가 있었지만, 최근에는 그 격차가 많이 좁혀진게 아닐까 생각한다.
그런데 속도가 왜 빨라지는거지...?

마지막으로 overriden에 따른 예방이다.

우선 자바스크립트는 기본 함수 조차도 overriden이 된다.
overriden이란 재정의란 의미로 Object도 어떻게 보면 자바스크립트에서 함수이기도 하다.
하지만 이 함수를 재정의 할 수 있다.
다음 예제를 보자.

                            
                                Object = function(){
                                   alert("재정의");
                                };
                                var obj1 = new Object(); //alert 발생

즉 Object란 내장함수 조차도 재정의 되어서 전혀 예상치 못한 결과를 초래할 수 있다.

이렇게 literal 기법으로 선언하는 것이 더욱 효과적이며 해당 근거는 위에 3가지 정도로 요약할 수 있다.

객체선언에 Literal ({}) 표현을 선호하는 이유 new Object vs {}

객체선언에 Literal ({}) 표현을 선호하는 이유
new Object vs {}