[JavaScript] 명시적 타입 변환(explicit coercion), 암묵적 타입 변환(implicit coercion)

타입 변환(type casting)

개발자가 의도한대로 타입을 변경하는 행위를 의미한다.

 

• 명시적 타입 변환(explicit coercion) : 의도적으로 타입을 변경
• 암묵적 타입 변환(implicit coercion) : 자바스크립트 엔진에 의해 암묵적으로 변경

// 명시적 타입변환
var x = 10;

var str = x.toString(); // x를 문자열로 타입캐스팅
console.log(typeof str, str); // string 10

 

명시적 타입변환은 위처럼 개발자가 의도적으로 변환을 하는 것이다.

 

// 암묵적 타입 변환
var x = 10;
var str = x + ''; // 숫자(Number) + 문자(sting)을 하면 문자(string)이 된다.
console.log(typeof x, x);

 

위 코드를 보면 숫자(Number)에 문자(string)을 더하고 있다.

이러한 경우에는 자바스크립트 엔진이 앞의 숫자를 먼저 문자(string)으로 바꾼 후, 문자열끼리의 덧셈 즉 이어붙이기를 실행하게 된다.

 

 

좀 더 자세히 알아보자.

---

명시적 타입 변환(explicit coercion)

의도적으로 타입을 변경하는 행위이다. 표준 빌트인 생성자 함수(String, Number, Boolean)을 사용하거나 암묵적 타입 변환을 이용하는 방법이 있다.

 

문자열(string) 타입으로의 변환

• String 생성자 함수를 new 연산자 없이 호출
• toString 메서드를 사용
• 문자열 연결 연산자 사용

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

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

1 + ''; // "1"
NaN + ''; // "NaN";
Infinity + ''; // "Infinity"

 

숫자(Number) 타입으로의 변환

• Number 생성자 함수를 new 연산자 없이 호출
• parseInt, parseFloat 함수 사용
• + 단항 연산자 사용
• * 산술 연산자 사용

Number('0'); // 0
Number('12.34'); // 12.34
Number(true); // 1
Number(false); // 0

parseInt('0'); // 0
parseFloat('12.34'); // 12.34
parseInt(true); // 1
parseInt(false); // 0

+'0'; // 0
+'12.34'; // 12.34
+true; // 1
+false; // 0

'0' * 1; // 0
'12.34' * 1; // 12.34
true * 1; // 1
false * 1; // 0

 

 

불리언(Boolean) 타입으로의 변환

Truthy 값을 1로, Falsy 값을 0으로 변환하게된다.

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

Boolean('x'); // true
Boolean(''); // false

!! 'x'; // true
!! ''; // false

 

 

 

 

---

암묵적 타입 변환(implicit coercion)

크게 세 가지로 암묵적 타입 변환이 존재할 거 같다.

• 문자열(string) 타입으로의 변환
• 숫자(Number) 타입으로의 변환
• 불리언(Boolean) 타입으로의 변환

 

문자열(string) 타입으로의 변환

문자열 타입으로의 변환은 "덧셈"에서 발생한다.

// 숫자(Number) + 문자(string)
12 + 'hi'; // '12hi'

// 불리언(boolean) + 문자(string)
true + 'yeah'; // 'trueyeah'

// null + 문자(string)
null + 'hi'; // 'nullhi'

//undefined + 문자(string)
undefined + 'hi'; // 'undefinedhi'

// 심벌(Symbol) + 문자(string)
(Symbol()) + 'hi'; // TypeError: Cannot convert a Symbol value to a string

// 객체(Object) + 문자(string)
({}) + ''; // '[object Object]'
Math + ''; // '[object Math]'
[] + ''; // ''
[10,20] + ''; // '10,20'

 

 

숫자(Number) 타입으로의 변환

숫자 타입으로의 변환은 "뺄셈, 곱셈, 나눗셈"에서 발생한다.

3 - '2' // 1
5 * '2' // 10
9 / 'one' // NaN

 

위 코드를 보면 문자열을 먼저 숫자로 바꾼 후 연산을 수행한다.

근데 마지막 예제에서는 'one'을 숫자로 바꾸면 NaN(Not a Number)이 되므로, 나눈 결과값도 NaN이 나온다.

 

 

이 외에 숫자 타입으로의 변환을 수행하는 아주 멋진 연산자가 있다.

바로 "+ 단항 연산자"이다.

// 문자열(Number) 타입
+'' // 0
+'0' // 0
+ '123123' // 123123
+'hi' // NaN


// 불리언(Boolean) 타입
+true // 1
+false // 0


// null 타입
+null // 0

// undefined 타입
+undefined // NaN

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

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

 

 

불리언(Boolean) 타입으로의 변환

if문이나 for문에 사용되는 조건식에서 많이 사용된다.

 

간단하게 말하자면, Truthy 값(참으로 평가되는 값)과 Falsy 값(거짓으로 평가되는 값)으로 구분할 수 있다.

암묵적 타입 변환 과정에서 Truthy 값은 true로, Falsy 값은 false로 변환된다.

https://lmw1119.tistory.com/entry/JavaScript-Truthy%EC%99%80-Falsy

[JavaScript] Truthy와 Falsy

 

Truthy와 Falsy 값에 대한 정보는 여기서 참고하길 바란다.