[JS][네이티브] 래퍼 박싱하기

래퍼 박싱하기

객체 래퍼는 아주 중요한 용도로 쓰인다. 원시 값엔 프로퍼티나 메서드가 없으므로, .length, .toString()으로 접근하려면 원시 값을 객체 래퍼로 감싸주어야 한다. 고맙게도 자바스크립트는 원시 값을 알아서 박싱(래핑)하므로 다음과 같은 코드가 가능하다.

 

var a = "abc";

a.length; // 3
a.toUpperCase(); // ABC

 

따라서 루프 조건 i < a.length처럼 빈번하게 문자열 값의 프로퍼티/메서드를 사용해야 한다면 자바스크립트 엔진이 암시적으로 객체를 생성할 필요가 없도록 처음부터 값을 객체로 갖고 있는 이치에 맞는 것처럼 보인다.

 

하지만 좋은 생각이 아니다. 오래전부터 브라우저는 이런 흔한 경우를 스스로 최적화 하기 때문이다. 즉, 개발자가 직접 객체 형태로 '선 최적화'하면 프로그램이 더 느려질 수 있다.

 

직접 객체 형태로 써야할 이유는 거의 없다. 필요시 엔진이 알아서 암시적으로 박싱하게 하는 것이 낫다. 즉, new String("abc"), new Number(42)처럼 코딩하지 말고, 그냥 알기 쉽게 원시 값 "abc", 42를 사용하자.

 

객체 래퍼의 함정

그래도 객체 래퍼를 사용해야 한다면 정말 조심해야 할 함정이 있다. 예를들어 Boolean으로 래핑한 값이 있다.

var a = new Boolean(false);

if (!a) {
  console.log("Oops"); // 실행되지 않는다.
}

 

false를 객체 레퍼로 감쌋지만 문제는 객체가 'truthy'한 값이라는 점이다. 그래서 예상과는 달리, 안에 들어있는 false 값과 반대의 결과다.

 

수동으로 원시 값을 박싱하려면 Object()함수를 이용하자.

 

var a = "abc";
var b = new String(a);
var c = Object(a);

typeof a; // string
typeof b; // object
typeof c; // object

b instanceof String; // true
c instanceof String; // true

Object.prototype.toString.call(b); /// [object String]
Object.prototype.toString.call(c); /// [object String]

 

객체 래퍼로 직접 박싱하는 건 권하지 않는다고 한다. 물론, 드물긴 하지만 그렇게 해야 할 경우가 전혀 없진 않다.

 

---

참고

- You Don't Know JS ( 한빛미디어)