JavaScript / Nullish coalescing operator (??)

Nullish coalescing operator (??)

Nullish coalescing operator (??)는 JavaScript에서 도입된 연산자로,

변수가 null 또는 undefined일 경우에만 오른쪽 피연산자의 값을 반환하는 연산자입니다 !

즉 변수가 nullish 한 상태일 때만 다른 대체 값을 제공하고, 그렇지 않으면 원래 값을 유지하는데 사용됩니다.

 

기본 문법을 살펴볼까요?

// a : 평가할 값
// b : a가 null또는 undefined일 때 반활할 대체 값

let result = a ?? b;

 

a가 null또는 undefined일 경우 b를 반환합니다.

그렇지 않으면 a의 값을 유지합니다.

 

이 연산자는 논리 연산자 || 와 비슷하게 작동하지만 차이점이 있는데요 !

??는 nullish 값(null, undefined)에만 반응하기때문에,

flasy 값인 0, "", false에는 유효한 값으로 취급합니다.

 

let foo = null;
let bar = foo ?? 'default';
console.log(bar); // 'default', foo가 null이므로 'default'가 할당됨

let baz = 0;
let qux = baz ?? 42;
console.log(qux); // 0, baz는 0이지만 null이나 undefined가 아니므로 0을 유지

 

위 예시를 보면

foo 는 null이므로 bar는'default'값을 받습니다.

하지만 baz는 0 이므로 nullish하지 않기 때문에 qux는 0으로 유지됩니다.

 

??와 ||의 차이점

|| 연산자도 비슷하게 동작하지만, 모든 falsy값(0, "", false)에 반응하여 오른쪽값을 반환합니다.

반면에, ??는 오직 null과 undefined에만 반응합니다 !

 

|| 예시

let a = 0;
let result = a || 5;
console.log(result); // 5, a가 falsy 값(0)이므로 5가 할당됨

 

?? 예시

let a = 0;
let result = a ?? 5;
console.log(result); // 0, a는 nullish하지 않으므로 그대로 0을 반환

 

?? 사용 시 주의 사항

?? 연산자는 우선순위가 매우매우 낮습니다. 따라서 && 또는 || 같은 다른 논리 연산자와 함께 사용할 때는 괄호를 사용하여 의도를 명확히 해야합니다.

 

예시코드를 살펴보면

let a = null;
let b = false;
let result = a ?? b && 'foo'; // ??보다 &&가 먼저 평가됨
console.log(result); // 'foo', b && 'foo'가 먼저 평가되어 'foo'가 반환

 

이렇게 될 경우 b && 'foo'가 먼저 실행되므로 ?? 연산자의 오른쪽 피연산자로 'foo'가 들어갑니다.

우선순위를 명확하게 하려면 괄호를 사용해야 합니다!

 

let result = (a ?? b) && 'foo';
console.log(result); // false, a ?? b가 false가 되므로 최종 결과도 false

실행 결과 - 우선 순위

---

정리

• ?? 는 null과 undefined만 체크하는 연산자로, 값이 없는 경우 대체 값을 제공하는데 유용합니다.
• Falsy 값(0, "", false)을 유지하면서 대체 값을 제공할 때 사용합니다.
• ||와 달리 nullish 값만 처리한다는 점에서 더 세밀하게 동작합니다.