타입 변환
개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환, 타입 캐스팅이라 한다.
let x = 10;
let newX = x.toString();
console.log(typeof newX, X)
x의 값이 변하지 않고 새로운 값이 생성되기에 새로운 값을 newX에 담아 결과를 확인하였다.
타입변환은 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. 원시 값은 immutable value이므로 변경이 불가능하다.
명시적 타입변환은 개발자의 의지가 코드에 드러나지만 암묵적 타입 변환은 명백히 드러나지 않기때문에 오류를 생산할 가능성이 높아진다. 그렇다고 암묵적 타입 변환이 무조건 나쁘다는 것은 아니다. 자바스크립트 문법을 잘 이해하고 있는 게발자에게는 (10).toString()보다 10+''이 더 간결하고 이해하기 쉽기 때문이다. 중요한점은 코드를 예측할 수 있어야 한다. 동료가 작성한 코드를 정확히 이해할 수 있어야 하고, 자신이 작성한 코드도 동료가 쉽게 이해할 수 있어야 한다. 이를 위해 타입변환이 어떻게 동작하는지 정확이 이해하고 사용하자.
암묵적 타입변환
-
문자열 타입으로 변환
(+)연산자는 피연산자 중 하나 이상이 문자열이면 문자열 연결 연산자로 동작한다. 그렇기 때문에 문자열이 아닌 다른 피연산자를 문자열 타입으로 암묵적 타입 변환한다.
0 + '' = "0"
-0 + '' = "0"
(Symbol()) + '' = TypeError : Cannot convert a Symbol value ...
({})+'' = "[object object]"
[] + '' = ""
[10,20]+'' = "10,20"
(function(){})+'' = "function(){}"
Array + '' = "function Array() {[native code]}"
-
숫자 타입으로 변환
단항연산자는 피 연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환을 수행한다.
+'' = 0
+'0' = 0
+'1' = 0
+'string' = NaN
+null = 0
+undefined = NaN
+Symbol() = Type Error: Cannot convert a Symbol value...
+{} = NaN
+[] = 0
+[10,20] = NaN
+(function(){}) = NaN
불리언 타입으로 변환
if,for문과 같은 제어문 또는 삼항조건연산자의 조건식은 불리언 값으로 평가하는 표현식이다. 자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 변환한다
이때 자바스크립트 엔진은 불리언 타입을 Truthy & Falsy값으로 구분한다.
즉, 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 Truthy는 true로, falsy는 false로 암묵적 타입 변환된다. falsy값은 6개이며 그 외는 모두 Truthy 값이다.
6개의 falsy값
false
undefined
null
0,-0
NaN
''(빈 문자열)
명시적 타입 변환
개발자의 의도에 따라 명시적으로 타입을 변경하는 방법은 다양하다.
표준 빌트인 생성자 함수(String,Number,Boolean)를 new연산자 없이 호출하는 방법과 빌트인메서드를 사용하는 방법, 그리고 앞에서 본 암묵적 타입 변환을 이용하는 방법이 있다.
문자열 타입으로 변환
- String 생성자 함수를 new 연산자 없이 호출하는 방법
- Object.prototype.toString 메서드를 사용하는 방법
- 문자열 연결 연산자(+)를 사용하는 방법.
방법1.
String(1) = "1"
String(true) = "true"
방법2.
(1).toString() = "1"
(true).toString() = "true"
방법3.
true + '' = "true"
NaN + '' = "NaN"
숫자 타입으로 변환
- Number 생성자 함수를 new 연산자 없이 호출하는 방법
- parseInt,parseFloat 함수를 사용하는 방법 (문자열만 사용 가능)
- (+) 단항 산술 연산자를 이용하는 방법
- ( * ) 산술 연산자를 이용하는 방법
방법1.
Number('0') = 0
Number(false) = 0
방법2.
parseInt('0') = 0
parseFloat('10.53') = 10.53
방법3.
+'0' = 0
+true = 1
방법4.
'0' * 1 = 0
'4' * 4 = 16
true * 10 = 10
false * 25943 = 0
불리언 타입으로 변환
- Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
- !부정 논리 연산자를 두 번 사용하는 방법
방법1.
Boolean('x') = true
Boolean('') = false
Boolean({}) = true
Boolean([]) = true
방법2.
!!'x' = true
!!'' = true
!!'false' = true
!!NaN = false
단축평가
논리합 , 논리곱 연산자는 언제나 2개의 피 연산자 중 어느 한쪽으로 평가된다.
논리곱 연산자는 좌항에서 우항으로 평가가 진행된다. 그리고 두번째 연산자가 true일 경우 그 값을 그대로 반환한다.
'Cat' && 'Dog' = 'Dog'
논리합 연산자는 두개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다.
'Cat' || 'Dog' = "Cat"
이처럼 논리합,논리곱 연산자는 피연산자의 타입을 변환하지 않고 그대로 반환한다. 이를 단축평가 shot-circuit evaluation이라고 한다. 대부분 프로그래밍 언어는 단축 평가를 통해 논리 연산을 수행한다.
