제어문 (08)은 기본적인 내용이고, 새롭게 알게 된 내용이 없었으니 건너뛰도록 한다.
타입 변환
- 타입 변환이란, 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것
var x = 10;
// 명시적 타입 변환
// 숫자를 문자열로 타입 캐스팅한다.
var str = x.toString();
console.log(typeof str, str); // string 10
// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10-
위 예제의 경우 JS 엔진은 표현식 x + ''를 평가하기 위해 x 변수의 숫자 값을 바탕으로 새로운 문자열 값 '10'을 생성하고 이것으로 표현식 '10' + ''를 평가한다.
-
즉, 암묵적 타입 변환은 기존 변수가 값을 재할당하여 변경하는 것이 아니다. JS엔진은 표현식을 에러 없이 평가하기 위해 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한번 사용하고 버린다.
암묵적 타입 변환
// 피연산자가 모두 문자열 타입이어야 하는 문맥
'10' + 2 // -> '102'
// 피연산자가 모두 숫자 타입이어야 하는 문맥
5 * '10' // -> 50
// 피연산자 또는 표현식이 불리언 타입이어야 하는 문맥
!0 // -> true
if (1) { }문자열 타입으로 변환
1 + '2' // -> "12"-
위 예제의 +연산자는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작한다.
-
JS엔진은 이를 표혆기 위해 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환한다.
// 숫자 타입
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] }"숫자 타입으로 변환
1 - '1' // -> 0
1 * '10' // -> 10
1 / 'one' // -> NaN-
산술 연산자의 역할은 숫자 값을 만드는 것.
-
따라서 산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자타입이어야 한다.
'1' > 0 // -> true- 비교 연산자 >는 피연산자의 크기를 비교하므로 JS엔진은 피연산자 중에서 숫자 타입이 아닌 값을 숫자 타입으로 암묵적 타입 변환한다.
// 문자열 타입
+'' // -> 0
+'0' // -> 0
+'1' // -> 1
+'string' // -> NaN
// 불리언 타입
+true // -> 1
+false // -> 0
// null 타입
+null // -> 0
// undefined 타입
+undefined // -> NaN
// 심벌 타입
+Symbol() // -> ypeError: Cannot convert a Symbol value to a number
// 객체 타입
+{} // -> NaN
+[] // -> 0
+[10, 20] // -> NaN
+(function(){}) // -> NaN' ', [ ], null, false는 0으로, true는 1로 변환된다.
객체와 요소가 있는 배열, undefined는 변환되지 않아 NaN이 된다.
if ('') console.log('1'); // false
if (true) console.log('2'); // true
if (0) console.log('3'); // false
if ('str') console.log('4'); // true
if (null) console.log('5'); // false
// 2 4단축평가 - 함수 매개변수에 기본값을 설정할 때
// 단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str) {
str = str || '';
return str.length;
}
getStringLength(); // -> 0
getStringLength('hi'); // -> 2
// ES6의 매개변수의 기본값 설정
function getStringLength(str = '') {
return str.length;
}
// 유용하게 쓰일듯 하다.
getStringLength(); // -> 0
getStringLength('hi'); // -> 2- 함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다. 이 때 단축 평가를 사용해 매개변수의 기본값을 설정하면 undefined로 인해 발생할 수 있는 에러를 방지할 수 있다.
