3. Javascript의 타입 변환

 

자바스크립트의 모든 값은 타입이 존재합니다.

그리고 값의 타입은 개발자에 의해 변환(명시적 강제변환, Type Casting)되거나,

자바스크립트 엔진에 의해 암묵적으로 변환(암시적 강제변환, Type Coercion) 될 수 있습니다.

 

차이는 명확하게 구분되어집니다.

명시적 강제변환은 의도적으로 타입변환을 하였기에 코드만 봐도 알 수 있으며,

암시적 강제변환은 다른 작업 도중 부수효과(Side Effect)로부터 발생하는 변환 입니다.

 

아래 코드에서 명시적 강제변환과 암시적 강제변환의 차이를 볼 수 있습니다.

var x = 10;

var str = x + '';
var str2 = String(x);

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

위 예제에서 str은 암시적 강제변환 되었고 str2는 명시적 강제변환 되었습니다.

 

str2의 경우 암시적 강제변환의 대표적인 예로 공백 문자열('')과 '+' 연산은 문자열 접합 처리를 의미하는데,

자바스크립트 엔진은 표현식을 평가하기 위해 기존 값(10)을 바탕으로 새로운 타입의 값을 만들어 사용하고 버립니다.

 

다시 말하자면, 숫자 10을 바탕으로 문자열 10을 만든 후 문자열 ''과의 접합을 하게 되고 평가 이후 참조하는 곳이 아무데도 없으므로 가비지 컬렉터에 수집대상이 되어 제거될 것 입니다.

 

암묵적 타입변환이나 명시적 타입변환이나 누가 맞고 틀리고를 따지는 것은 무의미합니다.

가장 중요한 것은 예측할 수 있어야 한다는 것이기에 타입 변환이 어떻게 동작하는지 정확히 이해하고 사용해야 합니다.

console.log(1 + '1'); // '11'
console.log(1 - '1'); // 0
console.log(1 / '1'); // 1
console.log(1 * '1'); // 1
console.log(1 % '1'); // 0

위의 예제의 + 연산자는 피 연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작하게 됩니다.

자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가하기 위해서 피연산자 중 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 변환을 하게 됩니다.

나머지는 산술 연산자로 동작한 것을 볼 수 있습니다.

 

Falsy 값

boolean(true, false)이 아닌 값이 boolean값으로 변환될 경우는 어떻게 작동할까요?

둘 중 하나입니다.

 

1. false가 되는 값

2. 1번을 제외 한 모든 값 (즉, true)

 

자바스크립트 명세에는 false가 되는 값들이 이미 정의되어 있습니다.

명세가 정의한 'Falsy'값은 다음과 같습니다.

 

- false

- undefined, null

- "" (빈문자열)

- 0, -0, NaN

 

이 목록에 있으면 false로 변환되며, 그렇지 않은 경우 true로 변환되는 'Truthy'값이 됩니다.

console.log(!!{});        // true
console.log(!![]);        // true
console.log(!!10);        // true
console.log(!!'');        // false
console.log(!!0);         // false
console.log(!!undefined); // false
console.log(!!null);      // false
console.log(!!-0);          // false