??= (Nullish Coalescing Assignment) 널 병합 할당 연산자, 이제 더 간편하게!

안녕하세요! 자바스크립트를 사용하다 보면 || 연산자를 이용해 변수에 기본값을 할당하는 경우가 많죠. 예를 들어, options.width 값이 존재하지 않을 경우 100을 할당하고 싶다면 보통 이렇게 작성합니다.

JavaScript

options.width = options.width || 100;

그런데 만약 options.width에 0이나 false와 같은 "Falsy" 값이 들어 있다면 어떻게 될까요? || 연산자는 0과 false를 false로 간주하기 때문에 100이라는 기본값이 할당되어 버립니다. 개발자의 의도와는 다른 결과가 나오는 거죠.

바로 이 문제를 해결하기 위해 ??= (Nullish Coalescing Assignment) 연산자가 등장했습니다!

---

??=는 null 또는 undefined일 때만 작동해요

??= 연산자는 변수의 현재 값이 null 또는 **undefined**일 때만 오른쪽 값을 할당합니다. 0이나 false, 그리고 빈 문자열("")과 같은 값들은 무시하고 그대로 둡니다.

위의 예시를 ??=로 바꿔보면 다음과 같습니다.

JavaScript

 

options.width ??= 100;

이 코드는 다음과 같이 동작합니다.

• options.width가 null이거나 undefined이면 100을 할당합니다.
• options.width가 0이거나 false, 또는 ""이면 아무런 할당도 하지 않고 원래 값을 유지합니다.

---

||= 와 ??=의 차이점

||= 연산자와 ??= 연산자의 가장 큰 차이점은 바로 **'어떤 값을 Falsy로 간주하는가'**에 있습니다.

• ||= (Logical OR Assignment): null, undefined를 포함한 모든 Falsy 값(0, false, "")에 대해 동작합니다.
• ??= (Nullish Coalescing Assignment): 오직 null과 undefined에 대해서만 동작합니다.

간단한 예시로 비교해볼까요?

JavaScript

 

let myValue = 0;

// ||를 사용한 경우
myValue = myValue || 10; // myValue는 10이 됩니다. (0이 Falsy 값이므로)

// ??를 사용한 경우
myValue = myValue ?? 10; // myValue는 그대로 0을 유지합니다. (0은 null이나 undefined가 아니므로)

위 그림처럼, ||는 더 넓은 범위의 Falsy 값을 다루는 반면, ??는 오직 null과 undefined에만 초점을 맞춥니다.

---

언제 ??= 를 사용하면 좋을까요?

• 기본값 할당: 변수에 기본값을 설정하고 싶은데, 0이나 false처럼 의미 있는 값이 덮어쓰여지는 것을 원치 않을 때 유용합니다.
• 객체 속성 초기화: 객체의 속성이 존재하지 않을 때만 초기값을 주고 싶을 때 사용하면 코드가 훨씬 깔끔해집니다.

??= 연산자를 사용하면 코드가 더 간결하고 의도를 명확하게 표현할 수 있어 실수를 줄이고 가독성을 높일 수 있습니다. 앞으로는 null이나 undefined에 대한 기본값 할당은 ??=를 활용해 보세요!