[자바스크립트] new String("")과 ""(String literal)과 String("")에 대하여

: 자바스크립트에서 string을 표기하는 방법이 여러가지가 있는데, 크게 2가지로 뽑을 수 있을 것이다.

var objStr = new String("unikys");    // #1
var toStr = String("unikys");  // #2
var prmStr = "unikys";    // #3: String literal

: 여기서 일반적으로 쓰이는 것은 #1번과 #3번(String literal)이고, 아마도 대부분은 #1번처럼 사용한 적도 별로 없겠지만, #1번과 약간 비슷해보이는 #2번의 표기방법도 있기는 있다. 비슷해보이는 표기법들이 C에서는 상당히 다르게 느껴지기는 하지만, 자바스크립트에서는 위의 #3번의 경우 아래와 같이 String의 함수들도 사용할 수 있다는 것이 신기하기도 하고 재미있다.

new String("unikys").toUpperCase(); // === "UNIKYS"
String("unikys").toUpperCase(); //=== "UNIKYS"
"unikys".toUpperCase(); //=== "UNIKYS"

: 이렇게 똑같은 함수를 사용할 수 있다보니 왠지 3개가 다 같은듯 보이지만 조금 깊게 들어가보면 3개는 조금씩 다르게 작동하는 것을 알 수 있을 것이다. 일단 결론부터 이야기한다면 #1, #2, #3의 경우 1번은 String 객체를 생성한 것이고, #2, #3번은 primitive 형식의 string을 생성한 것이다. 특이한 것은 자바스크립트 내부에서 String의 모든 함수들을 string에서 사용할 수 있도록 지원해주는데, 객체와 primitive의 다른점이라고 한다면 typeof와 instanceof를 실행해보면 조금 알 수 있다.

/* #1 */
typeof new String("unikys") === "object";
new String("unikys") instanceof String === true;
/* #2 */
typeof String("unikys") === "string";
String("unikys") instanceof String === false;
/* #3 */
typeof "unikys" === "string";
"unikys" instanceof String === false;

: typeof의 결과를 보면 #1만 object이고 나머지는 기본형인 string으로 나온 다는 것을 확인할 수 있다. 따라서 new String("unikys")와 "unikys"는 서로 다르다는 것을 알 수 있고, #2에서 String("unikys") 또한 다르다는 것을 알 수 있는데, #2에 대한 부가 설명 하자면, String("unikys");를 하게 되면 인자로 넘어온 객체의 toString() 함수를 호출하는 것과 똑같은 효과를 나타내는데, toString() 함수에서는 primitive 형식으로 리턴하기 때문에 "unikys" 이렇게 나오게 된다. 그리고 만약 String(new String("unikys")) 를 해봐도 primitive로 나오는 것을 확인할 수 있다. 그렇기 때문에 strict한 비교 연산자 ===를 사용하게 되면 2개는 다르게 나타나지만, 형변환 비교 연산자 == 를 사용하게 되면 2개는 똑같이 나타나게 된다.

(new String("unikys") == "unikys") === true;
(new String("unikys") === "unikys") === false;

: 따라서 new String을 이용하는 경우는 ===이 아니라 ==를 사용해야하는 경우가 많아질 것이다.또 다른 점은 new String으로 생성한 객체에는 새로운 속성을 추가할 수 있지만, primitive에는 추가를 할 수 없다. 아래가 간단한 예인데,

var str = new String("unikys");  // #1
str.newProperty = "newProperty";
alert(str.newProperty === "newProperty");

var str = "unikys";  // #3
str.newProperty = "newProperty";
alert(str.newProperty === undefined);

: 이렇게 추가적인 속성 또한 설정할 수 없는 것이 다르다. '다르다'라고는 하지만 사용할 수 있는 기능은 같다는 것이 자바스크립트의 묘한 매력이 아닌가 생각한다. 하지만 여기서만 멈추면 자바와는 크게 다를바 없는듯 느껴지겠지만, prototype으로 넘어간다면 좀더 색다른 맛을 볼 수 있다. 자바스크립트에서는 String.prototype에 추가한 함수를 String literal에서도 똑같이 이용할 수 있다는 점이다. 가장 유명한 trim 함수를 추가해보자.

String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g, '');
}

: 이렇게 trim 함수를 선언하고 나면 #3번 형식의 String literal에서도 마음껏 사용할 수 있다.

"      unikys         ".trim() === "unikys";

: 이렇듯 자바스크립트의 확장성은 매우 놀랍다!

끝.