[JavaScript] 타입 변환
타입 변환은 명시적 타입 변환과 암묵적 타입 변환이 있다
명시적 타입 변환 (타입 캐스팅)
개발자가 의도적으로 값의 타입을 변환하는 것
var x = 308;
var s = x.toString();
console.log(typeof s, s) // str '308'암묵적 타입 변환 (타입 강제 변환)
표현식을 평가하는 도중 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것
var x = 308
var s = x + '';
console.log(typeof s, s); // str '308'타입 변환은 기존 원시 값을 직접적으로 변경하는 것이 아니다
원시 값은 변경 불가능한 값이라서 변경이 안된다
타입 변환은 기존 원시 값을 사용해서 다른 타입의 새로운 원시 값을 만드는 것이다.
자바스크립트 엔진은 표현식을 에러 없이 평가하고자 피연산자의 값을 암묵적으로 타입 변화시켜 새로운 타입의 값을 만들고
한번 쓰고 버린다
명시적으로 변환시키는 코드는 타입 변경 의도가 눈에 띄는데, 암묵적으로 변화시키는 코드는 그런 의도가 나타나지는 않는다
그러나 가독성 측면에서 암묵적 타입 변환이 더 좋을 수도 있기 때문에 익혀두는게 좋다
암묵적 타입 변환
자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도와는 관계없이 코드의 문맥을 고려해서 암묵적으로 데이터를 강제로 변환시키기도 한다
코드의 문맥과 부합하지 않는 상황으로 보이는데, 자바스크립트는 가급적 에러를 발생시키지 않고자 타입 변환을 통해 표현식을 평가한다
암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 변환한다
문자열로 변환
1 + '5' // '15'
0 + '' // '0'
NaN + '' // "NaN"
Infinity + '' // "Infinity"
null + '' // "null"
undefined + '' // "undefined"
({}) + '' // "[object Object]"
Math + '' // "[object Math]"
[] + '' // ""
[10, 20] + '' // "10,20"
(function(){}) + '' // "function(){}"
Array + '' // "function Array() { [native code] }"
문자열 연결 연산자 + 를 이용하는 방법이다.
문자열 연결 연산자의 역할은 문자열 값을 만드는 것
원래라면 문자열 연결 연산자의 모든 피연산자는 코드의 문맥상 모두 문자열 타입이어야 한다.
근데, 자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가할 때 피연산자 중에서 문자열 타입이 아닌 피연산자는
문자열 타입으로 암묵적 타입 변환 한다
연산자 표현식의 피연산자만이 암묵적 타입 변환의 대상이 되는건 아니라고 한다
표현식을 평가할 때 코드 문맥에 부합하도록 암묵적 타입 변환을 실행한다
ex) 템플릿 리터럴
`1 + 1 = ${1+1}` // '1 + 1 = 2`
`${[1,2,3]}` // '1,2,3'템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환한다.
숫자 타입으로 변환
산술연산자 (-,*,/)를 이용하면 숫자 타입으로 타입 변환이 가능하다
산술연산자는 숫자 값을 만드는 것이 목적이다.
그렇기 때문에 산술 연산자의 피연산자들은 문맥상 숫자 타입이어야 한다
그래서 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자타입으로 타입 변환한다
만약 피연산자를 숫자 타입으로 변환할 수 없는 경우 NaN이 된다.
1-'1' // 0
1*'10' // 10
1/'one' // NaN
false-'1'
true *'0' // 0
true * 0 // 0
true+'1'
그리고 부등호 연산자의 경우, 피연산자의 크기를 비교하여 불리언을 반환하는 것이 목적이다.
그래서 모든 연산자는 코드 문맥상 숫자 타입이어야 하기 때문에, 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로
암묵적 타입 변환한다.
('1' > 0) // true
(true < 0) // true
('string' < 'abc') // false
(true < '2'); // true
+ 단항 연산자
피연산자가 숫자 타입이 아니면 숫자 타입으로 변환한다
console.log(+''); // 0
console.log(+'1'); // 1
console.log(+'2'); // 2
console.log(+true); // 1
console.log(+'true'); // NaN
console.log(+null);
console.log(+undefined);
+{} // NaN
+[] // 0
+[10,20] // NaN
+(function(){}) // NaN
불리언 타입으로 변환
조건식은 불리언 값으로 평가되어야 하는 표현식이다
따라서 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환한다.
if ('') console.log('1');
if (true) console.log('2');
if ('true') console.log('3');
if (0) console.log('4');
if ([]) console.log('5');
if (null) console.log('6');
// 2
// 3
// 5
truthy, falsy 는 각각 참 혹은 거짓으로 평가되는 값이다
자바스크립트 엔진은 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 Truthy 값이나 Falsy 값으로 구분한다.
부정연산자를 통해 Truthy, Falsy 를 판별할 수 있다.
!!true // true
!!0 // false
!!undefined // false
!!null // false
!!NaN // false
!!'' // false명시적 타입 변환
개발자의 의도에 따라 명시적으로 타입을 변경하는 방법
- 표준 빌트인 생성자 함수 이용
- 빌트인 메서드 이용
- 암묵적 타입 변환 이용
표준 빌트인 생성자 함수 : 객체를 생성하기 위한 함수
표준 빌트인 메서드 : 자바스크립트에서 기본 제공하는 빌트인 객체의 메서드
문자열 타입으로 변환
String 생성자 함수를 new 연산자 없이 호출하는 방법
String(10) // '10'
String(true) // 'true'Object.prototype.toString 메서드 (표준 빌트인 메서드)
(1).toString()
(NaN).toString()
(true).toString()문자열 연결 연산자 이용 (암묵적 타입 변환)
숫자 타입으로 변환
Number 생성자 함수를 new 연산자 없이 호출하는 방법
Number('0') // 0
Number('10.53'); // 10.53
Number(true); // 1parseInt, parseFloat 함수 이용
parseInt('0') // 0
parseFloat('10.213') // 10.213단항 산술 연산자 + 이용, *산술 연산자 이용 (암묵적 타입 변환)
+'0' // 0
+true // 1
+'-1' // -1
true*1 // 1
'0'*1 // 0
'-1'*1 // -1
불리언 타입으로 변환
Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
Boolean('x'); // true
Boolean(''); // false
Boolean([]); // true
Boolean({}); // true
Boolean(NaN); // false
Boolean(Infinity); // true! 부정 논리 연산자를 두번 사용하는 방법 (암묵적 타입 변환)
!!'x' // true
!!'false' // true
!!0 // false
!!1 // true
!!null // false
!!{} // true
!![] // true
참고 : deepdive