자바스크립트의 타입 변환

// typeof 연산자와 전체적으로 비슷한 동작을 하지만, 아래 TypeOf 함수의 경우
// typeof 와는 달리 함수의 타입을 'object'로, null의 타입을 'null'로 판정합니다.

function TypeOf(value) {
  const result = typeof value;
  if (result === 'function') return 'object';
  if (result === 'object' && value === null) return 'null';
  return result;
}

// 함수의 이름에서 알 수 있듯, '호출 가능한'값 즉 함수인지를 판별합니다.
function IsCallable(value) {
  return typeof value === 'function';
}

function ToPrimitive(input, preferredType = 'default') {
  if (TypeOf(input) === 'object') {
    let exoticToPrim = input[Symbol.toPrimitive];

    if (exoticToPrim === undefined) {
      if (preferredType === 'default') preferredType = 'number';
      return OrdinaryToPrimitive(input, preferredType);
    }

    let result = exoticToPrim(input, preferredType);
    if (TypeOf(result) === 'object') throw new TypeError();
    return result;
  } else return input; // 주어진 입력이 원시 타입인 경우
}

function OrdinaryToPrimitive(obj, hint) {
  let methodNames = hint === 'string'
    ? ['toString', 'valueOf']
    : ['valueOf', 'toString'];

  for (let methodName of methodNames) {
    let method = obj[methodName];
    if (IsCallable(method)) {
      let result = method(obj);
      if (TypeOf(result) !== 'object') return result;
    }
  }

  throw new TypeError();
}

const myObj = {
  toString() { return 'hello, world!'; },
  valueOf() { return 123; }
};

// String()의 경우, 내부적으로 'string' 힌트를 사용합니다.
console.log(String(myObj)); // "hello, world"

// Number()의 경우, 내부적으로 'number' 힌트를 사용합니다.
console.log(Number(myObj)); // 123

const myObj1 = {
  toString() { return {}; },
  valueOf() { return 123; }
};
// 처음엔 myObj1의 toString()을 호출하는데, 이 메서드가 객체를 반환하므로 
// 그다음으로 valueOf()를 호출하여 그 결과값 123(숫자 타입)을
// "123"(문자열)으로 변환합니다. 즉, String(123)을 하는 것과 같습니다.
console.log(String(myObj1)); // "123"


const myObj2 = {
  toString() { return 'hello, world'; },
  valueOf() { return []; }
};
// 처음엔 myObj2의 valueOf()를 호출하는데, 이 메서드가 객체를 반환하므로
// 그다음으로 toString()을 호출하여 그 결과값 'hello, world'를
// 숫자 타입으로 변환합니다. 이때 'hello, world'를 숫자 타입으로 변환하면 NaN 이므로
// 최종 결과로 NaN이 반환됩니다. 즉, Number('hello, world')와 같습니다.
console.log(Number(myObj2)); // NaN


const myObj3 = {
  toString() { return '456.123'; },
  valueOf() { return []; }
}
// 처음엔 myObj3의 valueOf()를 호출하는데, 이 메서드가 객체를 반환하므로
// 그다음으로 toString()을 호출하여 그 결과값 '456.123'을
// 숫자 타입으로 변환합니다. 이때 문자열 '456.123'을 숫자 타입으로 변환하면 456.123 이므로
// 최종 결과로 456.123이 반환됩니다. 즉, Number('456.123')과 같습니다.
console.log(Number(myObj3)); // 456.123

console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(new Date)); // [object Date]
console.log(Object.prototype.toString.call(new Set)); // [object Set]
console.log(Object.prototype.toString.call(new Map)); // [object Map]
console.log(Object.prototype.toString.call(new Number)); // [object Number]
console.log(Object.prototype.toString.call(new String)); // [object String]
console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call({})); // [object Object]
console.log(Object.prototype.toString.call(function() {})); // [object Function]
console.log(Object.prototype.toString.call(Symbol('1'))); // [object Symbol]
console.log(Object.prototype.toString.call(123n)); // // [object BigInt]
console.log(Object.prototype.toString.call(Math)); // [object Math]
console.log(Object.prototype.toString.call(new ArrayBuffer)); // [object ArrayBuffer]
// ...

const myObj = {
  // ...
};

console.log(`${myObj} is awesome!`); // [object Object] is awesome!

const myObj = {
  // ...
};
console.log(myObj + '1'); // [object Object]1
console.log(myObj + 1); // [object Object]1

