[JS] ?? - null 병합 연산자

 

 

null 병합 연산자

  null 병합 연산자(nullish coalescing operator)라고 불리는 ??에 대해서 알아 봅시다. ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어있는' 변수를 찾을 수 있습니다.

 

a ?? b의 결과는 아래와 같습니다.

 

• a가 null 또는 undefined가 아니면 a
• 그 외의 경우는 b(a가 null 또는 undefined)

 

  null 병합 연산자 ?? 없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다.

 

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

 

  이 길어지는 코드를 간단하게 표현할 수 있습니다. 하나의 예시를 더 보겠습니다.

let firstName = null;
let lastName = null;
let nickName = "SuperCoder";

// 결과는 null이나 undefined가 아닌 첫 번째 피연산자입니다.
alert(firstName ?? lastName ?? nickName ?? "Anonymous");    // SuperCoder

 

 

??와 ||의 차이

  null 병합 연산자(??)는 OR 연산자(||)와 상당히 유사해 보입니다. 실제로 ??를 ||로 바꿔도 그 결과는 동일합니다. 하지만 이전 단락에서 살펴봤듯이 ??는 null과 undefined를 체크합니다.

 

• ||는 첫 번째 truthy값을 반환(값이 없어도)
• ??는 첫 번째 정의된(defined)값을 반환(값이 있는)

 

  null과 undefined, 숫자 0을 구분지어 다뤄야 할 때 이 차이는 매우 중요한 역할을 합니다. 아래 예시를 살펴봅시다.

 height = height ?? 100;

 

  height에 값이 정의되어 있지 않다면(null 또는 undefined)라면 height엔 100이 할당됩니다.
  이제 ??와 ||을 비교해봅시다.

 

  let height = 0;

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

 

  이러한 특징 때문에 0이 할당되는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합합니다.

 

 

연산자 우선순위

  ??의 연산자 우선순위는 5로 꽤 낮습니다. 따라서 ??는 =와 ?보다는 먼저, 대부분의 연산자보다는 나중에 평가됩니다. 그렇기 때문에 복잡한 표현식 안에서 ??를 사용해 값을 하나 선택할 땐 괄호를 추가해주는 것이 좋습니다.

 

예시)

let height = null;
let width = null;

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

alert(area);    // 5000

 

 

  여기서 괄호를 사용하지 않으면 *가 먼저 실행됩니다.

  ??엔 자바스크립트 언어에서 규정한 또 다른 제약사항이 있습니다.

  >> 안정성 관련 이슈로 인해 ??는 &&나 ||와 함께 사용하지 못합니다.

 

 

예시)

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

 

  이 제약에 대해선 아직 논쟁이 많지만 사람들이 ||를 ??로 바꾸기 시작하면서 만드는 실수를 방지하고자 명세서에 제약이 추가된 상황입니다. 이 제약을 피하기 위해선 괄호를 사용해주세요!

let x = (1 && 2) ?? 3;    // 동작합니다!

alert(x);        // 2