1. 타입 변환이란?
-
자바스크립트의 모든 값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다.
-
개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다.
let x = 10;
// 명시적 타입 변환
let str = x.toString();
console.log(typeof str, str); // string 10
// 변수 x의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10- 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되는 것을 암묵적 타입 변환 또는 타입 강제 변환이라고 한다.
let x = 10;
// 암묵적 타입 변환
// 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다.
let str = x + '';
console.log(typeof str, str); // string 10
// 변수 x의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 102. 암묵적 타입 변환(implicit type conversation)
-
자바스크립트는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용한다. 즉, 문자열 값이 오길 기대하는 곳에 숫자가 오더라도 자바스크립트는 알아서 숫자를 문자열로 변환하여 사용한다.
-
암묵적 타입 변환이 발생하면 문자열, 숫자 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다.
// 피연산자가 모두 문자열 타입이어야 하는 문맥
'10' + 2 // '102'
// 피연산자가 모두 숫자 타입이어야 하는 문맥
5 + '10' // 50
// 피연산자 또는 표현식이 불리언 타입이어야 하는 문맥
!0 // true
if (1) { }1) 문자열 타입으로 변환
- 자바스크립트 엔진은 문자열 타입이 아닌 값을 문자열 타입으로 암묵적 타입 변환을 수행할 때 아래와 같이 동작한다. 즉,
+연산자는 피연산자 중 하나 이상이 문자열일 경우 문자열 연산자로 동작한다.
// 숫자 타입
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] }'
// 템플릿 리터럴
'1 + 1 = ${1 + 1}' // '1 + 1 = 2'2) 숫자 타입으로 변환
- 자바스크립트 엔진은 산술 연산자 표현식을 평가하기 위해 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다. 이때 피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 표현식의 평가 결과는
NaN이 된다.
1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN- 또한, 비교 연산자 표현식을 평가하기 위해 비교 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자도 숫자 타입으로 암묵적으로 변환한다.
'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(){}) // NaN3) 불리언 타입으로 변환
- 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다. 즉, 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 Truthy 값을
true로, Falsy 값은false로 암묵적 타입 변환한다.
// 전달받은 인수가 Falsy 값이면 true, Truthy 값이면 false를 반환한다.
function isFalsy(value) {
return !value;
}
// 전달받은 인수가 Truthy 값이면 true, Falsy 값이면 false를 반환한다.
function isFalsy(value) {
return !!value;
}
// 모두 true를 반환한다.
isFalsy(false);
isFalsy(undefined);
isFalsy(null);
isFalsy(0);
isFalsy(NaN);
isFalsy('');
isTruthy(true);
isTruthy('0'); // 빈 문자열이 아닌 문자열은 Truthy 값이다.
isTruthy({});
isTruthy([]);3. 명시적 타입 변환(explicit type conversation)
-
명시적 타입 변환이란 개발자가 의도적으로 타입 변환을 하는 것을 말한다.
-
표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하는 방법과 내장 메서드를 사용하는 방법, 암묵적 타입 변환을 이용하는 방법이 있다.
1) 문자열 타입으로 변환
1-1. String() 생성자 함수
String생성자 함수를 new 연산자 없이 호출하여 문자열 타입으로 변환할 수 있다.
// 숫자 타입에서 문자열 타입으로 변환
String(1); // '1'
String(NaN); // 'NaN'
String(Infinity); // 'Infinity'
// 불리언 타입에서 문자열 타입으로 변환
String(true); // 'true'
String(false); // 'false'1-2. toString() 메서드
toString메서드를 사용하여 문자열 타입으로 변환할 수 있다.
// 숫자 타입에서 문자열 타입으로 변환
(1).toString(); // '1'
(NaN).toString(); // 'NaN'
(Infinity).toString(); // 'Infinity'
// 불리언 타입에서 문자열 타입으로 변환
(true).toString(); // 'true'
(false).toString(); // 'false'1-3. + 연산자
- 문자열 연결 연산자(
+)를 사용하여 문자열 타입으로 변환할 수 있다.
// 숫자 타입에서 문자열 타입으로 변환
1 + ''; // '1'
NaN + ''; // 'NaN'
Infinity + ''; // 'Infinity'
// 불리언 타입에서 문자열 타입으로 변환
true + ''; // 'true'
false + ''; // 'false'2) 숫자 타입으로 변환
2-1. Number() 생성자 함수
Number생성자 함수를 new 연산자 없이 호출하여 숫자 타입으로 변환할 수 있다.
// 문자열 타입에서 숫자 타입으로 변환
Number('0'); // 0
Number('-1'); // -1
Number('10.53'); // 10.53
// 불리언 타입에서 숫자 타입으로 변환
Number('0'); // 0
Number('-1'); // -1
Number('10.53'); // 10.532-2. parseInt(), parseFloat() 함수
parseInt(),parseFloat()함수를 사용하여 숫자 타입으로 변환할 수 있다. 단, 문자열만 변환 가능하다.
// 문자열 타입에서 숫자 타입으로 변환
parseInt('0'); // 0
parseInt('-1'); // -1
parseInt('10.53'); // 10.532-3. + 단항 산술 연산자
+단항 산술 연산자와,+산술 연산자를 사용하여 숫자 타입으로 변환할 수 있다.
// + 단항 산술 연산자를 사용하는 방법
// 문자열 타입에서 숫자 타입으로 변경
+'0'; // 0
+'-1'; // -1
+'10.53'; // 10.53
// 불리언 타입에서 숫자 타입으로 변경
+true; // 1
+false; // 02-4. * 산술 연산자
*산술 연산자를 사용하여 숫자 타입으로 변환할 수 있다.
// 문자열 타입에서 숫자 타입으로 변경
'0' * 1; // 0
'-1' * 1; // -1
'10.53' * 1; // 10.53
// 불리언 타입에서 숫자 타입으로 변경
true * 1; // 1
false * 1; // 04) 불리언 타입으로 변환
4-1. Boolean 생성자 함수
- Boolean 생성자 함수를 new 연산자 없이 호출하여 불리언 타입으로 변환할 수 있다.
// 문자열 타입에서 불리언 타입으로 변경
Boolean('x'); // true
Boolean(''); // false
Boolean('false'); // true
// 숫자 타입에서 불리언 타입으로 변경
Boolean(0); // false
Boolean(1); // true
Boolean(NaN); // false
Boolean(Infinity); // true
// null 타입에서 불리언 타입으로 변경
Boolean(null); // false
// undefined 타입에서 불리언 타입으로 변경
Boolean(undefined); // false
// 객체 타입에서 불리언 타입으로 변경
Boolean({}); // true
Boolean([]); // true4-2. ! 부정 논리 연산자
!부정 논리 연산자를 두 번 사용하여 불리언 타입으로 변환할 수 있다.
// 문자열 타입에서 불리언 타입으로 변경
!!'x'; // true
!!''; // false
!!'false'; // true
// 숫자 타입에서 불리언 타입으로 변경
!!0; // false
!!1; // true
!!NaN; // false
!!Infinity; // true
// null 타입에서 불리언 타입으로 변경
!!null; // false
// undefined 타입에서 불리언 타입으로 변경
!!undefined; // false
// 객체 타입에서 불리언 타입으로 변경
!!{}; // true
!![]; // true