[JavaScript] nullish 병합 연산자 '??'

 

 

nullish 병합 연산자 (??') 란

leftExpr ?? rightExpr

 

let a = 0;
let b = a||10;

console.log(b); // 10


let c = 0;
let d = c??10;

console.log(d); // 10

let e = null;
let f = e ?? 10;

console.log(f); // 10

let g = undefined;
let h = g ?? 10;

console.log(h); // 10

null 병합 연산자(??)는 논리 연산자로 왼쪽 피연산자 값이 null이나 undefined일 때, 오른쪽 피연산자값을 반환합니다.
null 병합연산자 '??'를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어 있는' 변수를 찾을 수 있어 주로 || 연산자의 대용으로 사용 됩니다.

 

let num = 0;

console.log(num || 100); // 100
console.log(num ?? 100); // 0

 

num|| 100은 num에 0을 할당했지만 JavaScript에서는 0을 앞선 ▶true &false 포스팅 에서 알아본 것 처럼 falsy 한 값으로 취급하기 때문에 null이나 undefined를 할당한 것과 동일하게 처리합니다. 따라서 num|| 100의 평가 결과는 100입니다.

반면에 num ?? 100의 평가 결과는 num에 정확하게 null이나 undefined일 경우에만 오른쪽 피연사값인 100이 됩니다.

이러한 특징 때문에 0이 할당해야할 땐  ||(or)보다 ??가 적합합니다.

 

연산자 우선순위

?? 연산자는 =와 ? 보다는 먼저 평가되지만 대부분의 나머지 연산자보다는 우선순위가 낮습니다. 따라서 복잡한 표현식에서 ?? 연산자를 사용할 때에는 괄호()를 추가하여 우선순위를 높여주는 것이 좋습니다.

 

let height = null;
let width = null;

let area1 = height ?? 100 * width ?? 50;

// 괄호를 추가하여 우선순위를 높여준다. 
let area2 = (height ?? 100) * (width ?? 50);


console.log(area1); // 0
console.log(area2); // 5000

 

let area = height ?? (100 * width) ?? 50;

괄호()를 추가하지 않으면 위의 코드처럼 본래 의도와 다르게 동작을 하기 때문에 주의할 필요가 있습니다.

 

 

---

 

 

즉 null 과 undefined만 체크하고 싶은 경우 null(??) 병합 연산자를 사용하고 false로 평가되는 모든값을 체크하고 싶은 경우 || (OR) 연산자를 사용하면 될 것 같습니다.