[JavaScript] 자바스크립트의 타입 변환 - 명시적, 암묵적

[ 타입 변환이란? ]

 

 자바스크립트의 모든 값은 number, string, boolean 등과 같이 타입을 가지고 있습니다. 

 

 자바스크립트의 타입 변환에는 개발자가 의도적으로 값의 타입을 변환하는 명시적 타입 변환(explicit coercion, 타입 캐스팅)과, 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 암묵적 타입 변환(implicit coercion, 타입 강제 변환)이 있습니다. 

 

 명시적 타입 변환이나 암묵적 타입 변환이 기존 원시 값을 직접 변경하는 것은 아닙니다. 원시 값은 변경 불가능한 immutable한 값이기 때문이죠.

 

 즉 타입 변환은 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것입니다. 

 

let x = 10;

// 명시적 타입 변환
let str1 = x.toString();
console.log(typeof str1, str1)   // string 10
console.log(typeof x, x);        // number 10

// 암묵적 타입 변환
let str2 = x + '';
console.log(typeof str2, str2);  // string 10
console.log(typeof x, x);        // number 10

 

 

 

[ 암묵적 타입 변환 ]

 

 자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 피연산자의 갑을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버립니다. 

 

 암묵적 타입 변환이 발생하면 string, number, boolean 과 같은 원시 타입 중 하나로 타입을 자동 변환합니다. 

 

 

★ 문자열 타입으로 변환

 

 '+' 연사자는 피연산자 중 하나 이상이 문자열이면, 문자열 연결 연산자로 동작하게 됩니다. 따라서 문자열 연결 연산자의 모든 피연산자는 코드의 문맥 상 모두 문자열 타입이어야 합니다. 

 

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

 

 또한 ES6에서 도입된 템플릿 리터럴의 표현식 삽입은 표현식의 평과 결과를 문자열 타입으로 암묵적 타입 변환합니다. 

 

// 암묵적 타입 변환
0 + ''  // -> "0"
NaN + ''  // -> "NaN"
true + ''  // -> "true"
null + ''  // -> "null"
undefined + ''  // -> "undefined"
[10, 20] + ''  // -> "10, 20"
Math + ''   // "[object Math]"
`1 + 1 = ${1 + 1}`   // -> "1 + 1 = 2"

 

 

 

★ 숫자 타입으로 변환

 

 자바스크립트 엔진은 산술 연산자(-, *, /) 표현식을 평가하기 위해 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환합니다. 

 

 이때 피연산자를 숫자 타입으로 변환할 수 없는 경우, 평가 결과는 NaN이 됩니다. 

 

 또한 비교 연산자(<, >, <=, >=)의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환합니다. 

 

 + 단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환을 수행합니다. 

 

console.log(1 - '1')   // 0
console.log(1 * '10')  // 10
console.log(1 / '2')   // 0.5
console.log('1' > 0)   // true
console.log(+'')       // 0
console.log(+'1')      // 1
console.log(+'string') // NaN
console.log(+true)     // 1
console.log(+null)     // 0
console.log(+undefined) // NaN
console.log(+{})       // NaN
console.log(+[])       // 0
console.log(+[1, 2])   // NaN
console.log(+function(){})  // NaN

const a = 1 + '1'
console.log(typeof a, a)  // string 11

 

 

 

 

★ 불리언 타입으로 변환

 

 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값 또는 Falsy 값으로 구분하여 true/false로 암묵적 타입 변환을 합니다. 

 

Truthy 값	Falsy 값
true, {}, [], 'string', number	false, ' '(빈 문자열), null, undefined, 0, -0, NaN

if ('') console.log('1');
if ('1') console.log('2');
if ('false') console.log('3');
if (0) console.log('4');
if({}) console.log('5');
if(NaN) console.log('6');


// 2, 3, 5

 

 

 

 

[ 명시적 타입 변환 ]

 

 개발자의 의도에 따라 명시적으로 타입을 변환하는 방법은 다양합니다. 

 

★ 문자열 타입으로 변환

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

// String 생성자 함수
String(1);      //"1"
String(NaN);    //"NaN"
String(true);   //"true"

// toString 메서드
(1).toString();
(NaN).toString();
(true).toString();

// 문자열 연결 연산자 +
1 + ''; 
NaN + '';
true + '';

 

 

 

★ 숫자 타입으로 변환

• Number 생성자 함수를 new 연산자 없이 호출하는 방법
• parseInt(), parseFloat() 함수 사용 (문자열만 가능)
• + 단항 산술 연산자
• * 산술 연산자

 

// Number 생성자 함수
Number('0')    // 0
Number('-1')   // -1
Number('3.14')  // 3.14
Number(true)  // 1

// parseInt(), parseFloat()
parseInt('1')  // 1
parseFloat('3.14')  //3.14

// + 단항 연산자
+'0'
+'3.14'
+true

// * 산술 연산자
'0' * 1  // 0
'-1' * 1  // -1
'3.14' * 1 // 3.14
true * 1 // 1

 

 

 

★ 불리언 타입으로 변환

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

// Boolean 생성자 함수
Boolean(0)  //false
Boolean(1)  //true
Boolean(NaN)  //false
Boolean(Infinity)  //true
Boolean('string')  //true
Boolean('')  //false


// !! 부정 논리 연산자
!!'x'  //true
!!''   //false
!!'string'  //true
!!0   //false
!!1   //true