9.1 타입 변환이란?

• 명시적 타입변환(타입 캐스팅): 개발자가 의도적으로 값의 타입을 변환
• 암묵적 타입변환(타입 강제 변환): 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환

원시 값은 변경이 불가능한 값이기 때문에 직접 변경하는 것은 아니다. 타입 변환이란 기존 원시 값을 사용해 다른 타이브이 새로운 원시 값을 생성하는 것이다.

9.2 암묵적 타입 변환

9.2.1 문자열 타입 변환

'+' 연산자는 피연산자 중 하나 이상이 문자열일 때 문자열 연결 연산자로 동작한다.

0 + '' 				 // "0"
-1 + '' 			 // "-1"
NaN + ''  		     // "NaN"
true + '' 			 // "true"
null + '' 			 // "null"
Math + '' 			 // "[object Math]"
[] + '' 			 // ""
[10, 20] + '' 		 // "10, 20"
(function(){}) + ''  // "function(){}"

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

9.2.2 숫자 타입으로 변환

'-', '*', '/' 모두 산술 현산자다.
피연산자를 숫자 타입으로 변환할 수 없는 경우는 NaN이 된다.

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

또한 비교 연산자는 피연산자의 크기를 비교하기 때문에 숫자 타입으로 암묵적 타입 변환이 된다.

'1' > 0  // true

'+' 단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환을 한다.

+'' 			 // 0
+'1' 			 // 1
+'string'		 // NaN
+false			 // 0
+null			 // 0
+undefined		 // NaN
+Symbol			 // TypeError
+{}				 // NaN
+[]				 // 0
+[10, 20]		 // NaN

9.2.3 불리언 타입으로 변환

논리적 참/거짓으로 평가되어야 하는 표현식(if문, for문, 삼항 조건 연산자 등)에서는 불리언 타입으로 암묵적 타입 변환이 된다.

• false, undefined, null, 0, -0, NaN, ''는 false로 평가된다.

9.3 명시적 타입 변환

9.3.1 문자열 타입으로 변환

1. String 생성자 함수 사용

String(1);   // "1"
String(NaN); // "NaN"

2. toString 메서드 사용

(1).toString();   // "1"
(NaN).toString(); // "NaN"

3. 문자열 연결 연산자 이용

1 + '' 	 // "1"
NaN + '' // "NaN"

9.3.2 숫자 타입으로 변환

1. Number 생성자 함수 사용

Number("1");   // 1
Number(true);  // 1

2. parseInt, parseFloat 함수 사용

parseInt('0');   	  // 0
parseFloat('10.35');  // 10.35

3. '+' 단항 산술 연산자 사용

+'' 			 // 0
+'string'		 // NaN

4. '*' 산술 연산자 사용

'10' * 1  	// 10
true * 1  	// 1

9.3.3 불리언 타입으로 변환

1. Boolean 생성자 함수 사용

Boolean("1"); // true
Boolean('');  // false

2. ! 부정논리 연산자를 두 번 사용

!!'x'; 		// true
!!'false';  // true
!!0;  		// false
!!NaN;  	// false
!!{}; 		// true

9.4 단축 평가

9.4.1 논리 연산자를 사용한 단축 평가

단축 평가: 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것

'Cat' && 'Dog'  // 'Dog'
'Cat' || 'Dog'  // 'Cat'

논리곱(&&): 두 개의 피연산자가 모두 true로 평가될 때 true를 반환

• 논리 연산의 결과를 결정하는 두 번째 피연산자, 즉 문자열 'Dog'를 그대로 반환

논리합(||): 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환

• 논리 연산의 결과를 결정한 첫 번째 피연산자, 즉 문자열 'Cat'를 그대로 반환

단축 평가는 if문을 대체하여 사용 가능하다.

var done = 'true';
var message = '';

// 1. 조건문 사용
if (done) message = 'success';

// 2. 단축 평가 사용 -> done이 true라면 success를 할당
message = done && 'success';

console.log(message); // success

객체의 프로퍼티 값을 참조할 때도 사용한다.

var elem = null;

var value = elem && elem.value;  // elem이 false기 때문에 elem값 출력 -> null

9.4.2 옵셔널 체이닝 연산자

연산자 ?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

var elem = null;

var value = elem?.value;  // undefined

9.4.3 null 병합 연산자

null 병합 연산자 ?? 는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 아니면 좌항의 피연산자를 반환한다. (변수에 기본값을 설정할 때 유용)

var elem = null ?? 'default string';

console.log(elem);  // 'default string'