JavaScript 암묵적 타입 변환과 명시적 타입 변환

javascript 타입 변환

javascript의 모든 값엔 타입이 있는데 개발자가 의도적으로 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 하고, 자바스크립트 엔진이 필요에 의해 타입을 변환하는 것을 암묵적 타입 변환 또는 타입 강제 변환이라고 한다.

암묵적 타입 변환

자바스크립트 엔진이 표현식을 평가할 때 코드의 문맥을 보고 암묵적으로 타입을 강제 변환시켜준다.

문자열 타입

문자열에서 +는 문자열 연결 연산자로 이용된다. 문자열 연결 시 피연산자 중 문자열 타입이 아닌 경우 문자열로 바꿔서 연결시켜준다.

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

// 불리언 타입
true + '' // 'true'
false + '' // 'false'

// 심볼 타입
(Symbol()) + '' // TypeError 

({}) + '' // "[object Object]"
[10,20] + '' // "10,20"

숫자 타입

산술 연산자( +, -, *, /, % )의 역할은 숫자를 만드는 것이다. 자바스크립트 엔진은 산술 연산을 하기 위해 숫자 타입이 아닌 피연산자를 숫자 타입으로 변환한다. 변환할 수 없는 경우 NaN이 나온다. NaN(Not a Number)은 연산 과정에서 잘못된 입력을 받았다는 것을 나타내는 기호이다.

// 문자열 타입
+'' // 0
+'0' // 0  ( 1+'0'일 경우 '10'의 문자열이 된다. 숫자 타입보다 문자열 타입 변환이 우선한다는 걸 알 수 있다 )
+'string' // NaN

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

// null 타입
+null // 0

// 객체 타입
+undefined // NaN
+{} // NaN
+[] // 0
+[10,20] // NaN

비교 연산자(>, < ...)의 역할은 왼쪽과 오른 쪽의 크기를 비교하는 용도이다. 마찬가지로 숫자 타입이 아닌 피연산자를 숫자 타입으로 변환한다.

'1' > 0 // true

불리언 타입

if문이나 for문과 같은 제어문 또는 삼항연산자의 조건식은 참/거짓으로 평가되어야 하는 표현식이다. 그래서 자바스크립트 엔진이 조건식의 평가 결과를 불리언 타입으로 바꿔버린다. 이 때 불리언 타입(true/false)이 아니면 자바스크립트 엔진은 이게 참으로 평가되는 값인지(Truthy), 거짓으로 평가되는 값인지 한번 더 체크한다(Falsy).

false로 평가되는 Falsy값

false
undefined
null
0, -0
NaN
'' (빈문자열)

외에는 모두 true로 평가되는 Truthy 값이다.

if('') console.log('1') // undefined
if(true) console.log('2')
if(0) console.log('3') // 
if(1) consoloe.log('4') // 1은 true로 평가
if('str') console.log('5') // 'str' true로 평가
if(null) console.log('6') // undefined

// 2, 4, 5

4, 5가 console.log에 찍히는 걸로 보아 숫자든 문자든 어떤 값이 있으면 Truhy 즉, true라고 볼 수 있다.

명시적 타입 변환

개발자의 의도에 따라 명시적으로 타입 변환하는 방법에는 표준 빌트인 생성자함수(String, Number, Boolean)를 사용하는 방법과 빌트인 메서드를 사용하는 방법이 있다.

표준 빌트인이란 말은.. 자바스크립트에서 기본으로 제공하고 있단 말이다. 생성자 함수와 메서드를 기본으로 제공하고 있다.

문자열 타입

String 생성자 함수를 new 연산자 없이 호출
Object.prototype.toString 메서드를 사용하는 방법

// 1. String 생성자 함수를 new 연산자 없이 호출
String(1) // '1'
String(true) // 'true'
String(NaN) // 'NaN'

// 2. Object.prototype.toString 메서드를 사용
(1).toString(); // '1'
(NaN).toString(); // 'NaN'
(true).toString(); // 'true'

// 암묵적 타입 변환 활용 : 문자열 연결 연산자
// 숫자 타입 -> 문자열
1 + '' // '1'
true + '' // 'true

숫자 타입

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

// 1. Number 생성자 함수 사용
Number('0') // 0
Number(true) // 1
Number(false) // 0

// 2. parseInt, parseFloat 함수 사용
parseInt('0') // 0
parseFloat('10.53') // 10.53

// 암묵적 타입 변환 활용 : +단항 산술 연산자 사용
+'0' // 0
+true // 1
+false // 0

// 암묵적 타입 변환 활용 : *산술 연산자 사용
'0' * 1; // 0
true * 1 // 1
false * 1 // 0

불리언 타입

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

// 1. Boolean 생성자 함수
Boolean('x') // true
Boolean('') //false
Boolean('false') // true

Boolean(0) // false
Boolean(1) // true

Boolean({}) // true
Boolean([]) // true

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

---