모던 자바스크립트 Deep Dive 9장

타입 변환과 단축 평가

---

 

1. 타입 변환이란?

타입 변환에는 개발자가 의도적으로 값의 타입을 반환하는 명시적 타입 변환과 

자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 암묵적 타입 변환이 있다.

 

var x = 10;

// 숫자를 문자열로 타입 캐스팅한다.
var str = x.toString();

var str = x + "";
// 문자열 연결 연산자는 숫자 타입의 x의 값을 새로운 문자열로 암묵적으로 생성한다.

 

하지만 암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아닌, 새로운 타입 값을 만들어 단 한 번 사용하고 번린다.

 

 

 

2. 암묵적 타입 변환

자바스크립트는 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식을 평가한다.

 

문자열 타입으로 변환

1 + '2' // "12"

+ 연산자는 피연산자 중 하나 이상이 문자열일 때 문자열 연결 연산자로 동작한다.

 

 

숫자 타입으로 변환

1 - '1'
1 * '10'
1 / 'one'
'1' > 0
+'1'

 

산술 연산자 중 + (문자열 연결 연산자로 취급)을 제외한 나머지,

+ 단항 연산자 는 숫자 타입으로 암묵적으로 변환한다.

 

 

불리언 타입으로 변환

if('')
if(true)
if(0)
if(null)

 

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

if(false)
if(null)
if(undefined)
if(0)
if(NaN)
if('')

// 전부 false

 

이 유명한 falsy값들은 외워두는 것이 좋다.

 

 

3. 명시적 타입 변환

문자열 타입 변환

String(1)
(1).toString()
1 + ''

 

• new 없이 String 생성자 함수
• toString 메서드
• 문자열 연산자

 

숫자 타입 변환

Number('0')
parseInt('0')
+'0';
'0'*1;

 

• new 없이 Number 생성자 함수
• parseInt
• + 단항 연산자
• * 연산자

 

불리언 타입으로 변환

Boolean('x');
!!'x'

 

• new 없이 Boolean 생성자 함수
• !!  

 

4. 단축 평가

논리 연산자를 사용하여 if문 줄이기

var done = true;
var message = '';

if (done) message = '완료';

message = done && '완료'

 

&&연산자는 done이 true라면 두 번째 피연산자를 평가해 보아야한다. 그렇기 때문에 두 번째 피연산자 평가 결과를 반환한다.

 

var done = false;
var message = '';

if (done) message = '미완료';

message = done || '미완료'

 

|| 연산자는 done이 false라면 두 번째 피연산자가 true인지 확인을 해야한다. 그렇기 때문에 두 번쨰 피연산자 평가 결과를 반환한다.

 

 

주로 객체를 가리키는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 사용한다.

var value = null;
var value = elem && elem.value;

 

 

옵셔널 체이닝 연산자

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

var elem = null;

var value = elem?.value

 

 

null 병합 연산자

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

var foo = null ?? 'default string'; // "default string"
var foo = "" ?? 'default string'; // ""