[자바스크립트] null 병합 연산자 -'??'

 

null 병합 연산자 '??'

• null 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있다.
• 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을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 한다.

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이 출력
• 이런 특징 때문에 높이처럼 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합하다.

 

 

연산자 우선순위

• ??는 연산순위가 5로 매우 낮다.
• 복잡한 표현식 안에서는 괄호를 추가해서 사용하자

⚠️ 주의

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

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

 

 

요약

• null 병합 연산자 ??를 사용하면 피연산자 중 ‘값이 할당된’ 변수를 빠르게 찾을 수 있다.
• ??는 변수에 기본값을 할당하는 용도로 사용할 수 있다.

// height가 null이나 undefined인 경우, 100을 할당
height = height ?? 100;

• 괄호 없이 ??를 ||나 &&와 함께 사용하는 것은 금지

 

 

📌 참고

• 모던 JavaScript 튜토리얼