이전에 다른 분이 작업해 놓은 프로젝트를 받아서 수정하는 작업을 하게 되었는데 생전 처음 보는 코드를 보게 되었다. ?? 이거 였는데 나는 이게 무슨 오타 인 줄 알았는다. 근데 그럴리 없지. 내가 처음 보는 연산자 였다.

🫠 ?? 연산자 당신은 무엇

nullish 병합 연산자(nullish coalescing operator)라고 불리며 여러 피연산자 중 그 값이 확정되어 있는 변수를 찾을 수 있다.

a ?? b 의 결과는 다음 과 같다

• a가 null도 아니고 undefined가 아니면 a
• 그 외의 경우는 b

이게 도대체 뭔소리지? 간단하게 말하면 ?? 는 왼쪽에 있는 구문이 nullish 값이면 오른쪽 값을 리턴한다.

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자");
// 바이올렛 출력

🙁|| 이랑 무슨 차이?

?? 은 연산자 || 랑 비슷하게 보이고 위에서 ??를 ||로 바꾸었을 때 결과값도 동일하게 나오지만 확연한 차이가 있다

• || 는 첫번째 truthy 값을 반환 한다.
• ?? 는 첫번째 정의된 값을 반환 한다.

특히, null과 undefined, 숫자 0을 구분지어야 할때 차이점이 분명하게 드러난다.

let height = 0;

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

height || 100 은 height에 0을 할당 했지만 0을 falsy한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리함. 따라서 height || 100의 값은 100이 나온다.

반면에 height ?? 100은 height의 값이 정확하게 null이나 undefined일 경우에만 100이 되기 때문에 height에 0이라는 값을 할당했기 때문에 0이 출력된다.

🔦 더욱 확실하게 구별가능한 예시

const volume = localstorage.volume || 0.5
const volume = localstorage.volume ?? 0.5

해당 경우에서 || 연산자를 사용하게 되면 localstorage.volume 의 값이 0이면 fasly 값으로 판단되어 0.5가 할당되며, 영원히 음소거를 할 수 없을 것이며(....) 하지만 ?? 연산자를 사용하게 되면 nullish한 경우에만 0.5가 할당된다.

😳 [참고] 자바스크립트에서 truty, fasly 값에 혼란을 주는 경우들

- 빈문자열(''): 빈 문자열은 falsy
- 0: 숫자 0은 falsy. 하지만 문자열 "0"은 빈 문자열이 아니므로 truthy 값으로 간주.
- NaN : NaN은 숫자가 아니라고 표시하는 값으로, falsy. 그러나 NaN이 변수에 할당되면 해당 변수는 truthy
- 빈 객체 ({}): 빈 객체는 truthy
- null & undefined: 둘 다 falsy

falsy한 값으로 인해서 의도치 않은 연산이 실행된 경우를 생각해보면 ?? 를 사용하면 확실하게 불필요한 타입들을 걸러낼 수 있다.

🔫 사용시 주의 사항

연산자 우선순위 이슈

?? 의 연산자는 대부분의 연산자 보다 나중에 평가 되기 때문에 복잡한 표현식에서는 괄호를 추가해서 사용해 주는 것이 좋다. 안정성 이슈로 인하여 && 혹은 || 와 함께 사용이 불가능 하지만 하지만 괄호를 사용하면 사용 가능하다.