[내보내번] JavaScript - The Secret Life of JavaScript Primitives

GitHub에 있는 33 Concepts Every JavaScript Developer Should Know 라는 리포지토리의 내용 중 공부하고 싶은 아티클을 내가 정리할 겸 기억할 겸 작성하는 번역글이다. 33가지 중 두 번째인 기본형과 관련된 내용이다.

※ 내보내번(내가 보려고 내가 번역한): 영어 전공자도 해외 유학파도 아니기에 번역에는 의역, 오역, 구글 번역이 무수히 많을 수 있으며, 오타도 많을 수 있다. 정확한 내용은 원문을 직접 살펴보거나 다른 정보들을 더 찾아보는 것을 추천한다.
(하지만 댓글 피드백도 환영합니다😃 )

이번에 고른 아티클은 Angus Croll 님이 작성하신 The Secret Life of JavaScript Primitives 이다. 아티클 내용을 훑어봤을 때 제대로 번역할 수 있을지 고민이 되긴했지만.... 내용이 좋아서 해보기로 했다. 내용 중간 중간 🤔이 아이콘은 본문에 나와 있지 않은 번역하며 추가한 말이다.

The Secret Life of JavaScript Primitives

---

이미 알 수도 있지만, 자바스크립트에서 string, number 혹은 boolean 기본형으로 상호작용할 때에 당신은 객체의 그림자와 강제 형 변환(coerce)의 숨겨진 세계로 들어간다. 그러니 방치해뒀던 당신의 셜록 홈즈 복장을 꺼내어 계속 읽어보라. (🤔: 탐정같은 마음으로 숨겨진 세계를 알아보자는 의미인듯...)

기본

객체(Objects)는 속성의 집합이다. 속성은 객체를 참조할 수도, 기본형일 수도 있다. 기본형은 값이고 속성을 가지고 있지 않다. 

자바스크립트에는 5가지의 기본형이 있다: undefined, null, boolean, string 그리고 number이다. 그 밖의 모든 것들은 객체이다. Boolean, string과 number 기본형들은 그들의 객체 대응부로 감싸질 수 있다 (🤔: 아래의 예시 코드 참조). 이 객체들은 각각 Boolean, String, Number 생성자의 인스턴스이다. 

typeof true; //"boolean"
typeof Boolean(true); //"boolean"
typeof new Boolean(true); //"object"
typeof (new Boolean(true)).valueOf(); //"boolean"
 
typeof "abc"; //"string"
typeof String("abc"); //"string"
typeof new String("abc"); //"object"
typeof (new String("abc")).valueOf(); //"string"
 
typeof 123; //"number"
typeof Number(123); //"number"
typeof new Number(123); //"object"
typeof (new Number(123)).valueOf(); //"number"

만일 기본형은 속성이 없다면, 왜 "abc".length은 값을 반환하는가?

그 이유는 자바스크립트는 기본형과 객체 사이에서 쉽게 강제 형 변환하기 때문이다. 이 경우에 문자열 값은 길이 속성에 접근하기 위해서 문자열 객체로 강제 형 변환한다. 이 문자열 객체는 순식간에 사용이 되고 그 후 가비지 컬렉션의 신에 의해서 희생된다 - 하지만 TV 디스커버리 쇼 정신(🤔: 디스커버리 채널에 나오는 쇼들을 말하는 것 같음)으로, 정체불명의 생명체를 잡아서 추가적으로 분석하기 위해 보존할 것이다...

String.prototype.returnMe= function() {
    return this;
}
 
var a = "abc";
var b = a.returnMe();  
 
a; //"abc" 
typeof a; //"string" (still a primitive)
b; //"abc"
typeof b; //"object"

...그리고 많은 의미있는 과학적 조사들로 우리는 이제 사물의 자연적인 진행을 방해하고 b가 주변에 있는 한 객체가 가비지 컬렉트되는 것을 막았다. 하이젠베르크는 살아있고 건강하다😉(🤔: 하이젠베르크는 양자역학의 창시자라고 한다.)

