알랑말랑 암묵적 형변환 말랑말랑 이해하기

{} == []  // ERROR
[] == {}  // false
[] == ''  // true
[] == []  // false
"[object Object]" == {}  // true
[45] == 45  // true
[45] == '45'  // true
4 * []  // 0
[] + {}  // "[object Object]"
{} + []  // 0
0 == '\n'  // true
1 + 2 + '3'  // 33
NaN == NaN  // false
undefined == null // true
 

// 표현식이 모두 문자열 타입이여야 하는 컨텍스트
const a = '10' + 2; // "102"
const b = `1 * 10 = ${1 * 10}`; // "1 * 10 = 10"
 
// 표현식이 모두 숫자 타입이여야 하는 컨텍스트
5 * '10'; // 50
 
// 표현식이 불리언 타입이여야 하는 컨텍스트
!0; // true
if (1) {
}
1 == []; // false

function toPrimitive(input, PreferredType) {
  // PreferredType은 호출자가 기대하는 타입
  if (typeof input === 'object' || typeof input === 'function') {
    let hint =
      PreferredType === undefined
        ? 'default'
        : typeof PreferredType === 'string'
          ? 'string'
          : 'number';
    let exoticToPrim = input[Symbol.toPrimitive];
    if (exoticToPrim !== undefined) {
      let result = exoticToPrim.apply(input, [hint]);
      if (!(typeof input === 'object' || typeof input === 'function'))
        return result;
      throw new TypeError();
    }
    if (hint === 'default') hint = 'number';
    return OrdinaryToPrimitive(input, hint);
  }
  return input;
}

function OrdinaryToPrimitive (O, hint) {
  if ( typeof O === "object" || typeof O === "function" ) {
    if( typeof hint === "string" && ( hint === "string" || hint === "number" ) ) {
      let methodNames = hint === "string" ? [ "toString", "valueOf" ] : [ "valueOf", "toString" ];
      for( name of methodNames ) {
        let method = O[name];
        if( typeof method === "function" ) {
          let result = method.apply(O);
          if( typeof result !== "object" && typeof result !== "function" ) return result;
        }
    }
  }
 throw new TypeError();
}

1. 4 * []  // 0
2. 4 + []  // "4"
3. [] + {}  // "[object Object]"
4. [45] == 45  // true
5. {} == []  // ERROR
6. 0 == '\n'  // true

// CASE 1.
1. 4 * []
// +를 제외한 산술 연산의 경우 숫자타입이 최상위 우선순위이므로 암묵적 형변환은 Number == ToPrimitive([]) 으로 될 것이다.
2. 4 * Object([])  // 4 * []
// Symbol.toPrimitive 정의를 해주지 않았으므로 default hint 는 number 로 설정된다.
3. 4 * Object([]).valueOf()  // 4 * []
// Default hint 가 number 이므로 [valueOf, toString] 순으로 원시 값을 가져올 것이다.
4. 4 * Object([]).valueOf().toString()  // 4 * ""
// 하지만 valueOf 는 this 반환으로 객체([])를 반환해 원시타입이 아니게 되므로 무시된다. 따라서 후순위의 toString 함수가 실행된다.
5. 4 * Number(Object([]).valueOf().toString()) // 4 * 0
// 숫자 * 문자열 연산에서 숫자가 우선순위가 높으므로 Number 타입으로 형변환이 된다.
6. 0
// 그 결과 4 * 0 이 되어 0이 최종 리턴된다.

// CASE 2.
1. 4 + []
2. 4 + Object([]).valueOf().toString() // ""
// CASE1 예시의 4번까지와 동일하다.
3. String(4) + Object([]).valueOf().toString() // "4"
// + 연산자에서는 숫자보다 문자가 우선순위를 가지므로 숫자가 String 으로 변환되었다.
4. "4"

// CASE 3.
1. [] + {}
2. Object([]) + Object({})
3. Object([]).valueOf() + Object({}).valueOf()  // [] + {}
// 모두 객체자신을 반환하므로 toString 연산까지 진행하게 된다.
4. Object([]).valueOf().toString() + Object({}).valueOf().toString()  // "" + "[object Object]"
// 객체의 toString 은 prototype 상속으로 최종 this 결과값을 반환해 object Object 가 나타난다.
// Object.prototype.toString.call(undefined) 호출시 "[object Undefined]" 가 나오는 것 처럼.
5. "[object Object]"

// CASE 4.
1. [45] == 45
2. Object([45]) == 45
3. Object([45]).valueOf() == 45 // [45] == 45
4. Object([45]).valueOf().toString() == 45 // "45" == 45
5. Number(Object([45]).valueOf().toString()) == 45 // 45 == 45
6. true

// CASE 5.
1. {} == []
// {} 중괄호는 "객체"로 인식되는 것이 아닌 "블록 스코프"로 인식되어 사라져버린다!
2. == []
3. // Uncaught SyntaxError: Unexpected token '=='

// CASE 6.
1. 0 == '\n'
2. 0 == ""
3. 0 == Number('')
4. 0 == 0
5. true

const user = {
  name: '1ilsang',
  money: 1000,
 
  [Symbol.toPrimitive](hint) {
    alert(`hint: ${hint}`);
    return hint == 'string' ? `{name: "${this.name}"}` : this.money;
  },
};
 
// 데모:
alert(user); // hint: string -> {name: "1ilsang"}
alert([user] == '{name: "1ilsang"}'); // hint: string -> {name: "1ilsang"} == {name: "1ilsang"}; true;
alert(+user); // hint: number -> 1000
alert(user + 500); // hint: default -> default는 number가 기본타입이므로 1000 + 500 -> 1500
alert('3' - user); // hint: number -> '3' - 1000 -> 3 - 1000 -> -997
alert(user > 10); // hint: number -> 1000 > 10; true
alert(user + new Date()); // hint: default -> 1000 + 'Sat Apr 22 2023 17:02:00 GMT+0900 (한국 표준시)' -> '1000Sat Apr 22 2023 17:02:00 GMT+0900 (한국 표준시)'