[JS] 9. 타입 변환과 단축 평가

9.1 타입 변환이란?

자바스크립트의 모든 값은 타입이 있음

값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있는데, 이를 명시적 타입 변환 혹은 타입 캐스팅이라고 함

var x = 10;

// 명시적 타입 변환
// 숫자를 문자열로 타입 캐스팅
var str = x.toString();
console.log(typeof str, str);// string 10

// x 변수의 값이 변경된 것은 아님
console.log(typeof x, x); // number 10

개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변하는 것을 암묵적 타입 변환 또는 타입 강제 변환이라 함

var x = 10;

// 암묵적 타입 변환
// 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열 생성
var str = x + '';
console.log(typeof str, str);// string 10

// x 변수의 값이 변경된 것은 아님
console.log(typeof x, x); // number 10

9.2 암묵적 타입 변환

1. 문자열 타입으로 변환

   1 + '2' = '12'

   자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가하기 위해 문자열 연결 연산자 중에서 문자열 타입이 아닌 연산자를 문자열 타입으로 암묵적 변환

   // 숫자 타입
   0 + '' // "0"
   -0 + '' // "0"
   1 + '' // "1"
   -1 + '' // "-1"
   NaN + '' // "NaN"
   Infinity + '' // "Infinity"
   -Infinity + '' // "-Infinity"
   
   // 불리언 타입
   true + '' // "true"
   false + '' // "false"
   
   // null 타입
   null + '' // "null"
   
   // undefinded 타입
   undefined + '' // "undefined"
   
   // symbol 타입
   (Symbol()) + '' // Cannnot convert a Symbol value to a String
   
   // 객체 타입
   ({}) + '' // "[object Object]"
   Math + '' // "[object Math]"
   [] + '' // ""
   [10, 20] + '' // "10, 20"
   (function () {}) + '' // "function(){}"
   Array + '' // "function Array() { [native code] }"

2. 숫자 타입으로 변환

   산술 연산자 표현식을 평가하기 위해 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환

   피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 표현식의 평가 결과는 NaN

   1 - '1' // 0
   1 * '10' // 10
   1 / 'one' // NaN

   // 문자열 타입
   + '' // 0
   + '0' // 0
   + '1' // 1
   + 'string' // NaN
   
   // 불리언 타입
   + true // 1
   + false // 0
   
   // null 타입
   + null // 0
   
   // undefined 타입
   + undefined // NaN
   
   // Symbol 타입
   +Symbol() // TypeError: Cannot convert a Symbol value to a number
   
   // 객체 타입
   + {} // NaN
   + [] // 0
   + [10, 20] // NaN
   + (function(){}) // NaN

3. 불리언 타입으로 변환

   조건식의 평가 결과를 불리언 타입으로 암묵적으로 타입 변환

   불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값( 거짓으로 평가되는 값)으로 구분

   다음은 false로 구분되는 Falsy 값임

   • false
   • undefinded
   • null
   • 0, -0
   • NaN
   • ‘ ‘(빈 문자열)

   이 외의 것은 모두 true로 평가되는 Truthy값

9.3 명시적 타입 변환

1. 문자열 타입으로 변환

• String 생성자 함수를 new 연산자 없이 호출

• Object.prototype.toString 메서드 사용

• 문자열 연결 연산자 이용

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

2. 숫자 타입으로 변환

• Number 생성자 함수를 new 연산자 없이 호출하는 방법

• parseInt, parseFloat함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)

• '+' 단항 산술 연산자를 이용

• '*' 산술 연산자를 이용

  Number('0'); // 0
  
  Number('true'); // 1
  
  ParseInt('-1'); // -1
  
  ParseFloat('10.53') // 10.53
  
  +'10.53'; // 10.53
  
  +false; // 0
  
  '0' * 1; // 0
  
  true * 1; // 1
  

3. 불리언 타입으로 변환

• Boolean 생성자 함수를 new 연산자 없이 호출하는 방법

• ! 부정 논리 연산자를 두번 사용하는 방법

  Boolean('x'); // true
  Boolean(''); // false
  
  Boolean('0'); // false
  Boolean('1'); // true
  Boolean(NaN); // false
  Boolean(Infinity); // true
  
  Boolean(Null); // false
  Boolean(undefined); // false
  
  Boolean({}); // true
  Boolean([]); // true
  
  !!'x'; // true
  !!''; // false
  
  !!'0'; // false
  !!'1'; // true
  !!NaN; // false
  !!Infinity; // true
  
  !!Null; // false
  !!undefined; // false
  
  !!{}; // true
  !![]; // true

9.4 단축 평가

1. 논리 연산자를 사용한 단축 평가

    논리곱(&&) 연산자는 두 개의 피연산자가 모두 true 로 평가될 때  true 를 반환. 
     
    논리합(||) 연산자는 두 개의 피연산자 중 하나만 true로 평가 되어도 true를 반환.
     

   'Cat' && 'Dog' // 'Dog' -> 논리 연산의 결과를 결정하는 두번째 피연산자, dog를 반환
   'Cat' || 'Dog' // 'Cat' -> 논리 연산의 결과를 결정한 첫 번째 피연산자, cat를 반환

   단축평가: 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환. 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략.

   단축 평가 표현식	평가 결과
   true
   false
   true && anything	anything
   false && anything	false

   단축 평가를 사용하면 if 문을 대체할 수 있음. 삼항 조건 연산자도 사용 가능

   // 조건이 Truthy 값일 때
   var done = true;
   var message = '';
   
   // 주어진 조건이 true일 때 
   
   if (done) message = '완료';
   
   // done이 true 라면 message 에 '완료'를 할당
   message = done && '완료'; // 완료
   
   // 조건이 Falsy 값일 때
   var done = false;
   var message = '';
   
   // 주어진 조건이 false일 때 
   if (!done) message = '미완료';
   
   // done이 false 라면 message 에 '미완료'를 할당
   message = done || '미완료'; // 미완료
   
   // 삼항 조건 연산자
   var done = true;
   var message = '';
   
   // 주어진 조건이 false일 때 
   if (done) message = '완료';
   else message = '미완료';
   console.log(message); // 완료
   
   // done이 false 라면 message 에 '미완료'를 할당
   message = done ? '완료':'미완료' ;
   console.log(message); // 완료
   

   객체를 가르키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

   객체는 키와 값으로 구성된 프로퍼티의 집합. 객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null 또는 undefined인 경우, 객체의 프로퍼티를 참조하면 타입 에러 발생. 이때 단축 평가를 사용하면 에러를 발생시키지 않음

   var elem = null;
   var value = elem.value; // TypeError
   
   // 단축 평가 사용
   var elem = null;
   
   //elem이 null 이나 undefined 와 같은 falsy 값이면 elem 으로 평가
   //elem dl Truthy 값이면 elem.value로 평가
   var value = elem && elem.value // null