(strict mode에서는 정체불명의 생명체가 사라진다 - thanks @DmitrySoshnikov) (🤔: 댓글에 언급된 내용을 업데이트 해주신 듯)

여기 더 환경적인 가비지 컬렉션 방해 없이 객체 타입을 증명하는 보다 환경적으로 책임을 지는 예시가 있다:

Number.prototype.toString = function() {
    return typeof this;
}
 
(123).toString(); //"object"

이를 통해 기본형은 각각의 객체 생성자에 의해 정의된 모든 속성 (메소드를 포함) 에 접근할 수 있다. 

이 객체들은 값으로도 강제 형 변환될 수 있는가?

그렇다. 거의. 이 형태의 객체들은 단순히 싸는 것이다. 객체들의 값은 감싸고 있는 기본형이고 일반적으로 필요에 따라 이 값으로 강제 형 변환될 것이다. 자세한 내용은 이 기사를 참조하라. 

//object coerced to primitive 
var Twelve = new Number(12); 
var fifteen = Twelve + 3; 
fifteen; //15
typeof fifteen; //"number" (primitive)
typeof Twelve; //"object"; (still object)
 
//another object coerced to primitive
new String("hippo") + "potamus"; //"hippopotamus" 
 
//object not coerced (because 'typeof' operator can work with objects)
typeof new String("hippo") + "potamus"; //"objectpotamus"

슬프게도 boolean 객체는 쉽게 강제 형 변환되지 않는다. 그리고 상처에 모욕을 더해 boolean 객체는 값이 null이나 undefined가 아니고서는 true로 표현된다. 아래 내용을 시도해보라: 

if (new Boolean(false)) {
    alert("true???"); 
}

 

일반적으로 boolean 객체에 그들의 값을 명시적으로 요청해야한다. 아래의 내용이 값이 "거짓"의 "진실"인지 여부를 결정짓는데 유용할 수도 있다. 

var a = "";
new Boolean(a).valueOf(); //false

...하지만 실제로 이렇게 하는게 더 쉽다.

var a = Boolean("");
a; //false

... 혹은 이렇게도

var a = "";
!!a; //false

 

강제 형 변환를 사용하면 기본형에 값을 할당하는 것을 허용하는가?

아니다. 

var primitive = "september";
primitive.vowels = 3;
 
primitive.vowels; //undefined;

만일 자바스크립트가 기본값에 속성을 할당하려는 시도를 감지하면, 자바스크립트는 실제로 기본값을 객체로 강제 형 변환한다. 하지만, 이전 예제에서처럼, 이 새로운 객체는 참조된 것이 없기 대문에 즉시 가비지 컬렉션의 먹이가 된다. 

여기 실제로 무엇이 일어나는지를 설명하기 위해서 같은 예제를 의사 코드로 표현해 놓았다.

var primitive = "september";
primitive.vowels = 3;
//new object created to set property 
(new String("september")).vowels = 3;
 
primitive.vowels;
//another new object created to retrieve property 
(new String("september")).vowels; //undefined

보다시피 쓸모없을 뿐만 아니라 꽤 낭비이다. 

정리

속성을 할당하는 능력은 기본형에 비해 객체만의 유일한 장점이지만 실제로는 이것마저 의심스럽다. String, boolean 그리고 number는 구체적이고 잘 정의된 목적을 가지고 있고 그것들을 주 보유자로 재정의하는 것은 사람들을 혼란스럽게 할 것이다. 게다가 기본형은 불변이기 때문에 객체로 감싸서 속성을 수정할 수 없다. 

var me = new String("Angus");
me.length = 2; //(error in strict mode)
me.length; //5 (not 2 - thanks @joseanpg)
me.valueOf(); "Angus"

 

그럼에도 불구하고 나는 기본형과 기본형과 상호작용시 내부에서는 무슨 일이 벌어지는지 일에 대해 잘 이해하는 것이 언어의 더 깊은 지식을 향한 중요한 단계라고 생각한다. 이 내용이 도움이 되었길 바란다.