[JavaScript] nullish coalescing opertor (null 병합 연산자)

여러 피연산자 중에 그 값이 '확정되어있는' 변수를 찾을 수 있다

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

• a가 null도 아니고 undefined도 아니면 a
• 이외엔 b

이를 ??없이 나타낸다고 하면

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

이를 활용해서 세 변수 중 실제 값이 있는 변수의 값을 출력하는데

세 변수 모두 값이 없다면 '익명의 사용자'가 출력되도록 해보죠

 

이럴 때 ?? 를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있다 

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

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

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

이 둘을 바꿔서 결과를 출력해도 동일하게 나오는 경우도 많아

상당히 비슷하지만 중요한 차이가 있다

• ||는 첫번째  truthy 값을 반환
• ??는 첫번째 정의(defined)된 값을 반환 

null과 undefined 그리고 0을 구분할 때 이 차이점이 중요한 역할

예시:

height = height ?? 100;

height이 정의되지 않으면 100이 출력되지만

let height = 0;

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

이 예시처럼 ||은 0을 falsy한 값으로 취급했기에 null과 undefined을 동일하게 처리

그러나 ??는 이 둘일 경우에만 100이 되고 0이 출력이 되어버린다

 

연산자 우선순위

??의 우선순위는 5로 꽤 낮다. 따라서 =와 ?보다는 먼저 처리되지만

다른 연산자들보다는 나중에 평가된다 그래서 복잡한 표현식에서는 괄호 () 안에 넣어주는게 좋다

예시:

let height = null;
let width = null;

// 괄호를 추가!
let area = (height ?? 100) * (width ?? 50); // 그렇지 않으면 *가 먼저 실행

alert(area); // 5000

거기다 안정성 관련 이슈때문에 ||나 &&와 같이 사용이 안된다.

 

요약

• nullish 병합연산자??를 사용하면 '값이 할당된' 변수를 빠르게 찾을 수 있음
• 괄호 없이 ||나 &&와 함께 사용 금지
• ??의 연사자 우선순위는 대다수 연산자보다 낮지만 ?와 =보다는 높음