JS에서의 Boxing 처리

JS에서의 Boxing

 

Javascript에서 다음과 같은 메소드를 사용한 경험이 있을 것이다.

// 대문자로 변경하는 경우
const test_1 = "hello world!";
test_1.toUpperCase();

// 소수점 표현하는 경우
const test_2 = 1.0001;
test_2.toFixed(1);

"hello world!" 와 1.0001 는 원시타입이다.

즉, 객체가 아니기에 가지고 있는 메서드가 없는 것이다.

하지만 메서드를 사용할 수 있는 이유가

자바스크립트 엔진에서 Boxing 과정이 이루어지기 때문이다.

Boxing

원시타입을 래퍼 객체로 wrapping하는 과정을 말한다.

test_1 변수를 기준으로 설명하고자 한다.

우선 test_1.toUpperCase() 를 실행하게 되면 

javascript에서 test_1의 원시 타입의 Reference타입인 String 객체로 암묵적으로 변환 시킨다.

그리고 String의 프로토타입 체이닝을 통해  toUpperCase() 메소드를 찾아 실행하게 된다.

test_2 변수도 같은 과정이 일어나서 toFixed(1) 을 실행할 수 있게 된다.

주로 명시적으로 하기보다 암묵적이다.

Unboxing

반대로 Reference타입의 객체의 원시 값을 얻는 과정을 말한다.

valueOf() 메소드를 이용해서 unboxing을 할 수 있다.

const a = new Boolean(false);
const a2 = false;

if(a === a2) {
  console.log('Success');
} else {
  console.log('Fail');
}
// Fail 이 출력됨.


console.log(typeof a); // object
console.log(typeof a2); // boolean

위 과정에서 === 를 사용하여 비교하게 되면 둘은 다르게 나온다.

둘의 타입이 다르기 때문이다.

하지만 valueOf() 를 통해 unboxing을 한다면

unboxing된 값은 원시 타입이기 때문에, Success 를 출력하게 된다.

 

const a = new Boolean(false);
const a2 = false;

if(a.valueOf() === a2) {
  console.log('Success');
} else {
  console.log('Fail');
}
// Success 출력



// == 연산에서는 타입 비교가 아닌 값의 비교이기 때문에  true 가 출력되는거다.
console.log(a === a2); // Fail
console.log(a == a2); // Success