09 타입 변환, 단축 평가

타입 변환

• 개발자가 의도적으로 값의 타입을 변환하는 것
  • 명시적 타입 변환, 타입 캐스팅

  • 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; 
    var str = x + ''; 
    console.log(typeof str, str); // string 10 
    // x 변수의 값이 변경된 것은 아니다. 
    console.log(typeof x, x); // number 10

• 명시적 타입 변환이나 암묵적 타입 변환이 기존 원시 값을 직접 변경하는 것은 아니다. 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다.

암묵적 타입 변환

• 문자열 타입으로 변환템플릿 리터럴의 표현식 삽입도 문자열 타입으로 암묵적 타입 변환한다.
• +연산자로 문자열 연결 연산자 표현식을 평가하기 위해 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환한다.
• 숫자 타입으로 변환빈 문자열(’’), 빈 배열([]), null, false는 0으로, true는 1로 변환된다.
• 객체, 빈 배열이 아닌 배열, undefined는 NaN이 된다.
• 산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 한다. 피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 표현식의 평가 결과는 NaN이다.
• 불리언 타입으로 변환
• 자바스크립트 엔진은 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다.

명시적 타입 변환

• 문자열 타입으로 변환
  • String 생성자 함수를 new 연산자 없이 호출하는 방법

  • String(1); // "1" 
    String(NaN); // "NaN"

  • Object.prototype.toString 메서드를 사용하는 방법

  • (1).toString(); // "1"

  • 문자열 연결 연산자를 이용하는 방법

  • 1 + ''; // "1"

• 숫자 타입으로 변환
  • Number 생성자 함수를 new 연산자 없이 호출하는 방법
  • parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
    • 단항 산술 연산자를 이용하는 방법산술 연산자를 이용하는 방법
    • 산술 연산자를 이용하는 방법

    • Number('0'); // 0  
      parseInt('0'); // 0
      '0'; // 0  
      '0' \* 1; // 0

• 불리언 타입으로 변환
  • Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
  • ! 부정 논리 연산자를 두번 사용하는 방법

  •     Boolean('x'); // 
        true Boolean(''); // false 
        !!'x'; // true 
        !!''; // false`

단축 평가

• 논리 연산자를 사용한 단축 평가
  • 논리곱 연산자(&&)는 논리 연산의 결과를 결정하는 두 번째 피연산자를 그대로 반환한다.
  • 논리합 연산자(||)는 논리 연산의 결과를 결정한 첫 번째 피연산자를 그대로 반환한다.
  • 단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것이다.
  • 단축 평가를 사용하면 if 문을 대체할 수 있다.
• 옵셔널 체이닝 연산자 ?.
  • 좌항의 피연산자가 null 또는 undefined인 경우 undefined 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

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

• null 병합 연산자 ??
  • 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환한다.
  • 변수에 기본값을 설정할 때 유용하다.
  • 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다.

  • var foo = '' ?? 'default string'; 
    console.log(foo); // ""