기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것
1) 문자열 타입으로 변환
1 + '2' // -> "12"
위의예제의 +연산자는 문자열 연결 연산자로 동작한다.
자바스크립트 엔진은 문자열타입이 아닌 피연산자를 문자열타입으로 암묵적 타입변환한다.
//숫자 타입
0 + '' //"0"
NaN + '' //"NaN"
Infinity + '' //"Infinity"
//불리언 타입
true + '' //"true"
//null 타입
null + '' //"null"
//undefined 타입
undefined + '' //"undefined"
//심벌 타입
(Symbol()) + '' //TypeError
//객체 타입
({}) + '' //"[object Object]"
Math + '' //"[object Math]"
[] + '' //""
[10,20] + '' //"10,20"
(function(){}) + '' //"function(){}"
Array + '' //function Array() {[native code]}
2) 숫자 타입으로 변환
1 - '1' //0
1 * '10' //10
1 / 'one' //NaN
위 예제의 산술연산자의 모든 피연산자들은 숫자타입으로 암묵적 타입 변환된다.
'1' > 0 //true
위 예제의 비교연산자의 역할은 불리언 값을 만드는 것이다.
즉, 비교연산자의 피연산자 중 숫자 타입이 아닌 피연산자를 숫자타입으로 암묵적 타입 변환한다.
+단항 연산자는 피연산자가 숫자타입의 값이 아니면 숫자타입으로 암묵적 타입 변환
+'' //0
+'string' //NaN
+true //1
+null //0
+undefined //NaN
+Symbol() //TypeError
+{} //NaN
+[] //0
+[10,20] //NaN
+(function(){}) //NaN
객체,빈배열이 아닌 배열, undefined는 변환되지 않아 NaN
이 되는것에 주의!
3) 불리언 타입으로 변환
제어문 또는 삼항조건연산자의 조건식은 참/거짓으로 평가되는 표현식이다.
자바스크립트 엔진은 조건식의 평과 결과를 불리언 타입으로 암묵적 타입변환한다.
불리언 타입이 아닌 값을 Truthy값
(참으로 평가되는 값) 또는 Falsy값
(거짓으로 평가되는 값)으로 구분하여 Truthy->true, Falsy->false로 변환!
Falsy값 외의 모든 값은 모두 true로 평가되는 Truthy값이다!
if ('') console.log('1');
if ('str') consol.log('2'); //2
if (undefined) console.log('3');
개발자의 의도에 따라 명시적으로 타입을 변경하는 것
1) 문자열 타입으로 변환
String 생성자 함수
를 new 연산자 없이 호출하는 방법String(1); //"1"
String(NaN); //"NaN"
String(true); //"true"
Object.prototype.toString
메서드를 사용하는 방법(1).toString(); //"1"
(true).toString(); //"true"
문자열 연결 연산자
를 이용하는 방법1 + ''; //"1"
true + ''; //"true"
2) 숫자 타입으로 변환
Number 생성자 함수
를 new 연산자 없이 호출하는 방법Number('0'); //0
Number('10.53'); //10.53
Number(true); //1
parseInt, parseFloat함수
를 사용하는 방법(문자열만 숫자타입으로 변환가능)parseInt('-1'); //-1
parseFloat('10.53'); //10.53
+ 단항 산술 연산자
를 이용하는 방법+'0'; //0
+'-1'; //-1
+'true'; //1
* 산술 연산자
를 이용하는 방법'0' * 1; //0
'-1' * 1; //-1
'false' * 1; //0
3) 불리언 타입으로 변환
Boolean 생성자 함수
를 new 연산자 없이 호출하는 방법Boolean('x'); //true
Boolean(''); //false
Boolean('false'); //true
Boolean(0); //false
Boolean(Infinity); //true
Boolean(null); //false
Boolean(undefined); //undefined
Boolean({}); //true
! 부정 논리 연산자를 두 번
사용하는 방법!!'x'; //true
!!''; //false
!!'false'; //true
!!0; //false
!!1; //true
!!NaN; //false
!!Infinity; //true
!!null; //false
!!undefined; //false
!!{}; //true
!![]; //true
'Cat' && 'Dog' // "Dog"
논리곱(&&) 연산자
는 두개의 피연산자 모두 true로 평가될 때 true 반환하며, 논리 연산의 결과를 결정하는 두 번째 피연산자를 그대로 반환한다.
'Cat' -> Truthy 값이므로 true로 평가된다.
'Dog' -> Truthy 값이므로 true로 평가되어 두번째 피연산자인 'Dog'가 반환된다.
'Cat' || 'Dog' // "Cat"
논리합(||) 연산자
는 두개의 피연산자 중 하나만 true로 평가되어도 true 반환하며, 논리 연산의 결과를 결정한 첫 번째 피연산자를 그대로 반환한다.
'Cat' -> Truthy 값이므로 true로 평가된다.
'Dog' -> 첫 번째 피연산자가 true로 평가되므로 두번째 피연산자까지 평가해보지 않아도 된다.
조건이 Truthy값
일 때 무언가를 해야한다면 논리곱(&&)연산자
표현식으로 if문
을 대체할 수 있다.
var done = true;
var message = '';
if (done) message = '완료';
//if문은 단축평가로 대체가능하다.
message = done && '완료';
console.log(message); //완료
조건이 Falsy값
일 때 무언가를 해야한다면 논리합(||)연산자
표현식으로 if문
을 대체할 수 있다.
var done = false;
var message='';
if (!done) message='미완료';
message = done || '미완료';
console.log(message); //미완료
if (done) massage = '완료';
else message = '미완료';
//if...else문은 삼항조건 연산자로 대체가능하다.
message = done ? '완료' : '미완료';
console.log(message); //완료
var elem = null;
var value = elem && elem.value; //null
elem이 null이나 undefined와 같은 Falsy값이면 elem으로 평가되고 elem이 Truthy 값이면 elem.value로 평가된다.
function getStringLength(str) {
str = str || '';
return str.length;
}
getStringLength(); //0
getStringLength('hi'); //2
//ES6의 매개변수의 기본값 설정
function getStringLength(str =. ') {
return str.length;
함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당되는데 단축평가를 사용해 매개변수의 기본값을 설정하면 undefined로 인해 발생할 수 있는 에러 방지할 수 있다.
옵셔널 체이닝 연산자 ?.
는 좌항의 피연산자가 null 또는 undefined인 경우 undefined
를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조
를 이어간다.
객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용!
var elem = null;
//elem이 null이므로 undefined를 반환
var value = elem?.value;
console.log(value); //undefined
좌항 피연산자가 false로 평가되는 Falsy값(false, undefined, null, 0, -0, NaN, '')이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
var str = '';
var length = str?.length;
console.log(length); //0
null 병합 연산자 ??
는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환
하고, 그렇지 않으면 좌항의 피연산자를 반환
한다.
변수에 기본값을 설정할 때 유용!
//좌항의 피연산자가 null이므로 우항의 피연산자 반환
var foo = null ?? 'default thing';
console.log(foo); //"default thing"
좌항의 피연산자가 false로 평가되는 Falsy값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다.
//좌항의 피연산자가 Falsy값이라도 null 또는 undefined가 아니면 좌항의 피연산자 반환
var foo = '' ?? 'default thing';
console.log(foo); //""