모던 자바스크립트 | 암묵적 타입 변환

암묵적 타입 변환

---

자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환(암묵적 타입 변환)할 때 가 있다.

// 피연산자가 모두 문자열 타입이어야 하는 문맥
'10' + 2 // -> '102'

// 피연산자가 모두 숫자 여야 하는 문맥
5 * '10' // -> 50

// 피연산자 또는 표현식이 불리언 타입이어야 하는 문맥
!0 // -> true
if(1){}

표현식을 평가할 때 코드의 문맥에 부합하지 않는 다양한 상황이 발생 할 수 있다.

자바스크립트에선 에러를 발생하지 않도록 암묵적 타입 변환을 통해 표현식을 평가한다. (쓰레기 언어네)

암묵적 타입 변환이 발생하면 문자,숫자,불리언 과 같은 원시 타입 중 하나로 타입이 자동 벼환한다.

문자열 타입으로 변환

1 + '2' // '12'

• 연산자는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작한다.문자열이므로 문자열 연결 연산자로 동작한다. 문자열 연결 연산자의 역할은 문자열 값을 만드는 것이다. 따라서 문자열 연결 연산자의 모든 피연산자는 모두 문자열 타입이어야 한다.

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

연산자 표현식의 피연산자(피연산자도 표현식이다)만이 암묵적 타입 변환의 대상이 되는 것이 아니다.

`1 + 1 = ${1 + 1}` // -> '1 + 1 = 2'

자바스크립트 엔진은 문자열 타입이 아닌 값을 문자열 타입으로 암묵적 타입 변환을 수행할 때 다음과 같이 동작한다.

// 숫자 타입
0 + '' // '0'
-0 + '' // '0'
1 + '' // '1'
-1 + '' // '-1'
NaN + '' // 'NaN'
Infinity + '' // -> 'Infinity'
-Infinity + '' // -> '-Infinity'

// 불리언 타입
true + '' // 'true'
false + ''// 'false'

// null 타입
null + '' // 'null'

// undefined 타입
undefined + '' // 'undefined'

// 심벌 타입
(Symbol()) + '' // TypeError: Cannot convert a Symbol value to a string  at <anonymous>:1:12

// 객체 타입
({}) + '' // '[object Object]'
Math + '' // '[object Math]'
[] + '' // ''
[10, 20] + '' // '10 , 20'
(function(){}) + '' // 'function(){}'
Array + '' // 'function Array(){ [native code] }'

숫자 타입으로 변환

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

위 예제에서 사용 된 연산자는 산술 연산자이다. 산술 연산자의 역할은 숫자 값을 만드는 것이다. 따라서 산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 한다.

자바스크립트는 산술 연산자 표현식을 평가하기 위해 산술 연산자의 피연산자 중 숫자 타입이 아닌 경우 피연산자를 숫자 타입으로 암묵적 타입 변환을 한다.

이때 피연산자를 숫자 타입으로 변환을 할 수 없는 경우 산술 연산을 수행 할 수 없어 결과는 NaN이 나오게 된다.

'1' > 0 // true

비교 연산자의 역할은 불리언 값을 만드는 것이다. > 비교 연산자는 피연산자의 크기를 비교하므로 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 한다. 자바스크립트는 비교 연산자 표현식을 평가하기 위해 비교 연산자의 피연산자 중 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적으로 타입 변환을 한다.

자바스크립트는 숫자 타입이 아닌 값을 숫자타입으로 암묵적 변환을 수행할 때,

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

//문자열 타입
+'' // 0
+'0' // 0
+'1' // 1
+strung // NaN

//불리언 타입
+true // 1
+false // 0

// null 타입
+null // 0

// undefined 타입
+undefined // NaN

// 심벌타입
+Symbol() // TypeError: Cannot convert a Symbol value to a number  at <anonymous>:1:12

// 객체 타입
+{} // NaN
+[] // 0
+[10,20] // NaN
+(function(){}) // NaN

빈 문자열(’’) , 빈 배열([]), null , false 는 0 으로, true는 1 로 변환한다. 객체와 빈 배열이 아닌 배열 undefined는 변환되지 않아 NaN이 된다는 것에 주의하자.

불리언 타입으로 변환

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

if문이나 for문과 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값, (참/거짓)으로 되어야 하는 표현식이다. 자바스크립트는 평가 결과를 불리언 타입으로 암묵적 타입 변환이 되어야 한다.

if('') console.log('1');
if(true) console.log('2');
if(0) console.log('3');
if('str') console.log('4');
if(null) console.log('5');

// '2'
// '4'

불리언으로 평가되는 값이 아닌 타입의 값들을 평가 했을 경우엔 그 값들에 따라 true/ false 로 암묵적 타입 변환을 한다.