Type Coercion (타입 변환)

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 네 번째인 Implicit, Explicit 항목을 공부하면서 간단하게 작성한 글이다.

 

Type Coercion (타입 변환) 이란 한 데이터 타입에서 다른 데이터 타입으로 변환하는 것을 얘기한다. 타입 변환은 두 가지 방법으로 할 수 있다.

Implicit Coercion (암시적 변환)

암시적 변환이란 자바스크립트가 자동적으로 예상되는 타입으로 변환하는 것이다. 주로 서로 다른 타입의 데이터들을 연산 할 때 발생한다.

console.log(5 - '2'); // 3
console.log(5 - true); // 4
console.log(5 + '3'); // '53' -> '+' 연산자는 string 타입으로 변환 후 합친다.

산술 연산자 ('-', '*', '/', '%')를 할 때 피연산자가 number 타입이 아니고 다른 타입이면 자동으로 number 타입으로 변환시킨 후 계산을 한다. 여기서 Boolean 타입도 number 타입으로 변환이 되는데 true는 1, false는 0이다.

 

예외로 '+' 연산자는 다르게 동작한다. '+' 연산자는 두 가지 의도로 사용할 수 있는데, 하나는 두 개의 number를 더하거나 두 개의 string을 합치는 거다. 자바스크립트에서는 서로 다른 타입의 피연산자를 더할 때 두 개의 string을 합치는 것으로 간주한다.

 

if 문에서 Boolean 타입의 데이터를 사용하는데 false로 변환되는 값은 7가지가 있다.

 

• false
• 0
• -0
• null
• undefined
• NaN
• ""

그 외의 값들은 모두 true로 변환된다.

if(undefined){
	console.log("true");
} else {
	console.log("false");
}

//false 출력

Object도 변환이 되는데 다음과 같은 과정을 거친다.

1. 먼저 Object의 valueOf 메서드를 호출해서 Primitive 타입을 반환하면 그 값으로 변환한다.
2. 만약 아니라면 toString 메서드를 호출해서 Primitive 타입을 반환하면 그 값으로 변환한다.
3. 만약 아니라면 에러를 출력한다.

const a = {id: 1};
console.log(a.valueOf()); // {} -> Primitive 타입이 아니다.
console.log(a.toString()); // '[object Object]' -> Primitive 타입이다.
console.log(a + 1); // 그러므로 '[object Object]1'이 출력된다.

a.valueOf = function(){ return 5; };
console.log(a.valueOf()); // 5 -> Primitive 타입이다.
console.log(a + 1); // 그러므로 6이 출력된다.

const b = [1, 2, 3];
console.log(b.valueOf()); // [1, 2, 3] -> Primitive 타입이 아니다.
console.log(b.toString()); // '1,2,3' -> Primitive 타입이다.
console.log(b + 5); // 그러므로 '1,2,35'가 출력된다.

Explicit Coercion (명시적 변환)

명시적 변환이란 개발자가 의도를 가지고 데이터 타입을 변환하는 것이다.

Number('111'); // 111
String(200); // '200'
Boolean(1111); // true
Boolean(null); // false