09장 타입 변환과 단축 평가
9.1 타입 변환이란?
자바스크립트의 모든 값은 타입이 있다. 값에 대한 타입의 변환은 크게 2가지로 나눠지는데 개발자가 의도적으로 값의 타입을 변환하는 것과 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환하는 것이다. 전자는 명시적 타입 변환(explicit coercion) 또는 타입 캐스팅(type casting), 후자는 암묵적 타입 변환(implicit coercion) 또는 타입 강제 변환(type coercion)이라고 한다.
// 명시적 타입 변환
var x = 10;
// 숫자를 문자열로 타입 캐스팅 한다
var str = x.toString();
console.log(typeof str, str); // string 10
// x변수의 값이 변경된 것은 아니다
console.log(typeof x, x); // number 10// 암묵적 타입 변환
// 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다
var x = 10;
var str = x + '';
console.log(typeof str, str); // string 10
// x변수의 값이 변경된 것은 아니다
console.log(typeof x, x); // number 10암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아니다. 자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다.
9.2 암묵적 타입 변환
9.2.1 문자열 타입으로 변환
1 + '2' // "12"위 예제의 + 연산자는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작한다. 문자열 연결 연산자의 역할은 문자열 값을 만드는 것이다. 따라서 문자열 연결 연산자의 모든 피연산자는 코드의 문맥상 모두 문자열 타입이어야 한다
자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가하기 위해 문자열 연결 연산자의 피연산자 중에서 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환한다.
자바스크립트 엔진은 문자열 타입 아닌 값을 문자열 타입으로 암묵적 타입 변환을 수행할 때 다음과 같이 동작한다.
// 숫자 타입
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] }"9.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빈 문자열(''), 빈 배열([]), null, false 는 0으로, true는 1로 변환된다. 객체와 빈 배열이 아닌 배열, undefined는 변환되지 않아 NaN이 된다는 것에 주의하자.
9.2.3 불리언 타입으로 변환
if 문이나 for 문과 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값, 즉 논리적 참/거짓으로 평가되어야 하는 표현식이다. 자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환한다.
if('') console.log('1'); // '' -> false
if(true) console.log('2'); // true -> true
if(0) console.log('3'); // 0 -> false
if('str') console.log('4'); // 'string' -> true
if(null) console.log('5'); // null -> false
// 2 4자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다.
- Falsy data list
- false
- undefined
- null
- 0,-0
- Nan
- ''(빈 문자열)
Falsy 값 외의 모든 값은 모두 true로 평가되는 Truthy 값이다.
9.3 명시적 타입 변환
- 문자열 타입으로 변환 방법
- String();
- .toStirng();
- +(문자열 연결 연산자)
- 숫자 타입으로 변환 방법
- Number();
- parseInt(); , parseFloat();
- +(단항 산술 연산자)
- *(산술 연산자)
- 불리언 타입으로 변환 방법
- Boolean();
- !!
9.4 단축 평가
'Cat' && 'Dog' // -> "Dog"
'Cat' || 'Dog' // -> "Cat"- 논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다.
첫 번째 피연산자 'Cat'(문자열)은 Truthy 값이므로 true로 평가된다. 하지만 이 시점까지는 위 표현식을 평가할 수 없다. 두 번째 피연산자까지 평가해 보아야 위 표현식을 평가할 수 있다. 다시 말해, 두 번째 피연산자가 위 논리곱 연산자 표현식의 평가 결과를 결정한다. 이 때 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번재 피연산자, 즉 문자열 'Dog'를 그대로 반환한다. - 논리합(||) 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다.
첫 번째 피연산자 'Cat'(문자열)은 Truthy 값이므로 true로 평가된다. 이 시점에서 두 번째 피연산자까지 평가해 보지 않아도 위 표현식을 평가할 수 있다. 이때 논리합 연산자는 논리 연산의 결과를 결정한 첫 번재 피연산자, 즉 문자열 'Cat'을 그대로 반환한다. - 논리곱(&&) 연산자와 논리합(||) 연산자는 이처럼 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 이를 단축평가(short-circuit evaluation)라 한다.
true || anything // true
false || anything // anything
true && anything // anything
false && anything // false