[JavaScript] nullish 병합 연산자 '??'(Nullish coalescing operator)

 

nullish 병합 연산자는 짧은 문법으로 값이 확정되어 있는 변수를 찾을 수 있습니다.

 

c = a ?? b

 

해당 코드의 결과는 다음과 같습니다.

a가 null도 아니고 undefined도 아니면 c에는 a가 할당됩니다.

그 외의 경우에는 c에 a가 할당됩니다.

 

nullish 병합 연산자 ?? 없이 동일한 동작을 하는 코드를 작성하면 다음과 같습니다.

c = (a !== null && a !== undefined) ? a : b;

 

nullish 병합 연산자를 사용하지 않으니 코드가 무척 길어지게 됩니다.

 

 

다른 예시를 봐볼까요?

 

// Q. user가 해당되는 곳에 작성해주세요.

const travel = null;
const reading = null;
const hobby = "수영";
const fruit = null;
alert(travel ?? reading ?? hobby ?? "없음"); // 수영
alert(travel ?? reading ?? fruit ?? "없음"); // 없음

 

총 네개의 변수가 있습니다.

 

첫번째 alert문에서는 hobby변수에 값이 있으므로 해당 값이 출력됩니다.

두번째 alert문의 경우 세 변수 모두 값이 없기 때문에 "없음"이라는 값이 출력됩니다.

 

이럴 때 nullish 병합 연산자 ??를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있습니다.

 

'??'와 '||'의 차이

 

보다보니 nullish 병합 연산자와 OR 연산자는 동일해보입니다. 위의 코드도 ||로 바꾸면 동일한 값이 나옵니다.

 

사실 두 연산자 사이에는 큰 차이점이 있습니다.

 

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

//////////////////////////////

let info = '';

alert(info || '정보없음!'); // 정보없음
alert(info ?? '정보없음!'); // ''

 

OR연산자는 첫 번째 truthy 값을 반환합니다. 

height와 info 변수에 각 각 0과 ''를 할당했지만 falsy값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리합니다.

 

반면 nullish 부정 연산자는 첫 번째 정의된 값을 반환합니다.

height와 info 변수에는 값이 할당되어있기 때문에 얼럿창에는 할당 값들이 출력됩니다.

AND or OR 연산자와의 체이닝 불가능

 

??의 연산자 우선순위는 낮기 때문에 대부분의 연산자보다 나중에 평가됩니다.

복잡한 표현식에서는 괄호를 추가하는 게 좋습니다.

let height = null;
let width = null;

// 괄호를 추가!
let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

 

또한 ??는 안정성때문에 &&나 ||와 함께 사용하지못합니다. (SyntaxError가 발생합니다!)

이 제약을 피하기 위해서는 괄호를 사용해야 합니다.

let x = 1 && 2 ?? 3; // SyntaxError: Unexpected token '??'
let y = (1 && 2) ?? 3; // 제대로 동작합니다.

alert(y); // 2

 

Optional chaining 연산자(?.)와의 관계

 

??는 null과 undefined를 처리하고

?.는 null과 undefined일 수 있는 객체의 속성에 접근할 때 유용합니다.

let foo = { someFooProp: "hi" };

console.log(foo.someFooProp?.toUpperCase());  // "HI"
console.log(foo.someBarProp?.toUpperCase()); // undefined

 

?.를 통해 null, undefined에 접근한 후 맞다면 기본값을 출력하고 값이 있다면 해당 값을 출력하도록 코드를 작성할 수 있습니다.

 

결론

- nullish 병합 연산자  ?? 를 사용하면 피연산자 중 ‘값이 할당된’ 변수를 빠르게 찾을 수 있습니다.
- ??의 연산자 우선순위는 대다수의 연산자보다 낮고 ?와 = 보다는 높습니다.
- 괄호 없이 ??를 ||나 &&와 함께 사용하는 것은 금지되어있습니다.

 

 

참고 자료

모던자바스크립트: nullish 병합 연산자 '??'
MDN: Nullish coalescing operator
MDN: 논리 연산자(||)