20190526 33-JS-Concepts :: 04 Type Coercion

Type Coercion

• 타입변환에는 두가지를 기억한다.
• 명시적 변환과 묵시적 변환
  • explicit (명시적 변환을 수행)
  • implicit (연산자를 통한 암묵적인, 묵시적 변환을 수행)

To String

let valueString1 = String(123);     // explicit
let valueString2 = 123 + '';        // implicit

console.log("value :: " + valueString1 + ", type :: " + typeof(valueString1));
console.log("value :: " + valueString2 + ", type :: " + typeof(valueString2));
// value :: 123, type :: string
// value :: 123, type :: string

 

To Boolean

let valueBool1 = Boolean(2);        // true
let valueBool2 = Boolean('hello');  // true
let valueBool3 = !!2;               // true

• 불린타입으로 타입 캐스팅을 실시한다.
  • valueBool1, valueBool2 ☞ explicit
  • valueBool3 ☞ implicit

Logical operators 를 통해서, 불린 타입이 아님에도 불구하고 && 또는 || 를 이용해서 값을 리턴받을 수 있다. 아래의 예시를 살펴보자

let valueBool4 = (2 && 'hello');    // (expr1 && expr2) ? expr1 : expr2
let valueBool5 = (2 || 'hello');    // (expr1 || expr2) ? expr1 : expr2
let valueBool6 = ('hello' || 2);    // (expr1 || expr2) ? expr1 : expr2

• valueBool4 에 2 와 'hello' 는 둘 다 true 값을 반환한다.
  • Logical AND (&&) 는 연산 결과에 따라서 반환되는 값이 다르다.
• valueBool5 와 valueBool6 은 둘 다 true 값을 반환한다.
  • Logical OR (||) 는 연산 결과에 따라서 반환되는 값이 다르다.

console.log("value :: " + valueBool4 + ", type :: " + typeof(valueBool4));
console.log("value :: " + valueBool5 + ", type :: " + typeof(valueBool5));
console.log("value :: " + valueBool6 + ", type :: " + typeof(valueBool6));

/**
value :: hello, type :: string
value :: 2, type :: number
value :: hello, type :: string
**/

• typeof 를 통해서 타입을 살펴보면, 각각 해당 값에 맞는 타입으로 변환되어 있음을 확인할 수 있다.

To Number

console.log(Boolean({}));
console.log(Boolean([]));
console.log(Boolean(Symbol()));
console.log(Boolean(!!Symbol));
console.log(Boolean(function(){}));
// true 를 반환

console.log(Boolean(''));
console.log(Boolean(0));
console.log(Boolean(-0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(false));
// false 를 반환

console.log(Number(null));          // 0
console.log(Number(undefined));     // NaN
console.log(Number(true));          // 1
console.log(Number(false));         // 0
console.log(Number(" 12 "));        // 12
console.log(Number("-12.34"));      // -12.34
console.log(Number("\n"));          // 0
console.log(Number(" 12s "));       // NaN
console.log(Number(123));           // 123

• string to number 로 변환할 때, 
  • 자바스크립트 엔진은 우선적으로 앞과 뒤의 공백을 trim 시킨다.
  • \n, \t 문자를 제외하고 정리된 문자열 내에 유효한 숫자가 없으면 NaN 을 반환한다.
  • 정리된 문자열이 비어있으면 0 을 반환한다.
  • null 과 undefined 는 서로 다르게 처리된다.
    • null 은 0 으로 처리된다.
    • undefined 는 NaN 으로 처리된다.

reference

모든 자바스크립트 개발자가 알아야하는 33가지 개념

Expressions and opertors