JS 데이터 타입 변환 : 암묵적, 명시적

1. 암묵적 타입 변환

 

자바스크립트는 개발자의 의도와 상관없이 코드에 따라 암묵적으로 데이터 타입을 변환하는 경우가 있다.

 

1️⃣ 문자열 타입으로의 암묵적 변환

+ 연산자를 활용하면 문자열이 아닌 타입을 문자열 타입으로 타입 변환이 굉장히 쉽게 적용된다.

다른 타입에서의 + 연산자 활용은 더하기 연산을 수행하지만, 문자열이 포함된 더하기 연산은 산술적 연산이 아닌 문자열 결합이 수행되기 때문이다.

1️⃣ 숫자 타입
0 + '' 👉 '0'
-0 + '' 👉 '0'
NaN + '' 👉 'NaN'
Infinity + '' 👉 'Infinity'
-Infinity + '' 👉 '-Infinity'

2️⃣ 불린 타입
true + '' 👉 'true'
false + '' 👉 'false'

3️⃣ null
null + '' 👉 'null'

4️⃣ undefined 타입
undefined + '' 👉 'undefined '

5️⃣ 객체 타입
({}) + '' 👉 '[object Object]'
[] + '' 👉 ''
[10, 20] + '' 👉 '10, 20'
(function(){}) + '' 👉 'function(){}'

객체 타입의 빈 객체에 문자열을 결합할 때에 소괄호를 사용하였는데, 만약 소괄호를 사용하지 않고 중괄호를 문자열과 결합하려고 하면 다음과 같이 다른 결과를 볼 수 있다.

다른 결과를 볼 수 있는 이유는 중괄호가 코드 블록으로도 쓰이고 있기 때문에 코드 상에서 중의적으로 해석되기 때문이다.

 

2️⃣ 숫자 타입으로 암묵적 변환

+ 연산자는 피연산자가 숫자 타입이 아닌 경우에 암묵적으로 타입을 변환시킨다.

1️⃣ 문자열 타입
+'' 👉 0
+'0' 👉 0
+'1' 👉 1
+'string' 👉 NaN

2️⃣ 불린 타입
+true 👉 1
+false 👉 0

3️⃣ null
+null 👉 0

4️⃣ undefined 타입
+undefined 👉 NaN

5️⃣ 객체 타입
+{} 👉 NaN
+[] 👉 0
+[10, 20] 👉 NaN
+(function(){}) 👉 NaN

숫자 타입으로 변환될 수 없는 값을 변환하려고 하면 NaN 으로 값을 반환하게 된다.

NaN 값은 서로 비교가 안 되기 때문에 isNaN() 함수를 통해 값을 확인할 수 있다.

 

3️⃣ 불린 타입으로 암묵적 변환

if 문, for 문과 같이 조건식을 사용하는 곳에서 불린 타입이 아닌 타입을 사용하면 자바스크립트에서는 해당 타입으로 불린 타입으로 암묵적 변환하려고 한다.

false 로 평가되는 값
1️⃣ undefined 타입
2️⃣ null
3️⃣ 0, -0
4️⃣ NaN
5️⃣ '' 빈문자열

true 로 평가되는 값은 false 로 평가되는 값 이외의 모든 값이다.

 

 

2. 명시적 타입 변환

 

1️⃣ 문자열 타입으로 명시적 변환

1️⃣ String 생성자 함수를 new 연산자 없이 호출하는 방법
String(1) 👉 '1'
String(true) 👉 'true'

2️⃣ Object.prototype.toString 메서드를 사용하는 방법
(1).toString 👉'1'
(true).toString 👉 'true'

 

2️⃣ 숫자 타입으로 명시적 변환

1️⃣ Number 생성자 함수를 new 연산자 없이 호출하는 방법
Number('0') 👉 0
Number(false) 👉 0

2️⃣ parseInt, parseFloat 함수를 사용하는 방법 (단, 문자열만 적용 가능)
parseInt('10') 👉 10
parseFloat('1.1') 👉 1.1

 

3️⃣ 불린 타입으로 명시적 변환

1️⃣ Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
Boolean('x') 👉 true
Boolean(10) 👉 true
Boolean('false') 👉 true

2️⃣ ! 부정 논리 연산자 두 번 사용하는 방법
!!'x' 👉 true
!!0 👉 false
!!{} 👉 true
!![] 👉 true

📌 ! 부정 논리 연산자를 두 번 사용하는 이유

부정 논리 연산자를 한 번만 사용하게 되면 기존의 값에 대한 값이 불린 타입으로 변환될 때에 반대되는 값이 반환될 수 있기 때문에 두 번 사용하여 기존 값의 불린 타입을 유지할 수 있도록 하는 것이다.