5일차 - 2022.03.05

안병욱·2022년 3월 5일

오늘 공부한 내용 요약

( 모던 JavaScript 튜토리얼 학습 )

1. 객체를 원시형으로 변환하기

객체는 예외없이 논리 평가 후 true를 반환합니다.
따라서 객체는 숫자형이나 문자형으로만 형 변환이 일어난다
숫자형으로의 형 변환은 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 일어난다
문자형으로의 형 변환은 alert(obj)같이 객체를 출력하려고 할 때 일어난다

객체 형 변환은 세 종류로 구분되는데, hint라 불리는 값이 구분 기준이 됩니다. hint는 목표로 하는 자료형 정도로 이해하자(boolean hint는 없음)

1) string
alert 같이 문자열을 기대하는 연산수행시 hint는 string이 된다

2) number
수학연산을 적용하려 할때 hint는 number가 된다
<, >는 피연산자에 문자형과 숫자형 둘 다를 허용하지만 hint를 'number’로 고정한다

3) default
드물게 연산자가 기대하는 자료형이 확실치 않을 때 hint는 default가 됩니다
이항 덧셈연산자(+)와 동등연산자(=) 등의 경우에 hint는 default가 된다

*객체-원시형 변환엔 아래와 같은 과정 (반드시 원시값을 반환해야 한다)
1) 객체에 obj '['Symbol.toPrimitive ']'(hint)메서드가 있는지 찾고, 있다면 메서드를 호출합니다. Symbol.toPrimitive는 시스템 심볼로, 심볼형 키로 사용된다.
2) 1에 해당하지 않고 hint가 "string"이라면,
obj.toString()이나 obj.valueOf()를 호출합니다(존재하는 메서드만 실행된다)
3) 1과 2에 해당하지 않고, hint가 "number"나 "default"라면
obj.valueOf()나 obj.toString()을 호출합니다(존재하는 메서드만 실행된다)

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

toString과 valueOf
심볼이 생기기 이전부터 존재한 메서드. 형변환을 직접 구현 가능

객체에 Symbol.toPrimitive가 없으면 자바스크립트는
1) hint가 'string’인 경우 toString -> valueOf 순
(toString이 있다면 toString을 호출, toString이 없다면 valueOf를 호출함)
2) 그 외: valueOf -> toString 순

-toString이나 valueOf가 객체를 반환하면 그 결과는 무시
-일반객체는 기본적으로
toString은 문자열 "[object Object]"을 반환합니다.
valueOf는 객체 자신을 반환합니다.

let user = {name: "John"};

alert(user); // [object Object]
alert(user.valueOf() === user); // true

반환 타입
위의 메서드는 hint에 명시된 자료형으로의 형 변환을 보장하진 않는다
객체가 아닌 원시값을 반환해준다는 것만 확실하다
추가 형 변환
객체가 피연산자일 떄 객체는 원시형으로 변환된다.
변환 후 원시값이 원하는 형이 아닌 경우엔 또다시 형 변환이 일어난다

let obj = {
 
  toString() {
    return "2";
  }
};

alert(obj * 2);    // 4
객체가 문자열 "2"로 바뀌고, 곱셈 연산 과정에서 문자열 "2"는 숫자 2로 변경된다

alert(obj + 2);    // 22
문자열이 반환되기 때문에 문자열끼리의 병합이 일어남

obj.toString()만 사용해도 모든 변환을 다룰 수 있고 반환값도 사람이 읽고 이해할 수 있는 형식이기 때문에 실용성 측면에서 다른 메서드에 뒤처지지 않는다. 로깅이나 디버깅 목적으로도 자주 사용된다

2. 원시값의 메서드

객체는 원시값보다 무겁고 내부 구조를 유지하기 위해 추가 자원을 사용하지만 메서드를 사용하기 위해 나온 방법이
1) 원시값은 원시값 그대로 남겨둬 단일 값 형태를 유지
2) 문자열, 숫자, 불린, 심볼의 메서드와 프로퍼티에 접근할 수 있도록 언어 차원에서 허용
3) 이를 위해, 원시값이 메서드나 프로퍼티에 접근하려 하면 추가 기능을 제공해주는 특수한 객체인 원시 래퍼 객체를 만들고 이 객체는 잠시후 삭제됨

예시)

let str = "Hello";

alert( str.toUpperCase() ); // HELLO

1) 문자열 str은 원시값이므로 원시값의 프로퍼티(toUpperCase)에 접근하는 순간 특별한 객체가 만들어진다.
2) 메서드가 실행되고, 새로운 문자열이 반환됩니다(alert 창에 이 문자열이 출력됩니다).
3) 특별한 객체는 파괴되고, 원시값 str만 남습니다.