타입 변환
개발자가 의도적으로 값의 타입을 변환하는 것 : 타입 캐스팅, 명시적 차입 변환
개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입 변환하는 것 : 암묵적 타입 변환, 타입 강제 변환
명시적이든 암시적이든 원시값은 변경 불가능한 값이므로 변경 x
타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것
암묵적 타입 변환
'10' + 2 // 102
5 * '10' // 50
!0 // true자바스크립트 엔진은 문자열 타입 아닌 값을 문자열 타입으로 암묵적 타입 변환 예시
0 + '' // "0"
-0 + '' // "0"
1 + '' // "1"
-1 + '' // "-1"
NaN + '' "NaN"
Infinity + '' // "Infinity"
-Infinity + '' // "-Infinity"
true + '' // "true"
false + '' // "false"
null + '' // "null"
undefined + '' // "undefined"
(Symbol()) + '' // TypeError
({}) + '' // "[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
// + 단항 연산자는 피연산자가 숫자 타입이 아니면 숫자 타입의 값으로 암묵적 타입 변환
+'' // 0
+'0' // 0
+'1' // 1
+'string' // NaN
//블리언
+true // 1
+false // 0
+null // 0
+undefined // NaN
+Symbol() // TypeError
+{} // NaN
+[] // 0
+[10,20] // NaN
+(function(){}) // NaN블리언 타입으로 변환
자바스크립트 엔진은 블리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분
//false로 평가되는 Falsy값
fasle
undefined
null
0,-0
NaN
''(빈 문자열)
//falsy 값 이외에 모든 값은 true로 평가되는 Truthy값명시적 타입 변환
문자열 타입으로 변환
- String 생성자 함수를 new 연산자 없이 호출하는 방법
- Object.prototype.toStrin 메서드를 사용하는 방법
- 문자열 연결 연산자를 이용하는 방법
String(1); // "1"
String(NaN) // "NaN"
(1).toString() // "1"
(NaN).toString() // "NaN"
1 + '' // "1"
NaN + '' // "NaN"숫자 타입으로 변환
- Number 생성자 함수를 new 연산자 없이 호출하는 방법
- ParseInt, ParseFloat 함수를 사용하는 방법(문자열만 가능)
- +단항 산술 연산자를 이용하는 방법
- *산술 연산자를 사용하는 방법
Number('0') // 0
Number(true) // 1
parseInt('0') // 0
ParseFloat('10.53') // 10.53
+'0' // 0
+true // 1
'0' * 1 // 0
true * 1 // 1불리언 타입으로 변환
- Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
- ~ 부정 논리 연산자를 2번 사용하는 방법
Boolean('x') // true
Boolean('') // false
Boolean(0) // false
Boolean(NaN) // false
Bo0lean(Infinity) // true
Boolean(null) // false
Boolean(undefined) // false
Boolean({}) // true
Boolean([]) // true
!!'x' // true
!!'' // false
!!0 // false
!!1 // NaN
!!NaN // false
!!Infinity // true
!!null // false
!!undefined // false
!!{} // true
!![] // true단축 평가
단축 평가 : 논리곱(&&) 연산자와 논리합(||) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환
단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략
| 단 축 평가 표현식 | 평가 결과 |
|---|---|
| true || anything | true |
| false || anything | anything |
| true || anything | anything |
| false && anything | false |
'Cat' && 'Dog' // 'Dog'
'Cat' || 'Dog' // 'Cat'
// 어떤 조건이 Truthy 값일 때 무언가를 평가해야한다면 &&연산자 표현식으로 if문 대체
let done = true;
let message = '';
if (done) message = '완료'
message = done && '완료';
// 어떤 조건이 Falsy 값일 때 무언가를 평가해야한다면 ||연산자 표현식으로 if문 대체
let done = false;
let message = '';
if (!done) message = '미완료'
message = done || '완료';단축 평가는 다음 상황에 유용
-
객체를 가르키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조
let elem = null let value = elem.value // TypeError발생 let elem = null let value = elem && elem.value // null -
함수의 매개변수에 기본값을 설정할 때
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
옵셔널 체이닝 연산자
ES11에서 도입된 옵셔널 체이닝 연산자는 ?.는 좌항에 피연산자가 null 또는 undefined인 경우 undefined 반환
그렇지 않으면 우항의 프러퍼티 참조
let str = ''
let length = str && str.length
console.log(length) // ''
let str = ''
let length = str?.length
console.log(length) // 0null 병합 연산자
ES11에 도입된 null 병합 연산자 ?? 는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환 그렇지 않으면 좌항의 피연산자 반환
변수의 기본값을 설정 할 때 기본값을 설정할 때 유용
let a = null ?? "defalt string"
console.log(a) // "defalt string"
let a = '' || 'defalt string'
// 변수의 기본값 설정 단 Falsy값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작 발생
let a = '' ?? 'defalt string' // null, undefined가 아니면 Falsty값이라도 좌항 그대로 반환