널 병합 연산자 '??'

??

• nullish 병합 연산자 ??를 사용하면 피연산자 중 ‘값이 할당된’ 변수를 빠르게 찾을 수 있습니다.

• ??는 변수에 기본값을 할당하는 용도로 사용할 수 있습니다.

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

• ??의 연산자 우선순위는 대다수의 연산자보다 낮고 ?와 = 보다는 높습니다.

• 괄호 없이 ??를 ||나 &&와 함께 사용하는 것은 금지되어있습니다.

---

a ?? b의 뜻과 결과

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

<script>
// 아래 두 코드는 동일한 동작을 합니다.
x = a ?? b //훨씬 짧죠?

x = (a !== null && a !== undefined) ? a : b;
</script>

---

값이 할당된 변수 찾기

• firstName, lastName, nickName이란 변수에 사용자 이름이나 별명을 저장하는데, 사용자가 아무런 정보도 입력하지 않는 케이스도 허용한다고 해보겠습니다.

• 화면엔 세 변수 중 실제 값이 있는 변수의 값을 출력하는데, 세 변수 모두 값이 없다면 '익명의 사용자’가 출력되도록 해보죠.

<script>
let firstName = null;
let lastName = null;
let nickName = "두찌";
//let nickName = null; //nickName도 null이나 undefined라면 alert창에 익명의 사용자 출력

// null이나 undefined가 아닌 첫 번째 피연산자 nickName(두찌)
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // alert에 두찌 출력
</script>

---

'??'와 '||'(OR)의 차이

• ||는 첫 번째 truthy 값을 반환합니다.
• ??는 첫 번째 정의된(defined) 값을 반환합니다.
• null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때 위 차이점은 매우 중요한 역할을 합니다.

<script>
height = height ?? 100; //height에 값이 정의되지 않은경우 height엔 100이 할당됩니다.(100이라는 값이 할당됐기 때문에)
</script>

---

• ||은 0을 falsy한 값으로 취급함. null, undefined를 할당한 것과 같음. 따라서 첫번째 true값을 찾는 ||의 평가 결과는 100입니다.
• ??는 height가 정확하게 null이나 undefined일 경우에만 100이 출력됩니다. 아래에선 height에 0이라는 값을 할당했기 때문에 얼럿창엔 0이 출력됩니다.

<script>
let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0
</script>

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

---

연산자 우선순위

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

<script>
let height = null;
let width = null;

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

alert(area); // 5000
</script>

• 위 예시에서 괄호를 작성하지 않으면 원치않게 아래 코드로 동작합니다.(*가 ??보다 우선순위가 높기 때문에)

<script>
let area = height ?? (100 * width) ?? 50;
</script>

---

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

• 안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용하지 못합니다.
• 아래 코드는 문법 에러 발생

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

• 함께 사용하려면 괄호 필수

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

alert(x); // 2
</script>

---

출처: 모던 자바스크립트