[JS] ?? 연산자

자료 출처 - 모던 JavaScript 튜토리얼

⚠️ 스펙에 추가된 지 얼마 안 된 문법입니다. 구식 브라우저는 폴리필이 필요합니다.

?? 이 뭐지

x = a ?? b

?? 연산자는 null 병합 연산자(nullish coalescing operator)라고 부르고 다음과 같이 사용한다. 위 식은 아래의 식과 동일한 결과를 갖는다.

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

a ?? b의 평가 결과

• a가 null도 아니고 undefine도 아니면 a
• 그렇지 않으면 b

|| 랑 똑같은 거 아니야❓

x = a ?? b;
x = a || b;

a가 null이나 undefine이면 두 식 x에 b값이 대입된다. 그럼 ||연산자와 ?? 연산자는 뭐가 다를까?

• || 연산자는 첫 번째 truthy값을 찾는다.
• ?? 연산자는 첫 번째 정의된(defined) 값을 찾는다.

let height = 0;

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

위 코드에서 첫 번째 alert는 100을 두 번째 alert는 0을 화면에 출력한다. 0은 정의된(defined) 값이지만 falsy값이기 때문이다. 0이 들어갈 수 있는 변수는 ?? 연산자를 쓰는 것이 좀 더 적절하다. 근데 브라우저에서 지원 안 할 수도 있다.

이게 머꼬❓

let area = height ?? 100 * width ?? 50;
let area = height ?? (100 * width) ?? 50;

두 코드는 결과 값이 똑같다. ?? 연산자는 우선 순위(5)가 매우 낮다. 웬만한 연산자보다 우선 순위가 낮기 때문에 괄호로 잘 묶어주자.

let area = (height ?? 100) * (width ?? 50);

&& 이거 하고 || 이거 하고 ?? 이것도 하고...

let x = 1 && 2 ?? 3;

이제 새로운 연산자를 배웠으니 이것저것 넣어서 멋지게 사용하고 싶은데... 이렇게 쓰면 에러가 난다. ?? 연산자는 안정성 관련 이슈로 || 나 &&과 함께 쓸 수 없다. 😢 그래도 괄호를 쓰면 해당 문제를 해결 할 수 있다.

let x = (1 && 2) ?? 3; // 👌