타입 변환이란?
- 자바스크립트의 모든 값은 타입이 있다.
- 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다.
- 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 자동 타입변환되는 것을 암묵적 타입 변환 또는 타입 강제 변환이라 한다.
- 이때 타입변환이 일어날때 기존 원시 값이 변경되는 것이 아닌 다른 타입의 새로운 원시 값을 생성한다.
- 코드를 예측할 수 있도록 타입 변환을 이해하고 사용해야 한다.
var x = 10;
var str = x.toString();
var str2 = x + '';
암묵적 타입 변환
문자열 타입으로 변환
- 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환한다.
0 + ''
-0 + ''
1 + ''
-1 + ''
NaN + ''
Infinity + ''
-Infinity + ''
true + ''
false + ''
null + ''
undefined + ''
(Symbol()) + ''
({}) + ''
Math + ''
[] + ''
[10, 20] + ''
(function(){}) + ''
Array + ''
숫자 타입으로 변환
- 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다.
- 피연산자를 숫자 타입으로 변환할 수 없는 경우는 NaN이 결과값이 된다.
- 산술 연사자 뿐만 아니라 비교연산자도 숫자타입으로 암묵적 타입 변환한다.
- ‘+’단항 연산자
1 - '1'
1 * '10'
1 / 'one'
'1' > 0
+''
+'0'
+'1'
+'string'
+true
+false
+null
+undefined
+Symbol()
+{}
+[]
+[10, 20]
+(function(){})
불리언 타입으로 변환
- 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환한다.
- false로 평가되는 값 이외에는 모두 true로 평가되는 값이다.
- false로 평가되는 Falsy값
- false
- undefined
- null
- 0, -0
- NaN
- ‘’(빈 문자열)
function isFalsy(v) {
return !v;
}
function isTruthy(v) {
return !!v;
}
console.log(isFalsy(false));
console.log(isFalsy(undefined));
console.log(isFalsy(null));
console.log(isFalsy(0));
console.log(isFalsy(NaN));
console.log(isFalsy(''));
console.log(isTruthy(true));
console.log(isTruthy('0'));
console.log(isTruthy({}));
console.log(isTruthy([]));
명시적 타입 변환
- 개발자의 의도에 따라 명시적으로 타입을 변환하는 방법은 다양하다.
문자열 타입으로 변환
- String 생성자 함수를 new 연산자 없이 호출하는 방법
- Object.prototype.toString 메서드를 호출하는 방법
- 문자열 연결 연산자를 이용하는 방법
console.log(String(1));
console.log(String(NaN));
console.log(String(Infinity));
console.log(String(true));
console.log(String(false));
console.log((1).toString());
console.log((NaN).toString());
console.log((Infinity).toString());
console.log((true).toString());
console.log((false).toString());
console.log(1 + '');
console.log(NaN + '');
console.log(Infinity + '');
console.log(true + '');
console.log(false + '');
숫자 타입으로 변환
- Number 생성자 함수를 new 연산자 없이 호출하는 방법
- parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
console.log(Number('0'));
console.log(Number('-1'));
console.log(Number('10.53'));
console.log(Number(true));
console.log(Number(false));
console.log(parseInt('0'));
console.log(parseInt('-1'));
console.log(parseFloat('10.53'));
console.log(+'0');
console.log(+'-1');
console.log(+'10.53');
console.log(+true);
console.log(+false);
console.log('0' * 1);
console.log('-1' * 1);
console.log('10.53' * 1);
console.log(true * 1);
console.log(false * 1);
불리언 타입으로 변환
- Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
- ! 부정 논리 연산자를 두번 사용하는 방법(!!)
console.log(Boolean('x'));
console.log(Boolean(''));
console.log(Boolean('false'));
console.log(Boolean(0));
console.log(Boolean(1));
console.log(Boolean(NaN));
console.log(Boolean(Infinity));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean({}));
console.log(Boolean([]));
console.log(!!'x');
console.log(!!'');
console.log(!!'false');
console.log(!!0);
console.log(!!1);
console.log(!!NaN);
console.log(!!Infinity);
console.log(!!null);
console.log(!!undefined);
console.log(!!{});
console.log(!![]);
단축 평가
논리 연산자를 사용한 단축 평가
- 논리합(||), 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다.
'Cat' && 'Dog'
'Cat' || 'Dog'
'Cat' || 'Dog'
false || 'Dog'
'Cat' || false
'Cat' && 'Dog'
false && 'Dog'
'Cat' && false
- 단축평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.
단축 평가 표현식 | 평가 결과 |
---|
true | |
false | |
true && anything | anything |
false && anything | false |
- 단축 평가를 사용하면 if문을 대체할 수 있다.
- 조건이 true일때 논리곱(&&)으로 대체
- 조건이 false일때 논리합(||)으로 대체
var done = true;
if(done) message = '완료';
var message = done && '완료';
var done = false;
if(!done) message = '미완료';
var message = done || '미완료';
- 객체가 null인지 확인하고 프로퍼티를 참조할 때
var elem = null;
console.log(elem.value);
console.log(elem && elem.value);
- 함수의 매개변수에 기본값을 설정할때
- 함수를 호출할때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다. 이때 단축평가를 이용해 매개변수의 기본값을 설정할 수도 있다.
function getStringLength(str) {
str = str || '';
return str.length;
}
getStringLength();
getStringLength('hi');
function getStringLength(str = '') {
return str.length;
}
getStringLength();
getStringLength('hi');
옵셔널 체이닝 연산자(?.)
- 옵셔널 체이닝 연산자 ?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
- && 의 역할도 대신하지만 차이점이 있다.
- 논리곱 &&는 좌항 피연산자가 Falsy값이면 좌항 피연산자를 그대로 반환하지만 옵셔널 체이닝 연산자 ?. 는 좌항 피연산자가 Falsy값이라도 null,undefined가 아니면 우항의 참조를 이어간다.
var elem = null;
var value = elem?.value;
console.log(value);
var str = '';
var length = str && str.length;
console.log(length);
var length2 = str?.length;
console.log(length2);
null 병합 연산자
- null 병합 연산자 ?? 는 좌항의 피연산자가 null or undefined 인 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환한다.
- 변수에 기본값을 설정할 때 유용하다.
- || 의 역할도 대신하지만 차이점이 있다.
var foo = null ?? 'default string';
console.log(foo);
var foo = '' || 'default string';
console.log(foo);
var foo = '' ?? 'default string';
console.log(foo); ""