null 병합 연산자 ??

null 병합 연산자(??)

null 병합 연산자(nullish coalescing operator)는 ?? 를 사용하는 문법

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

 

헷갈릴수 있는게 ||(OR)과 똑같은 행동을 한다고 생각할 수는 있는데 ||은 0을 fasly한 값으로 보기 때문에 null, undefined, 0을 fasly하게 봄 그래서 0이 할당될수 있는 경우 null 병합 연산자를 사용하는게 정확함

 

예시

a ?? b

• a가 null도 아니도 undefined도 아니면 a
• 그 외에는 b

 

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

 

a ?? b와 위 코드와 동일한 동작을 함

 

연산자 우선 순위

??의 연산자 우선순위는 5로 꽤 낮음

따라서 ??는 = 와 ? 보다는 먼저 대부분의 연산자보다는 나중에 평가됨

그렇기 때문에 복잡한 표현식 안에서 ??를 사용해 값을 하나 선택할 땐 괄호를 추가하는 것이 좋음

 

let height = null;
let width = null;

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

alert(area); // 5000

 

 

??와 ||의 차이

ullish 병합 연산자는 OR 연산자 ||와 상당히 유사해 보임

하지만 두 연산자간의 차이가 명확히 있음

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

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 ?? 100의 결과값은 0

이런 특징 때문에 높이처럼 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합함