[JavaScript Core] 객체의 원시형(Primitive Type) 변환에 대해 알아보자

이번에는, 객체의 원시형(Primitive Type) 변환에 대해 알아보도록 하겠습니다.

원시형 변환에 대해 감이 확 오지 않을수도 있는데, 자바스크립트에서 서로 다른 타입간의 덧셈/뺄셈이나 값의 비교, 값의 출력 등 에서 우리도 모르게 자동적으로 일어나는게 객체의 원시형 변환입니다.

따라서 원시형 변환이 어떻게 일어나고, 어떻게 제어할 수 있는지 지금부터 알아보도록 합시다.

1. 변환 종류

객체의 원시형 변환은 크게 3가지로 분류됩니다. 바로, string, number, default 로 말이죠.

이 세가지를 통틀어서 hint 라고 합니다. hint는 간단하게 말해서 목표로 하는 자료형 이라고 생각하시면 됩니다.

alert(obj);
obj2[obj] = 1;

먼저, string 은 alert 로 객체를 출력하거나, 다른 객체의 키(key) 로 지정하는 등 문자열을 기대하는 연산을 수행할 때의 hint 입니다.

+obj;
obj - 1;
obj > 1;

다음으로, number 는 단항 덧셈이나 뻴셈, 비교 같은 숫자를 기대하는 연산을 수행할 때의 hint 입니다.

obj + 1;
obj == 1;

마지막으로, default 는 앞서 두 hint 외에 자료형이 확실하지 않은 연산을 수행할 때의 hint 입니다.

근데, 왜 default 의 예시로 덧셈 연산과 동일 비교 연산이 있을까요?

자바스크립트에서는 숫자와 숫자 덧셈 외에도 문자와 숫자, 문자와 문자의 덧셈도 가능합니다. 동일 비교 연산도 == 인 경우에는 "1" == 1 이 true 인 결과를 갖죠.

따라서, 한 자료형으로 정해지지 않기 때문에 default 가 됩니다.

2. 원시형 변환 메소드

이렇게 3가지의 hint 에 대해서 알아보았는데, 이들을 어떻게 다루는지에 대해서 알아보겠습니다.

let obj = {
    [Symbol.toPrimitive](hint) {
        if(hint == "string") {
            return "moonsung";
        
        } else {
            return 17;
            
        }
    }
}

alert(obj); // moonsung
console.log(+obj); // 17
console.log(obj + 1); // 18

        

먼저, 객체의 숨겨진 내장 메소드인 Symbol.toPrimitive 메소드를 통해 hint 를 다룰 수 있습니다.

객체의 변환이 일어나야 하는 연산들에서 Symbol.toPrimitive 메소드가 hint 정보와 함께 실행되기 때문에, 우리는 Symbol.toPrimitive 메소드를 재정의해서 변환을 핸들링 할 수 있습니다.

let obj = {
    toString() {
        return "moonsung";
    }
    valueOf() {
        return 17;
    }
}

alert(obj); // moonsung
console.log(+obj); // 17
console.log(obj + 1); // 18

다음으로는 toString 과 valueOf 메소드 입니다.

일단, 앞서 소개했던 Symbol.toPrimitive 메소드가 선언되어 있지 않으면, toString 과 valueOf 메소드가 변환 시에 실행되게 됩니다.

만약, hint 가 string 이라면 toString -> valueOf 순으로 메소드가 실행되고, 그 외 나머지 hint 이면 valueOf -> toString 순으로 실행됩니다.



이렇게 객체의 원시형 변환에 대해 간단하게 알아보았는데, 다른 내용에 비해 상대적으로 복잡하게 느껴질 수 있습니다.

따라서, 이해가 완벽하게 되지 않는다면 계속 복습해보시길 바라고, 다음 글들도 많은 관심 부탁드립니다!