[Javascript] 자바스크립트의 형 변환(타입 변환)

자바스크립트의 형 변환은 명시적 형 변환과 암시적 형 변환 두가지가 있다.

1. 명시적 형 변환(타입 캐스팅)

명시적 형 변환은 개발자가 의도적으로 값의 타입을 변환하는 것을 말한다. 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하는 방법과 빌트인 메서드를 사용하는 방법, 암시적 형 변환을 이용하는 방법이 있다.

 

빌트인 생성자 함수: 자바스크립트에서 기본 제공하는 함수로 new 연산자와 함께 호출한다.

빌트인 메서드: 자바스크립트에서 기본 제공하는 빌트인 객체의 메서드

1.1. 문자열 형 변환

문자열 타입이 아닌 값을 문자열 타입으로 변환하는 방법은 세가지가 있다.

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

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

// 3. 문자열 연결 연산자를 이용하는 방법
1 + '';        // "1"
NaN + '';      // "NaN"
Infinity + ''; // "Infinity"
true + '';     // "true"

1.2 숫자 형 변환

숫자 타입이 아닌 값을 숫자 타입으로 변환하는 방법은 네 가지가 있다.

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

// 2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
parseInt('0');      // 0
parseInt('-1');      // -1
parseFloat('10.5'); // 10.5

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

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

1.3 불리언 형 변환

불리언 타입이 아닌 값을 불리언 타입으로 변환하는 방법은 두 가지가 있다.

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

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

2. 암시적 형 변환(타입 강제 변환)

암시적 형 변환은 개발자의 의도와 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것을 말한다.

2.1. 문자열 형 변환

자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가하기 위해 문자열 연결 연산자의 피연산자 중에서 문자열 타입이 아닌 피연산자를 문자열 타입으로 암시적 형 변환한다.

// 숫자 타입
0 + '' // "0"
-0 + '' // "0"
NaN + '' // "NaN

// 불리언 타입
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.2. 숫자 형 변환

자바스크립트 엔진은 산술 연산자 표현식을 평가하기 위해 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 형 변환한다. 만약 피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 표현식의 평가 결과는 NaN이 된다.

'1' > 0 // true

비교 연산자의 경우는 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암시적 형 변환 한다.

// 문자열 타입
+'' // 0
+'0' // 0
+'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

2.3. 불리언 형 변환

자바스크립트 엔진은 불리언 타입이 아닌 값을 참 또는 거짓으로 구분한다. 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 참은 true로 거짓은 false로 암시적 형 변환된다.

if ('')     console.log('1')
if (true)   console.log('2')
if (0)      console.log('3')
if ('str')  console.log('4')
if (null)   console.log('5')

// 2 4

false로 평가되는 값은 false, undefined, null, 0, -0, NaN, ' '(빈 문자열)이 있으며 거짓이 되는 값 외의 모든 값은 true로 평가된다.

 

 

 

참고: 모던 자바스크립트 Deep Dive