JavaScript, ??= 와 ||= 그리고 ??= 연산자에 대하여

몰라도 내 코드 작성에 전혀 문제가 되지 않는 연산자이지만 다른 사람의 코드를 분석하다 보면 볼 수 있는 연산자이므로 알고는 있어야 하기에 정리해 봅니다.

먼저 ??= 연산자는 Nullish Coalescing Assignment(널 병합 대입 연산자) 입니다. 좌변이 null 이거나 undefined 일때만 우변을 대입합니다. 코드로 보면 …

x ??= y;

위의 코드는 다음 코드와 동일한 코드이며 아래 코드로 설명을 대신합니다.

if (x === null || x === undefined) {
  x = y;
}

위의 코드는 다음 코드와 같습니다.

x = x ?? y;

참고로 ?? 연산자는 Nullish Coalescing Operator(널 병합 연산자)자로 ??= 연산자의 형제이기도 합니다. 위의 코드는 다음과 같습니다.

const result = (a === null || a === undefined) ? b : a;

자바스크립트 특유의 falsy 값으로 판정되는 false, 빈문자열, 0, NaN, null, undefined 값 중 오직 null, undefined 만을 특별하게 취급해주는 것이 바로 ?? 연산자와 ??= 연산자입니다.

??= 연산자를 살펴보다 보면 ||= 연산자와 &&= 연산자도 함께 살펴봐야 혼란이 없습니다. 먼저 ||= 연산자는 좌변이 falsy 값이면 대입합니다. 예를 들어 다음 코드를 보면 …

let a = 0;
a ??= 100;

console.log(a); // 0

&&= 연산자는 ||= 연산자와는 반대로 좌변이 truthy(falsy 값이 아닌 값)이면 대입합니다. 예들 들어 다음 코드를 보면 …

let z = "abc";
z &&= "xyz";
console.log(z); // "xyz"