타입 변환

자바스크립트에는 모든 타입이 있고, 값의 타입은 개발자에 의해 의도적으로 다른 타입으로 변환할 수 있다.
또는 자바스크립트 엔진에 의해 암묵적으로 자동 변환도 할 수 있다.

명시적 타입 변환(Type casting)

개발자에 의해 의도적으로 타입을 변환하는 것

예시

var x = 10;

// 명시적 타입 변환
var str = x.toString(); 
console.log(typeof str); // string

toString 메서드를 이용하여, number 의 타입을 string으로 변경해준다.

방법

문자열 타입 변환

• String 생성자 함수를 new 연산자 없이 호출하는 방법
• Object.prototype.toString 메소드를 사용하는 방법
• 문자열 연결 연산자를 이용하는 방법

console.log(String(1));  // "1"

숫자 타입 변환

console.log(Number('0'));  // 0

숫자 타입 변환

console.log(Number('0'));  // 0

불리언 타입 변환

• Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
• ! 부정 논리 연산자를 두번 사용하는 방법

console.log(Boolean('x'));       // true
console.log(Boolean(''));        // false

암묵적 타입 변환 (Type coercion)

자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것
자바스크립트 엔진은 표현식을 평가할 때 문맥, 즉 컨텍스트(Context)에 고려하여 암묵적 타입 변환을 실행한다.

var x = 10;

// 암묵적 타입 변환
var str = x + '';

console.log(typeof str, str); // string 10
console.log(x); // 10

숫자 타입 x의 값을 바탕으로 새로운 문자열 타입의 값을 생성해 표현식을 평가한다.
하지만, 기존 값이 변경되지는 않는다.

방법

문자열 타입 변환

1 + '2' // "12"
true + '' // "true"

숫자 타입 변환

1 - '1'    // 0
1 * '10'   // 10
1 / 'one'  // NaN

불리언 타입 변환

if ('') console.log(x);

# 기존 값(변수)을 직접 변경하는 것은 아니다.

변수값을 변경하려면 재할당을 통해 새로운 메모리 공간을 확보하고,
그곳에 원시값을 저장하고 변수명이 재할당된 원시값이 저장된 메모리 공간의 주소를 기억하도록 해야하기 때문이다.

# 자바스크립트 엔진이 어떻게 움직일까?

자바스크립트 엔진이 표현식을 에러없이 평가하기 위해 기존 값을 바탕으로 새로운 타입의 값을 만들어 단 한번 사용하고 버린다.

1. 변수 x의 숫자 값을 바탕으로 새로운 문자열 값 ‘10’을 생성
2. 표현식 ‘10’ + ‘‘를 평가
3. 자동 생성된 문자열 ‘10’은 표현식의 평가가 끝나면 아무도 참조하지 않으므로 가비지 컬렉터에 의해 메모리에서 제거.

# 좋은 코드

자신의 코드에서 암묵적으로 타입이 변환되는지, 명시적으로 변환되는지 예측이 가능한 코드로 작성해야한다.
예측하지 못하거나 예측한 내용이 결과와 일치하지 않는다면 버그를 날 가능성이 높아진다.

그럼 암묵적 코드를 안쓰면 되지 않을까?

좋은 생각이지만, 그렇게 접근하면 옳진 않다.
암묵적 코드가 명시적 코드보다 가독성 면이 좋을 수 있고,
자바스크립트 문법을 잘 이해하고 있는 개발자에게는 (10).toString()보다 10 + ''이 더욱 간결하고 이해하기 쉬울 수 있다.

truthy / falsy

truthy

참

if (true) {}
if ({}) {}
if ("0") {}
if ([]) {}

falsy

거짓

• undefined

• null

• false

• 0(+0, -0)

• NaN

• ""

  if (undefined) {}
  if (null) {}
  if (false) {}
  if (0) {}
  if (NaN) {}
  if ("") {}