타입 변환

 

자바스크립트의 모든 값은 타입이 있고 타입은 변환될 수 있습니다.

이것을 타입 변환또는 형변환(Type Conversion)이라고 하며 형변환에 대해서 알아보겠습니다.

 

타입 변환

타입 변환은 명시적 타입 변환, 암묵적 타입 변환으로 나눌 수 있습니다. 이때 타입 변환이 일어나도 기존 원시 값이 직접 변경되는 것은 아닙니다.

이전에도 알아봤듯이 자바스크립트의 기본 데이터 타입은 변경 불가능한 값이므로 타입 변환은 기존 원시 값으로 다른 타입의 새로운 원시 값을 생성한다고 이해하면 되겠습니다.

 

명시적 타입 변환

명시적 타입 변환은 개발자의 의도에 의한 타입 변환을 말합니다.

let x = 10;
let str = String(x);

console.log(str); // 문자열 10
console.log(x); // 숫자 10

 

타입을 변환하는 방법은 Object(), Number(), String(), Boolean()과 같은 함수를 사용해서 변환할 수 있습니다.

new 연산자가 붙으면 생성자 함수로써 사용되지만, new 연산자가 없으면 타입을 변환하는 함수로 사용할 수 있습니다.

 

암시적 타입 변환

암시적 타입 변환은 개발자의 의도와 상관없이 자바스크립트 엔진이 코드의 문맥을 파악하고 강제 변환하는 것을 말합니다.

 

1. 문자열 타입으로 변환

1 + ''; // 1
10 + '2'; // 102
true + ''; // true
(Symbol()) + ''; // Uncaught TypeError: Cannot convert a Symbol value to a string
({}) + ''; // [object Object]
(function(){}) + ''; // function(){}

산술 연산자인 +는 피연산자에 문자열 타입이 존재하면 결합 연산자로 사용됩니다.

결합 연산자는 문자열 타입의 값을 만드는 역할을 하므로 모든 피연산자를 문자열 타입으로 강제 변환해서 연산을 시도합니다.

ES6에서 새로 추가된 Symbol을 제외한 모든 타입은 문자열로 변환될 수 있는 것을 알 수 있습니다.

 

2. 숫자 타입으로 변환

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

산술 연산자는 숫자 타입의 값을 만드는 역할을 합니다. 때문에 숫자 타입이 아닌 피연산자를 가능한 숫자로 변환해서 연산을 시도합니다.

이때 'one'과 같이 숫자 타입으로 변환할 수 없는 값인 경우 NaN을 반환하게 됩니다.

 

'1' > 0 // true
+false // 0
+null // 0
+undefined // NaN
+[] // 0
+Symbol() // TypeError: Cannot convert a Symbol value to a number

비교 연산자의 경우 피연산자의 크기를 비교하므로 피연산자를 숫자 타입으로 강제 변환합니다.

+를 단항 연산자로 사용할 시에는 피연산자를 숫자 타입으로 강제 변환하는 기능을 합니다.

 

3. 불리언 타입

 

자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값 또는 Falsy 값으로 구분합니다.

• Falsy 값
  • false
  • undefined
  • null
  • 0, -0
  • NaN
  • 빈 문자열

이 외의 값은 true로 평가되는 Truthy 값입니다.

 

정리

자바스크립트는 명시적 형 변환, 암묵적 형 변환이 있습니다.

명시적 형변환은형 변환은 개발자가 의도한 타입 변환이며, 암묵적 형 변환은 자바스크립트 엔진에 의해 변환되는 것입니다.

암묵적 형변환의 경우 예측이 가능해야 하며 다른 사람들도 이해할 수 있도록 코드를 작성하는 것이 바람직합니다.

 

참고
모던 자바스크립트 딥 다이브