nullish 병합 연산자

• nullish 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어있는'변수를 찾을 수 있다.

• a ?? b의 평가 결과

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

---

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

---

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

---

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

• nullish 병합 연산자는 OR 연산자 ||와 상당히 유사해 보임.
• 두 연산자의 사이에는 중요한 차이점이 있습니다.
  • ||는 첫번째 truthy값을 반환
  • ??는 첫번째 정의 된(defined)값을 반환

---

let height = 0;

console.log(height || 100); // 100
console.log(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 height = null;
let width = null;

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

console.log(area); // 5000

• 안전 관련 이슈 때문에 ??는 &&나 ||와 함께 사용 불가

let x = 1 && 2 ?? 3; // '&&' 및 '??' 작업은 괄호 없이 혼합해서 사용할 수 없습니다.ts(5076)

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

---

javascript.info 사이트에서 공부한 내용 정리