JS : type coercion

타입변환

자바스크립트의 모든 값에는 타입이 있고, 이는 개발자의 의도에 따라 다른 타입으로 바꿀 수 있다. 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 한다.

let str = 10 .toString();
console.log(typeof str); // string

넘버 타입인 10을 .toString() 메서드를 사용해서 타입을 스트링 타입으로 변환한게 그 예가 된다.

반대로 개발자의 의도와 상관 없이 자바스크립트 엔진에 의해서 암묵적으로 타입이 변환하기도 한다.

let str = 10 + '';
console.log(typeof str); // string

넘버타입인 10을 빈문자열과 더하는 연산이 생길때, 자바스크립트 엔진은 10을 문자열 타입으로 암묵적으로 변환한다.

---

둘의 차이점은 전자의 경우 타입을 변환시키겠다는 개발자의 의도가 명백히 코드에 드러난다는 사실이다. 암묵적 타입변환의 경우, 개발자가 의도했는지 아니면 실수에 의해 발생했는지 구분하기 쉽지 않다.
그렇다면, 우리는 암묵적 타입변환을 멀리하고 명시적 타입변환에만 의지해야 하는걸까?
그건 아니다. 자바스크립트 문법을 잘 이해하고, 타입변환의 결과를 예상할 수 있는 개발자에게는
10 .toString() 보다 10 + '' 이 더 간결하고 가독성이 좋다고 느껴질 수 있다.

중요한 점은 코드를 이해할 수 있느냐이다. 이를 위해서 우리는 타입변환의 결과를 정확히 예측할 수 있어야 한다.

암묵적 타입변환

문자열 타입으로 변환

10 + '2' // '102'

위의 + 연산자는 피연산자 중 하나 이상이 문자열이라면, 문자열 연결 연산자로 동작한다.

// Number Type
0 + '' // '0'
NaN + '' // 'NaN'
Infinity + '' // 'Infinity'

// Boolean Type
true + '' // 'true'

// null Type
null + '' // 'null'

// undefined Type
undefined + '' // 'undefined'

// Object Type
({}) + '' // '[object Object]'
Math + '' // '[object Math]'
[] + '' // ''
[10, 20] + '' // '10,20'
(function(){}) + '' // 'function(){}'
Array + '' // 'function Array() { [native code] }'

숫자 타입으로 변환

10 - '2' // 8
5 * '20' // 100
1 / 'one' // NaN

산술 연산자의 피연산자는 모두 숫자 타입으로 변환된다. 단, 피연산자를 숫자 타입으로 변환할 수 없는 경우 표현식의 평가 결과는 NaN이 된다.

'1' > 0 // true

산술 연산자 뿐 아니라, 숫자 타입의 값들을 비교하여 불리언 값을 만드는 비교 연산자 역시 타입 변환을 일으킨다.

+ 단항 연산자의 경우(+ 산술연산자 와는 다르다!), 피연산자가 숫자 타입의 값이 아니면 숫자 타입으로 바꿔버린다.

// String Type
+ '' // '0'
+ '0' // 0
+ 'string' // NaN

// Boolean Type
+true // 1
+false // 0

// null Type
+null // 0

// undefined Type
+undefined // NaN

// Object Type
+{} // NaN
+[] // 0
+[10, 20] // NaN

불리언 타입으로 변환

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

if문이나 for문과같은 제어문, 그리고 삼항연산자의 조건식은 불리언값으로 평가되는 표현식이다. 이들의 평과결과는 암묵적으로 불리언 타입으로 바뀐다.

이때 자바스크립트는 Truthy 와 Falsy 값으로 불리언 타입이 아닌 값들을 구분한다.
Falsy 값

• false
• undefined
• null
• 0, -0
• NaN
• ''

이 값들을 제외한 모든 값들은 Truthy 값이다.

명시적 타입변환

문자열 타입으로 변환

문자열 타입변환 방법으로 3가지가 있다.

1. String 생성자 함수를 new 연산자 없이 호출
2. Object.prototype.toString 메서드 사용
3. 문자열 연결 연산자 이용

1.
String(1) // '1'
String(NaN) // 'NaN'
String(true) // 'true'

2.
(1).toString() // '1'
(true).toString() // 'true'

숫자 타입으로 변환

숫자 타입변환 방법으로 3가지가 있다.

1. Number 생성자 함수를 new 연산자 없이 호출
2. parseInt, parseFloat 함수 (문자열만 숫자로 타입변환 가능)
3. + 단항 연산자 이용
4. * 산술 연산자 이용

불리언 타입으로 변환

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