Null 병합 연산자 : '??'

0. 기본정보

#스파르타코딩클럽 #부트캠프 #주말자습
- 학습주제: JavaScript 문법

- 학습내용: Null 병합 연산자('??')

- 참고자료: 모던 자바스크립트 https://ko.javascript.info/nullish-coalescing-operator
- 학습일: 2024. 5. 11.

---

Null 병합 연산자 : '??'

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

x = a ?? b

/* 
??연산자 없이 동일한 동작을 하는 코드
x = (a !== null && !== undefined) ? a : b;
*/

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

(다른 예시)

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

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

 

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

• ||는 첫 번째 truthy 값을 반환함 //falshy 값: false, 0, "", null, undefined, NaN
• ??는 첫 번째 정의된(defined) 값을 반환함 - null 또는 undefined
  // 0도 값이 있다 판단하기 때문에 ||와 차이가 있음

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

연산자 우선순위

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

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

let height = null;
let width = null;

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

alert(area); // 5000

- 안정성 이슈 때문에 ??는 &&나 ||와 함께 사용 못 함 (제약을 피하려면 반드시 괄호를 추가할 것!)

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

alert(x); // 2