[Javascript] 9장 타입 변환 (deep dive)

 

타입 변환

• 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 혹은 타입 캐스팅이라 한다.
• 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 변환 되는 것을 암묵적 타입 변환 혹은 타입 강제 변환이라 한다.
• 명시적 타입 변환이나 암묵적 타입 변환 모두 기존의 값을 직접 병경하는 것은 아니다. 기존 값을 사용해 다른 타입의 새로운 값을 생성하는 것이다.

 

암묵적 타입 변환

1. 문자열 타입으로 변환

• + 연산자는 연산자 파트에서 보았듯이 피연산자 중 하나 이상이 문자열이면 문자열 연결 연산자로 동작한다.
• 템플릿 리터럴 또한 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환을 한다.

// 템플릿 리터럴
`1 + 1 = ${1 + 1}` // "1 + 1 = 2"

// 숫자 타입
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] }"

 

2. 숫자 타입으로 변환

• 산술연산자의 피연산자는 모두 숫자 타입이어야 하기 때문에 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다.
• 비교 연산자의 피연산자는 모두 숫자 타입이어야 하기 때문에 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다.

// 비교연산자
'1' > 0 	// true

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

// 불리언 타입
+true		// 1
+false		// 0

// null 타입
+null		// 0

//undefined 타입
+undefined	// NaN

// 심벌 타입
+Symbol()	// TypeError: Cannot convert a Symbol value to a number

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

 

3. 불리언 타입으로 변환

• 자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환한다.
• 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다.
• Falsy 값 : false, undefined, null, 0, -0, NaN, ''(빈 문자열)
• Truthy 값 : Falsy 값을 제외한 모든 값

// 아래의 조건문은 모두 코드 블록을 실행한다.
if (!false)	console.log(false + ' is falsy value');
if (!undefined)	console.log(undefined + ' is falsy value');
if (!null)	console.log(null + ' is falsy value');
if (!0)		console.log(0 + ' is falsy value');
if (!NaN) 	console.log(NaN + ' is falsy value');
if (!'')	console.log('' + ' is falsy value');

 

명시적 타입 변환

1. 문자열 타입으로 변환

• String 생성자 함수를 new 연산자 없이 호출하는 방법
• Object.prototype.toString 메서드를 사용하는 방법
• 문자열 연결 연산자를 이용하는 방법 (암묵적 타입 변환)

// String 생성자 함수를 new 연산자 없이 호출하는 방법.
String(1);		// "1"
String(NaN);		// "NaN"
String(Infinity)	// "Infinity"
String(true)		// "true"
String(false)		// "false"

// Object.prototype.toString 메서드를 사용하는 방법
(1).toString();		// "1"
(NaN).toString();	// "NaN"
(Infinity).toString();	// "Infinity"
(true).toString();	// "true"
(false).toString();	// "false"

// 문자열 연결 연산자를 이용하는 방법 (암묵적 타입 변환을 이용)
1 + '';			// "1"
NaN + '';		// "NaN"
Infinity + '';		// "Infinity"
true + '';		// "true"
false + '';		// "false"

 

2. 숫자 타입으로 변환

• Number 생성자 함수를 new 연산자 없이 호출하는 방법
• parseInt.parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
• + 단항 산술 연산자를 이용하는 방법
• * 산술 연산자를 이용하는 방법

// Number 생성자 함수를 new 연산자 없이 호출하는 방법
Number('0');		// 0
Number('-1');		// -1
Number('10.53');	// 10.53
Number(true);		// 1
Number(false);		// 0

// parseInt, parseFloat 함수를 사용하는 방법
parseInt('0')		// 0
parseInt('-1')		// -1
parseFloat('10.53'); 	// 10.53

// + 단항 산술 연산자를 이용하는 방법
+'0';			// 0
+'-1';			// -1
+'10.53'		// 10.53
+true;			// 1
+false;			// 0

// * 산술 연산자를 이용하는 방법
'0' * 1;		// 0
'-1' * 1;		// 1
'10.53' * 1;		// 10.53
true * 1;		// 1
false * 1;		// 0

 

3. 불리언 타입으로 변환

• Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
• ! 부정 논리 연산자를 두번 사용하는 방법

// Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
Boolean('x');		// true
Boolean('');		// false
Boolean('false')	// true
Boolean(0);		// false
Boolean(1);		// true
Boolean(NaN);		// false
Boolean(null);		// false
Boolean(undefined); 	// false

// ! 부정 논리 연산자를 두 번 사용하는 방법
!!'x'			// true
!!''			// false
!!'false'		// true
!!0			// false
!!1			// true
!!NaN			// false
!!null			// false
!!undefined		// false