JS (9) - 타입 변환과 단축 평가

9.1 타입 변환이란 ?

- 명시적 타입 변환, 타입 캐스팅

: 의도적으로 값의 타입을 변환는 것

var x = 10;

var str = x.toString();
console.log(typeof str, str); // string 10

console.log(typeof x, x); // number 10

- 암묵적 타입 변환, 타입 강제 변환

: 의도와 상관없이 표현식을 평가하는 도중 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환

var x = 10;

var str = x + '';
console.log(typeof str, str); // string 10

console.log(typeof x, x); // number 10

---

9.2 암묵적 타입 변환

의도와 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제변환

- 문자열 타입으로 변환

// number 타입
0 + '' 				// "0"
-0 + ''				// "0"
1 + ''				// "1"
-1 + ''				// "1"
NaN + ''			// "NaN"
Infinity + ''		// "Infinity"
-Infinity + ''		// "Infinity"

// boolean 타입
true + ''			// "true"
false + ''			// "false"

// null 타입
null + ''			// "null"

// undefined 타입
undefined + '' 		// "undefined"

// symbol 타입
(Symbol()) + ''		// TypeError 

// object 타입
({}) + ''			// "[object Object]"
Math + ''			// "[object Math]"
[] + ''				// ""
[10, 20] + ''		// "10, 20"
(function(){}) + ''	// "function(){}"
Array + ''			// "function Array(){[native code]}"

- 숫자 타입으로 변환

// 문자열 타입
+ ''				// 0
+ '0'				// 0
+ '1'				// 1
+ 'string'			// NaN

// boolean 타입
+ true				// 1
+ false				// 0

// null 타입 
+ null				// 0

// undefined 타입
+ undefined 		// NaN

// Symbol 타입
+ Symbol() 			// TypeError

// Object 타입
+ {}				// NaN
+ []				// 0
+ [10, 20]			// NaN
+ (function(){})	// NaN

- Boolean 타입으로 변환

• Truthy 값
  Boolean 타입이 아닌 값 중 참으로 평가되는 값
• Falsy 값
  Boolean 타입이 아닌 값 중 거짓으로 평가되는 값
  Ex]
  false, undefined, null, 0, -0, NaN, ''(빈 문자열)

---

9.3 명시적 타입 변환

개발자의 의도에 따라 명시적으로 타입 변경

- 문자열 타입으로 변환

• 방법

1. String 생성자 함수를 new 연산자 없이 호출
2. Object.prototype.toString 매서드 사용
3. 문자열 연결 연산자 사용

// 1. String 생성자 함수 사용
String(1);				// "1"
String(NaN);			// "NaN"
String(true);			// "true"

// 2. toString 매서드 사용
(1).toString();			// "1"
(NaN).toString();		// "NaN"
(true).toString();		// "true"

// 3. 문자열 연결자 사용
1 + '';					// "1"
NaN + '';				// "NaN"
true + '';				// "true"

- 숫자 타입으로 변환

• 방법

1. Number 생성자 함수를 new 연산자 없이 호출
2. parseInt, parseFloat 함수 사용 (문자열만 변환 가능)
3. + 단항 산술 연산자 이용
4. * 산순 연산자 이용

// 1. Number 생성자 함수 사용
Number('1');			// 1
Number('10.53');		// 10.53
Number(true);			// 1

// 2. parseInt, parseFloat 함수 사용
parseInt('0');			// 0
parseInt('-1');			// -1
parseFloat('10.53');	// 10.53

// 3. + 단항 산술 연산자 사용
+ '0';					// 0
+ '-1';					// -1
+ true;					// 1

// 4. * 산술 연산자 사용
'0' * 1;				// 0
'-1' * 1;				// -1
true * 1;				// 1
false * 1;				// 0

- Boolean 타입으로 변환

• 방법

1. Boolean 생성자 함수를 new 연산자 없이 호출
2. ! 부정 논리 연산자를 두 번 사용

// 1. Boolean 생성자 함수 사용
Boolean('x');			// true
Boolean('');			// false
Boolean('false');		// true
Boolean(0);				// false
Boolean(NaN);			// false
Boolean(Infinity);		// true
Boolean({});			// true
Boolean([]);			// true

// 2. ! 부정 논리 연산자를 두 번 사용
!!'x';					// true
!!'';					// false
!!'false';				// true
!!0;					// false
!!NaN;					// false
!!Infinity;				// true
!!{};					// true
!![];					// true

---

9.4 단축 평가

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

true || anything 	// true
false || anything	// anything
true && anything	// anything
false && anything	// false

'Cat' || 'Dog'		// "Cat"
false || 'Dog'		// "Dog"
'Cat' || false		// "Cat"

'Cat' && 'Dog'		// "Dog"
false && 'Dog'		// false
'Cat' && false		// false

- 옵셔널 체이닝 연산자

?. 연산자
좌항이 null 또는 undefined인 경우, undefined 반환
그렇지 않으면 우항 반환

var elem = null;

var value = elem?.value;
console.log(value) 		// undefined

- null 병합 연산자

?? 연산자
좌항이 null 또는 undefined인 경우, 우항 반환
그렇지 않으면 좌항 반한

var foo = null ?? 'default string';
console.log(foo) 		// default string