객체의 형 변환은 어떻게 이루어지는가? 객체간의 연산은 어떻게 이루어지는가?
이 모든 경우에 자동 형 변환이 일어난다. 객체는 원시값으로 변환되고, 그 후 의도한 연산이 수행된다.
-
객체는 논리 평가 시 true를 반환한다. 단 하나의 예외도 없다. 따라서 객체는 숫자형이나 문자형으로만 형 변환이 일어난다고 생각하면 된다.
-
숫자형으로의 형 변환은 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 일어난다. 객체 Date끼리 차감하면(date1 - date2) 두 날짜의 시간 차이가 반환된다.
-
문자형으로의 형 변환은 대개 alert(obj)같이 객체를 출력하려고 할 때 일어난다.
ToPrimitive
특수 객체 메서드를 사용하면 숫자형이나 문자형으로의 형 변환을 원하는 대로 조절할 수 있다.
객체 형 변환은 세 종류로 구분되는데, 'hint’라 불리는 값이 구분 기준이 된다.
'hint’가 무엇인지는 명세서에 자세히 설명되어 있다.
- string
alert 함수같이 문자열을 기대하는 연산을 수행할 때는(객체-문자형 변환), hint가 string이 된다.
// 객체를 출력하려고 함
alert(obj);
// 객체를 프로퍼티 키로 사용하고 있음
anotherObj[obj] = 123;- number
수학 연산을 적용하려 할 때(객체-숫자형 변환), hint는 number가 된다.
// 명시적 형 변환
let num = Number(obj);
// (이항 덧셈 연산을 제외한) 수학 연산
let n = +obj; // 단항 덧셈 연산
let delta = date1 - date2;
// 크고 작음 비교하기
let greater = user1 > user2;- default
연산자가 기대하는 자료형이 ‘확실치 않을 때’ hint는 default가 된다(아주 드물게 발생).
ex 1. 이항 덧셈 연산자 +는 피연산자의 자료형에 따라 문자열을 합치는 연산을 할 수도 있고 숫자를 더해주는 연산을 할 수도 있다. 따라서 +의 인수가 객체일는 hint가 default가 된다.
ex 2. 동등 연산자 ==를 사용해 객체-문자형, 객체-숫자형, 객체-심볼형끼리 비교할 때도, 객체를 어떤 자료형으로 바꿔야 할지 확신이 안 서므로 hint는 default가 된다.
// 이항 덧셈 연산은 hint로 `default`를 사용합니다.
let total = obj1 + obj2;
// obj == number 연산은 hint로 `default`를 사용합니다.
if (user == 1) { ... };실제 일을 할 때는 이런 사항을 모두 외울 필요는 없다.
Date 객체를 제외한 모든 내장 객체는 hint가 "default"인 경우와 "number"인 경우를 동일하게 처리하기 때문입니다. 우리도 커스텀 객체를 만들 땐 이런 규칙을 따르면 된다.
자바스크립트는 형 변환이 필요할 때, 아래와 같은 알고리즘에 따라 원하는 메서드를 찾고 호출한다.
-
객체에 objSymbol.toPrimitive메서드가 있는지 찾고, 있다면 메서드를 호출한다. Symbol.toPrimitive는 시스템 심볼로, 심볼형 키로 사용된다.
-
1에 해당하지 않고 hint가 "string"이라면,
obj.toString()이나 obj.valueOf()를 호출한다(존재하는 메서드만 실행됨). -
1과 2에 해당하지 않고, hint가 "number"나 "default"라면
obj.valueOf()나 obj.toString()을 호출한다(존재하는 메서드만 실행됨).
Symbol.toPrimitive
자바스크립트엔 Symbol.toPrimitive라는 내장 심볼이 존재하는데, 이 심볼은 아래와 같이 목표로 하는 자료형(hint)을 명명하는 데 사용된다.
obj[Symbol.toPrimitive] = function(hint) {
// 반드시 원시값을 반환
// hint는 "string", "number", "default" 중 하나
};user 객체에 객체-원시형 변환 메서드 obj[Symbol.toPrimitive](hint)를 구현해보자.
let user = {
name: "John",
money: 1000,
[Symbol.toPrimitive](hint) {
alert(`hint: ${hint}`);
return hint == "string" ? `{name: "${this.name}"}` : this.money;
}
};
// 데모:
alert(user); // hint: string -> {name: "John"}
alert(+user); // hint: number -> 1000
alert(user + 500); // hint: default -> 1500이렇게 메서드를 구현해 놓으면 user는 hint에 따라 (자기 자신을 설명해주는) 문자열로 변환되기도 하고 (가지고 있는 돈의 액수를 나타내는) 숫자로 변환되기도 한다.
user[Symbol.toPrimitive]를 사용하면 메서드 하나로 모든 종류의 형 변환을 다룰 수 있다.
toString과 valueOf
toString과 valueOf는 심볼이 생기기 이전부터 존재해 왔던 ‘평범한’ 메서드이다. (java에서도 참 많이 보는 친구들)
이 메서드를 이용하면 '구식’이긴 하지만 형 변환을 직접 구현할 수 있다.
객체에 Symbol.toPrimitive가 없으면 자바스크립트는 아래 규칙에 따라 toString이나 valueOf를 호출한다.
-
hint가 'string’인 경우: toString -> valueOf 순
(toString이 있다면 toString을 호출, toString이 없다면 valueOf를 호출함) -
그 외: valueOf -> toString 순
이 메서드들은 반드시 원시값을 반환해야 한다. toString이나 valueOf가 객체를 반환하면 그 결과는 무시된다.
일반 객체는 기본적으로 toString과 valueOf에 적용되는 다음 규칙을 따른다.
-
toString은 문자열 "[object Object]"을 반환합니다.
-
valueOf는 객체 자신을 반환합니다.
let user = {name: "John"};
alert(user); // [object Object]
alert(user.valueOf() === user); // true이런 이유 때문에 alert에 객체를 넘기면 [object Object]가 출력되는 것 이다.
앞서 본 바와 같이 valueOf는 객체 자신을 반환하기 때문에 그 결과가 무시된다.
왜 그런거냐고 이유를 궁금해하지 마라. 그냥 역사적인 이유 때문이다. 그냥 이 메서드가 존재하지 않는다고 생각하면 된다.
아래의 예시는 Symbol.toPrimitive를 사용한 위쪽 예시와 동일하게 동작한다.
let user = {
name: "John",
money: 1000,
// hint가 "string"인 경우
toString() {
return `{name: "${this.name}"}`;
},
// hint가 "number"나 "default"인 경우
valueOf() {
return this.money;
}
};
alert(user); // toString -> {name: "John"}
alert(+user); // valueOf -> 1000
alert(user + 500); // valueOf -> 1500간혹 모든 형 변환을 한 곳에서 처리해야 하는 경우도 생긴다. 이럴 땐 아래와 같이 toString만 구현해 주면 된다.
let user = {
name: "John",
toString() {
return this.name;
}
};
alert(user); // toString -> John
alert(user + 500); // toString -> John500객체에 Symbol.toPrimitive와 valueOf가 없으면, toString이 모든 형 변환을 처리한다.
반환 타입
위 세 개의 메서드는 'hint’에 명시된 자료형으로의 형 변환을 보장해 주지 않는다.
toString()이 항상 문자열을 반환하리라는 보장이 없고, Symbol.toPrimitive의 hint가 "number"일 때 항상 숫자형 자료가 반환되리라는 보장이 없다.
확신할 수 있는 단 한 가지는 객체가 아닌 원시값을 반환해 준다는 것뿐이다.
🗣 과거의 잔재
toString이나 valueOf가 객체를 반환해도 에러가 발생하지 않는다.
다만 이때는 반환 값이 무시되고, 메서드 자체가 존재하지 않았던 것처럼 동작한다. 이렇게 동작하는 이유는 과거 자바스크립트엔 '에러’라는 개념이 잘 정립되어있지 않았기 때문이다.
반면에 Symbol.toPrimitive는 무조건 원시자료를 반환해야 합니다. 그렇지 않으면 에러가 발생한다.
Reference
