타입 변환이란?
값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다.
개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입변환 또는 타입 캐스팅이라 한다.
개발자자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것을 암묵적 타입 변환 또는 타입 강제 변환이라 한다.
원시 값은 변경 불가능한 값이므로 변경할 수 없다. 타입 변환이란 기존 원시 값을 사요해 다른 타입의 새로운 원시값을 생성하는 것이다.
암묵적 타입 변환
자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환할 때가 있다.
문자열 타입으로 변환
1 + '2'; // '12'
`1 + 1 = ${1 + 1}`; // '1 + 1 = 2'숫자 타입으로 변환
1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 한다.
자바스크립트 엔진은 산술 연산자 표현식을 평가하기 위해 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다. 이때 피연산자를 숫자 타입으로 변환할 수 없는 경우는 NaN으로 평가 한다.
'1' > 0 // true비교 연산자는 피연산자의 크기를 비교하므로 모든 피연산자는 코드의 문맥상 모두 숫자 타입이어야 한다.
마찬가지로 암묵적 타입 변환한다.
+'' // 0
+'0' // 0
+'string' // NaN
+true // 1
+false // 0
+null // 0
+{} // NaN
+[] // 0
+[10,20] // NaN
+(function(){}) // NaN+단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환을 수행한다.
객체와 빈 배열이 아닌 배열, undefined는 NaN이 된다.
불리언 타입으로 변환
if('') console.log('1'); // x
if(true) console.log('1') // o
if(0) console.log('1') // x
if('str') console.log('1') // o제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 Truthy값은 true로 Falsy 값은 false로 평가된다.
아래 값들은 false로 평가되는 Falsy 값이다. 이외에 값들은 모두 Truthy 값이다.
false undefined null 0 -0 NaN ‘’
명시적 타입 변환
개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입변환 또는 타입 캐스팅이라 한다.
문자열 타입변환
String( ), toString( ), + ’ ’ 을 통해 문자열로 타입 변환이 가능하다.
String(1) // '1'
String(NaN) // 'NaN'
(1).toString() // '1'
(NaN).toString() // 'NaN'
1 + '' // '1'
NaN + '' // 'NaN'숫자 타입으로 변환
Number( ), parseInt, parseFloat, + 단항 산술 연산자, * 산술 연산자를 통해 숫자 타입 변환이 가능하다.
Number('0') // 0
Number(false) // 0
parseInt('-1') // -1
parseInt('10.53') // 10.53불리언 타입으로 변환
Boolean( ), ! 부정 논리 연산자 두 번 사용 를 통해 불리언 타입으로 변환 가능하다.
Boolean('x') // true
Boolean(null) // false
Boolean(0) // false
Boolean([]) // true
!!'1' // true
!!null // false
단축 평가
단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.
논리 연산자를 사용한 단축 평가
true || anything // true
false || anything // anything
true && anything // anything
false && anything // false옵셔널 체이닝 연산자
옵셔널 체이닝 연산자 ?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티를 참조한다.
var elem = null;
var value = elem?.value;
console.log(value); undefinednull 병합 연산자
null 병합 연산자 ?? 는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
변수에 기본값을 설정할 때 유용하다.
var foo = null ?? 'hello';
console.log(foo) // 'hello'