9장 타입 변환과 단축 평가

---

출처 모던 자바스크립트 Deep Dive을 보고 정리한 내용입니다.

타입 변환

개발자가 의도한 값의 타입 변환을 명시적 타입 변환(Explicit Coercion) 또는 타입 캐스팅(Type Casting)이라고 한다. 개발자가 의도하지 않았지만 자바스크립트 엔진에 의해 이루어지는 타입 변환은 암묵적 타입 변환(Implicit Coercion) 또는 타입 강제 변환(Type Coercion)이라고 한다. 그러나 타입 변환은 기존 원시 값을 직접 변경하지 못한다.

vafr num = 1;
var str = num + '';

console.log(typeof str, str); //string, '1'
console.log(typeof num, num); //number, 1

암묵적 타입 변환

자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도가 없어도 코드의 문맥을 통해 암묵적으로 타입을 강제 변환할 수 있다.

console.log('1' + 2) //12
console.log(2 * '1') //2
console.log(!0) //true

• 숫자 타입으로 변환

  +'' //0
  +'0' //0
  +'string' //NaN
  +true //1
  +false //0
  +null //0
  +undefined //NaN
  +Symbol() //TypeError
  +{} //NaN
  +[] //0
  +[1, 2] //NaN,
  +(function() {}) //NaN

• 문자 타입으로 변환

  1 + '' //'1'
  -0 + '' //'0'
  NaN + '' //'NaN'
  Infinity + '' //'Infinity'
  -Infinity + '' //'-Infinity'
  true + '' //'true'
  false + '' //'false'
  null + '' //'null'
  undefined + '' //'undefined'
  (Symbol()) + '' //TypeError
  ({}) + '' //"[object object]"
  Math + '' //"[object Math]"
  [] + '' //
  [1, 2] + '' //'1,2'
  (function() {}) + '' //'function(){}'
  Array + '' //"function Array() {[native code]}"

• boolean 타입으로 변환

  if('') console.log('1'); //
  if(true) console.log('2'); //2
  if(0) console.log('3'); //
  if('string') console.log('4'); //4
  if(null) console.log('5'); //

  자바스크립트 엔진은 boolean 타입이 아닌 값은 Truthy값과 Falsy값으로 구분한다.

  false, undefined, null, 0, -0, NaN, ''는 Falsy값으로 구분한다.

명시적 타입 변환

• 숫자 타입으로 변환

  Number('1') //1
  Numbrt('-1') //-1
  Number('1.1') //1.1
  Number(true) //1
  Number('str') //NaN, 숫자인 문자열만 가능
  
  parseInt('1') //1
  parseInt('-1') //-1
  parseInt('1.1') //1
  parseFloat('1.1') //1.1
  parseInt(true) //NaN, 문자열만 가능
  
  +'1' //1
  +'-1' //-1
  +'1.1' //1.1
  +true //1
  +false //0
  
  '1' * 1 //1
  '-1' * 1 //-1
  '1.1' * 1 //1.1
  true * 1 //1
  false * 1 //0

• 문자열 타입으로 변환

  String(1) //'1'
  String(NaN) //'NaN'
  String(Infinity) //'Infinity'
  String(true) //'true'
  
  (1).toString() //'1'
  (NaN).toString() //'NaN'
  (Infinity).toString() //'Infinity'
  (true).toString() //'true'
  
  1 + '' //'1'
  NaN + '' //'NaN'
  Infinity + '' //'Infinity'
  true + '' //'true'

• boolean 타입으로 변환

  Boolean('x') //true
  Boolean('false') //true
  Boolean('') //false
  Boolean(0) //flase
  Boolean(1) //true
  Boolean(NaN) //false
  Boolean(Infinity) //true
  Boolean(-Infinity) //true
  Boolean(null) //false
  Boolean(undefined) //false
  Boolean({}) //true
  Boolean([]) //true
  
  !!'x' //true
  !!'' //false
  !!'false' //true
  !!0 //false
  !!1 //true
  !!NaN //false
  !!undefined //false
  !!null //false
  !!Infinity //true
  !!{} //true
  !![] //true

단축평가

단축평가란 표현식을 평가하는 중에 평가의 결과가 확정된 경우 남은 평가과정을 생략하는 것을 말한다. 논리합(||)과 논리곱(&&)의 결과 값은 항상 boolean타입이 아닐 수 있다. 논리합과 논리곱의 결과 값은 두 피연산자 중 한쪽으로 평가된다.

'Cat' && 'Dog' //'Dog''Cat' || 'Dog' //'Cat'

null로 할당된 객체에 프로퍼티를 접근하는 것은 타입 오류를 야기한다. 그러나 단축평가를 통해 이를 수행할 수 있다.

var element = null;console.log(element.value); //TypeErrorconsole.log(element && element.value); //null;

또한 할당되지 않은 함수의 인자 값의 프로퍼티를 참조하는 경우 단축평가를 사용하여 오류를 방지할 수 있다.

function foo(str) {	return str.length;}console.log(foo()); //Type Errorfunction foo(str) {	var result = str || '';	return result.length;}console.log(foo()); //0

옵셔널 체이닝 연산자

옵셔널 체이닝 연산자는 ?. 좌황의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티를 참조한다.

var element = null;console.log(element?.value) //undefined

논리연산자인 논리곱(&&)은 좌항이 Falsy한 값이면 좌항의 값을 그대로 반환한다. 그러나 Falsy한 값으로 평가되는 0 또는 ''은 객체로 평가될 수 있다.

var str = 'aaa';var length = str && str.length;console.log(length); //''var length = str?.length;console.log(length) //0

null 병합 연산자

null 병합 연산자 ??은 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환한다.

var str = null ?? 'string';console.log(str); //string

논리연산자인 논리합(||)은 좌항이 Falsy한 값이면 우항의 피연산자를 반환한다. 그러나 Falsy한 값으로 평가되는 0 또는 ''은 객체로 평가될 수 있다.

var str = '' || 'string';console.log(str) //'string';str = '' ?? 'string';console.log(str) //''