본문 바로가기
자바스크립트 Deep Dive

[Javascript] null 병합 연산자(??)

by 준생님 2023. 2. 9.

ES11에서 도입된 null 병합 연산자(??)에 대해 알아보자.

정의는 좌항의 피연산자가 null 또는 undefined인 경우 우항, 그렇지 않으면 좌항을 리턴한다.

간단하게 [null, undefined]만 false 취급한다고 생각하면 쉽다.

var elem = null;
var value = elem ?? 'default value';
console.log(value) // default value

따라서 기본값을 설정할 때 유용하게 사용할 수 있다.

function getString (str) {
    console.log(str)  // undefined
    str = str ?? 'Default String';
    return str;
}

console.log(getString()) // Default String

 

기존의 단축 평가로 기본값을 설정할때는 다음과같은 문제점이 발생 가능했다.

function getString (str) {
    console.log(str) // ''
    str = str || 'Default String'; // ''는 False로 간주하여 Default String 리턴
    return str;
}

console.log(getString('')) // Default String

의도는 '' 빈값을 리턴하길 바랬으나 Default String을 리턴해버린다.

 

null 병합 연산자를 사용해보자.

function getString (str) {
    console.log(str) // ''
    str = str ?? 'Default String';
    return str;
}

console.log(getString('')) // ''

null 병합 연산자는 null, undefined만 false 취급하기에 이러한 혼동이 없다.