주벨로퍼의 개발 공부

1. null 병합 연산자(nullish coalescing operator) 

  ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있다.

  a ?? b의 평가 결과는 다음과 같습니다.

• a가 null도 아니고 undefined도 아니면 a
• 그 외의 경우는 b

  다음 예시를 통해 살펴보자.

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

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder

2. '||' 와 '??'의 차이

  null 병합 연산자는 OR 연산자 ||와 상당히 유사하다.

  실제로 위 예시에서 ??를 ||로 바꿔도 그 결과는 동일하다.

  그런데 두 연산자 사이에는 중요한 차이점이 있다.

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

  null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 한다.

  예시를 살펴보자.

let height = 0;

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

  height 변수에는 0이라는 number type의 data가 할당되어있다. 즉 정의된 값이다.

  하지만 || 연산자는 첫 번째 값이 falsy 하다면 false로 간주한다.

  자바스크립트에는 6가지 falsy한 값이 있다. null, undefined, 0, 빈 문자열, NaN, false가 그것이다.

  그렇기 때문에 100을 출력한다.

  반면 ?? 연산자는 그 값이 falsy 하다하더라도 정의된 값이면 해당 값을 반환하기 때문에 0을 출력한다.

  즉 height가 null과 undefined일때만 100을 출력할 것이다.

3. 연산자 우선순위와 주의사항

  '??'의 연산자 우선순위는 5로 꽤 낮다.

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

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

  또한 주의사항으로는 안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못합니다.

  아래 예시를 실행하면 문법 에러가 발생한다.

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

//제약을 피하려면 괄호를 사용해주세요.

let x = (1 && 2) ?? 3; // 제대로 동작합니다.

alert(x); // 2

*출처 : ko.javascript.info/nullish-coalescing-operator#ref-138