// valueOf()를 따로 구현한 경우
const myObj1 = {
  valueOf() { return 2; }
};

// valueOf() 호출 시 원시 타입인 숫자 2를 반환하므로 암묵적 변환의 결과로 myObj1이 2로 변한됩니다.
// 여기선 덧셈 연산의 두 번째 피연산자가 문자열이므로 2를 다시 문자열 "2"로 변환하여 문자열 이어붙이기를
// 수행하게 됩니다. 따라서 최종 결과는 "21"이 됩니다.
console.log(myObj1 + '1'); // "21"

// 마찬가지로, 암묵적 변환의 결과로 myObj1이 2로 변환되기 때문에 결과적으로 2 + 1 연산을 수행한 것이나
// 다름없습니다.
console.log(myObj1 + 1); // 3

// [Symbol.toPrimitive]를 따로 구현한 경우
const myObj2 = {
  valueOf() { return 2; },
  [Symbol.toPrimitive]() { return 100; }
};

// 이 경우 myObj2가 [Symbol.toPrimitive] 메서드를 가지고 있기 때문에, ToPrimitive 추상 연산에서
// OrdinaryToPrimitive 추상 연산으로 넘어가지 않고, [Symbol.toPrimitive] 메서드를 실행하여
// 변환을 수행합니다. 따라서 myObj2가 원시 타입인 숫자 100으로 변환되고 여기선 덧셈 연산의 두 피연산자
// 모두 숫자이므로 수학에서의 덧셈 연산을 수행하여 최종 결과가 100 + 1 = 101이 됩니다.
console.log(myObj2 + 1); // 101

Date.prototype[Symbol.toPrimitive] = function(hint) {
  let o = this;
  if (TypeOf(o) === 'object') throw new TypeError();
  if (hint !== 'string' && hint !== 'number' && hint !== 'default') {
    throw new TypeError();
  }

  let tryFirst = hint === 'number'
    ? 'number'
    : 'string';
  return OrdinaryToPrimitive(o, tryFirst);
}

const myDate = new Date('2020-01-01');
// 힌트를 'default', 즉 'string'으로 하여 Date 객체를 변환합니다.
console.log(myDate + 'hello, world!'); // Wed Jan 01 2020 09:00:00 GMT+0900 (Korean Standard Time)hello, world!

// Date 객체의 변환 결과가 문자열이므로 숫자 123을 문자열 "123"으로 변환한 뒤 문자열 이어붙이기 연산을 수행합니다.
console.log(myDate + 123); // Wed Jan 01 2020 09:00:00 GMT+0900 (Korean Standard Time)123


/* [Symbol.toPrimitive] 메서드를 명시적으로 사용하여 힌트를 직접 지정할 수도 있습니다. */
// 힌트가 'number'인 경우 Date 객체의 valueOf()을 이용하여 변환을 마무리합니다.
console.log(myDate[Symbol.toPrimitive]('number')); // 1577836800000

// 힌트가 'string'인 경우 Date 객체의 toString()을 이용하여 변환을 마무리합니다.
console.log(myDate[Symbol.toPrimitive]('string')); // Wed Jan 01 2020 09:00:00 GMT+0900 (Korean Standard Time)

// 힌트가 'default'인 경우 힌트를 'string'으로 간주합니다.
console.log(myDate[Symbol.toPrimitive]('default')); // Wed Jan 01 2020 09:00:00 GMT+0900 (Korean Standard Time)

const mySymbol = Symbol('hello, world!');
// 심볼은 그 자체로 원시 타입이므로 자기 자신을 반환합니다.
console.log(mySymbol[Symbol.toPrimitive]()); // Symbol(hello, world!)
console.log(mySymbol[Symbol.toPrimitive]() === mySymbol); // true

// 힌트는 사용되지 않습니다.
console.log(mySymbol[Symbol.toPrimitive]('number')); // Symbol(hello, world!)
console.log(mySymbol[Symbol.toPrimitive]('string')); // Symbol(hello, world!)
console.log(mySymbol[Symbol.toPrimitive]('default')); // Symbol(hello, world!)
console.log(mySymbol[Symbol.toPrimitive]('hey')); // Symbol(hello, world!)

// 심볼의 valueOf() 메서드는 자기 자신을 반환합니다
console.log(mySymbol.valueOf() === mySymbol) // true;

// 심볼의 toString() 메서드는 해당 심볼을 나타내는 문자열을 반환합니다.
console.log(mySymbol.toString()) // "Symbol(hello, world)"