자바스크립트에서 "??"

nullish 병합 연산자 '??'

자바스크립트 코드에서 "??" 를 보신 적이 있나요?

?? 는 nullish 병합 연산자라고 불립니다.
해당 연산자를 사용하면 짧은 문법으로 여러 변수 중 확정되어있는 변수를 찾을 수 있습니다.

let result = a ?? b 

1. a가 null도 아니고 undefined도 아니면 result의 값은 a
2. 그 외의 경우는 b

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

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

비교 연산자와 논리 연산자만으로 코드를 작성하면 매우 길어집니다.

예시를 보며 더 깊게 알아봅시다.

let firstName = null;
let lastName = null;
let nickName = "moomooj";

alert(firstName ?? lastName ?? nickName ?? true ); // moomooj

1. nullish 병합 연산자는 왼쪽에서 오른쪽으로 진행됩니다.
2. 각 변수가 null이나 undefined인지 확인합니다.
3. null 이나 undefined라면 계속 연산을 이어나갑니다.
4. null 이나 undefined가 아니라면 연산을 멈추고 해당 정의된 값을 반환합니다.

"??"와 "||"의 차이

nullish 병합 연산자는 OR 연산자와 상당히 유사하지만 중요한 차이점이 있습니다.

예시를 보며 알아봅시다.

let height = 0;

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

1. OR 연산자는 height 값을 먼저 Boolean 타입으로 연산을 합니다.
2. Nullish 연산자는 height의 값이 null, 또는 undefined인지 확인합니다.

해석:
OR 연산자에서 height는 false라서 100 반환.
Nullish 연산자에서 height는 null 또는 undefined가 아니기 때문에 0을 반환.

❗️ 주의사항
안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못합니다.

let x = 1 && 2 ?? 3; // SyntaxError: Unexpected token '??'

참고: 자바스크립트 튜토리얼