9. 타입 변환과 단축 평가

1. 타입 변환이란?

- 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다.

- 표현식을 평가하는 도중 엔진에 의해 암묵적으로 타입이 변환되는 것을 암묵적 타입 변환 또는 타입 강제 변환이라 한다.

- 타입변환은 기존의 원시 값을 변경하는 것이 아니다. (immutable value이므로) 새로운 원시 값을 생성하는것

 

2. 암묵적 타입 변환

- ex) '10' + 2 // '102' 

- ex) !0 // ->true

 

  2.1 문자열 타입으로 변환

  - 피연산자중 하나 이상이 문자열일 때 주로 발생한다. 

  - 템플릿 리터럴의 표현식 삽입은 평가 결과를 문자열 타입으로 암묵적 타입 변경한다.

 

  2.2 숫자 타입으로 변경

  - 피연산자를 숫자 타입으로 변환할 수 없는경우 NaN을 띄운다.

  - +연산자를 주었을때 빈 문자열, 빈 배열, null, false는 0으로, true는 1로 변환된다.

 

  3.3 Boolean 타입으로 변환

  - 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 또는 Falsy값으로 구분한다.

  - Falsy의 예 ) false, undefined, null, 0, -0, NaN, ''

 

3. 명시적 타입 변환

  3.1 문자열 타입으로 변환

  - 문자열 타입이 아닌 값을 문자열 타입으로 변환하는 법

    1) String 생성자 함수를 new 연산자 없이 호출 ( String(1); )

    2) Object.prototype.toString 메서드를 이용하는 방법 ( (1).toString(); )

    3) 문자열 연결 연산자를 이용하는 방법 ( 1 + ''; )

 

  3.2 숫자 타입으로 변환

  - 숫자 타입이 아닌 값을 숫자 타입으로 변환하는 법

    1) Number  생성자 함수를 new 연산자 없이 호출 ( Number('0'); )

    2) parseInt, parseFloat 함수를 사용하는 방법 (문자열만 변환 가능) ( parseInt('-1'); )

    3) +단항 산술 연산자를 이용하는 법 ( +'0'; )

    4) * 산술 연산자를 이용하는 법 ( '0' * 1; )

 

  3.3 불리언 타입으로 변환

  - 불리언 타입이 아닌 값을 불리언 타입으로 변환하는 법

    1) Boolean 생성자 함수를 new 연산자 없이 호출하는 방법 ( Boolean('x'); )

    2) ! 부정논리 연산자를 두번 사용하는 법 ( !! 'x' ) =>true

 

4. 단축 평가

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

  - 논리합 또는 논리 곱 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다.

  - 논리곱(&&) 연산자는 두개의 피연산자가 모두 true일 때 true를 반환한다.

  - 연산 방향은 좌항에서 우항으로 평가가 진행된다.

  - 논리곱 연산자는 논리 연산의 결과를 결정하는 두번쨰 피연산자를 반환한다 (true시)

  - 논리합(||) 연산자는 둘중 하나만 true로 평가가 되어도true를 반환한다.

  - 논리합 연산자는 연산의 논리를 결정한 연산자의 값을 반환한다.

  - 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는 것을 단축평가라 한다.

  - 단축평가는 표현식을 평가하는 도중에 평가결과가 확정된 경우 나머지 평가 과정을 생략하는 것이다.

  - 어떤조건이 Truthy일때 무언가를 해야한다면 &&를, Falsy일땐 논리합으로 if문을 대체할 수 있다.

  - 객체의 참조값이 null일때 단축 평가를 이용해서 에러를 예방할 수 있다.

  - 함수의 매개변수에 기본값을 설정할 때 논리합 단축평가를 쓰면 용이하다.

 

  4.2 옵셔널 체이닝 연산자 ( ?. )

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

var elem = null;
// elem이 null또는 undefined면 undefined를 반환하고, 그렇지 않으면 프로퍼티를 참조한다.
var value = elem?.value;
console.log(value); //undefined

//만약 단축평가 &&를 사용할 때 좌항 피연산자가 0이나 ''일때 문제가 생긴다

var str = '';
var length = str && str.length;
console.log (length); // '' 길이를 참조하지 못한다.

 

4.3 null 병합 연산자 ( ?? )

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

  - 변수에 기본값을 설정할 때 유용하다.

var foo = null ?? 'default string';
console.log(foo); //'default string' 좌항이 널이면 우항을, 좌항이 있으면 좌항을 참조한다.

//논리합 단축평가를 사용한다면 ''나 0에서 문제를 야기할 수 있다.
var foo = '' ?? 'default string';
console.log(foo); // ''