[ JS ]Deep-Dive 9장

김재민·2022년 6월 1일
0
post-thumbnail

타입 변환과 단축 평가

자바스크립트의 모든 값은 타입이 있고, 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다.

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

var x = 10;

var str = x.toString();

// str = "10"

표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환하는것을 암묵적 타입 변환 또는 강제 변환이라 한다.

var x = 10;

var str = x + "";

// str = "10"

암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아니라 자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 피연산자의 값을 암묵적 타입 변환을해서 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다.

타입변환에서 가장 중요한것은 코드를 예측할 수 있어야 한다는 점이고, 동료가 작성한 코드를 적확히 이해할 수 있어야 한다. 그리고 쉽게 이해할 수 있는 코드를 작성해야 한다. 이런 점에서 타입변환의 원리를 정확히 이해하는 것이 중요하다.

옵셔널 체이닝 연산자

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

let elem = null;

// elem이 null또는 undefined이면 undefined를 반환하고 아니면 우항의 프로퍼티를 반환한다.
let value = elem?.value;

null 병합 연산자

ES11에서 도입된 null 병합 연산자 ?? 는 좌항의 피연산자가 null 또는 undefined일때 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.

let foo = null ?? "default string"
// foo = "default string"

null 병합 연산자 ??가 도입되기 이전에는 논리 연산자 ||를 사용한 단축 평가를 통해 변수의 기본값을 설정했는데 여기서 큰 차이점이 존재한다.

let foo = "" || "default string";

// foo = "default string"

Falsy 값이 0이나 “”도 기본값으로서 유효하다면 사실 “”가 할당되어야 하는데 “”를 falsy값으로 평가해서 할당되지 않는다. 하지만 null 병합 연산자는 null 또는 undefined가 아니면 할당한다.

let foo = "" ?? "string"
//foo = ""
profile
Junior Front-end engineer

0개의 댓글