타입 변환과 단축 평가02 - 암묵적 타입 변환

"타입 변환과 단축 평가"

 

2. 암묵적 타입 변환

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

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

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

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

이처럼 표현식을 평가할 때 코드의 문맥에 부합하지 않는 다양한 상황이 발생할 수 있다. 이때 자바스크립트는 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식을 평가한다.

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

 

2.1. 문자열 타입으로 변환

1 + '2' // '12'

위 예제의 + 연산자는 피연산자 중 하나 이상의 문자열이므로 문자열 연결 연산자로 동작한다. 문자열 연결 연산자의 역할은 문자열 값을 만드는 것이다.

 

연산자 식의 피연산자(피연산자도 표현식이다) 만이 암묵적 타입 변환의 대상이 되는 것은 아니다. 앞서 언급했듯이 자바스크립트 엔진은 표현식을 평가할 때 코드 문맥에 부합하도록 암묵적 타입 변환을 실행한다.

 

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

console.log(`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

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

 

2.2. 숫자 타입으로 변환

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

피연산자를 숫자 타입으로 변환해야 할 문맥은 산술 연산자 뿐만 아니다. 아래 예제를 살펴보자.

'1' > 0		//true

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

 

자바스크립트 엔진은 숫자 타입 아닌 값을 숫자 타입으로 암묵적 타입 변환을 수행할 때 아래와 같이 동작한다. + 단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환을 수행한다.

// 문자열 타입
+''			// 0
+'0';			// 0
+ '1';			//1
+ 'string'		//NaN

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

// null 타입
+null			// 0

// undefined 타입
+undefined		// NaN

// 심볼 타입
+Symbol()		// TypeError: Cannot convert a Symbol value to a number

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

 

2.3. 불리언 타입으로 변환

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

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

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

이때 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 인식할 값) 또는 Falsy 값(거짓으로 인식할 값)으로 구분한다. 즉, truthy 값은 true로, Falsy 값은 false로 변환된다.

아래 값들은 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 false로 평가되는 Falsy 값이다.

• false
• undefined
• null
• 0, -0
• NaN
• "(빈문자열)