[js] 단축 평가

April 10, 2022

❗️ 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것

🔮 논리 연산자 사용

논리합 또는 논리곱 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다.
논리합 또는 논리곱 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가 된다.

'Cat' && 'Dog'

'Cat' || 'Dog'

이처럼 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 변환한다.

객체를 가리키기를 기대하는 변수의 값이 객체가 아닌 null 또는 undefined 인 경우 객체의 프로퍼티를 참조하면 타입 에러가 발생

const elem = null;
const value = elem && elem.value

function fun(str){  // 단축 평가 사용
    str = str || '';
    return str.length;
}
fun();  // 0
fun('hi');  // 2

function fun(str = ''){  // 매개변수 기본값 설정
    return str.length;
}
fun();  // 0
fun('hi');  // 2

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

const elem = null;
const value = elem?.value;

elem 이 null 이기에 value 의 값은 undefined 가 된다.
해당 연사자가 도입되기 전에는 논리 연산자 && 를 사용해 단축 평가를 통해 변수가 null 인지 undefined 인지를 확인했다.
논리 연산자일 경우 Falsy 값이면 우항의 프로퍼티 참조를 이어가지 않았지만, 옵셔널 체이닝 연산자는 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
ex) 논리 연산자는 0을 false로 판단하여 참조를 이어가지 않지만 옵셔널 체이닝 연산자는 참조를 이어간다.

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

const value = null ?? 'default string'; // 'default string'