자바스크립트의 null 병합 연산자 (??)

📘 자바스크립트의 null 병합 연산자 (??)

---

1️⃣ null 병합 연산자란?

null 병합 연산자(??)는 자바스크립트에서 null 또는 undefined를 기본값으로 대체할 때 사용하는 논리 연산자입니다.

기존의 || 연산자가 모든 Falsy 값을 처리하는 것과 달리, null 병합 연산자는 null과 undefined만 처리합니다.

문법:

const result = value1 ?? value2;

• value1이 null 또는 undefined이면 value2를 반환.
• 그렇지 않으면 value1을 반환.

---

2️⃣ 기본 사용법

기본값 설정

null 병합 연산자를 사용하면 값이 없을 때만 기본값을 설정할 수 있습니다.

const username = null;
const displayName = username ?? "Guest";

console.log(displayName); // "Guest"

---

3️⃣ ??와 ||의 차이

OR 연산자 (||)의 문제점

|| 연산자는 Falsy 값(e.g., false, 0, NaN, "", null, undefined)을 모두 처리합니다.

즉, 값이 0 또는 "" 같은 Truthy하지 않은 값이어도 기본값을 반환하는 문제가 발생할 수 있습니다.

const value = 0;
const result = value || 10; // 0은 Falsy로 간주되므로 기본값 10이 반환됨
console.log(result); // 10

null 병합 연산자 (??)의 해결

?? 연산자는 null과 undefined만 기본값으로 대체하므로, 0이나 "" 같은 값은 유지됩니다.

const value = 0;
const result = value ?? 10; // 0은 Falsy지만 null 또는 undefined가 아니므로 유지
console.log(result); // 0

---

4️⃣ null 병합 연산자의 활용 사례

1. 기본값 설정

값이 없을 때 기본값을 제공하는 일반적인 상황에서 사용됩니다.

const name = undefined;
const defaultName = name ?? "Anonymous";
console.log(defaultName); // "Anonymous"

2. 다중 기본값 설정

여러 값 중 첫 번째로 유효한 값을 찾는 데 유용합니다.

const value1 = null;
const value2 = undefined;
const value3 = "값이 존재합니다";

const result = value1 ?? value2 ?? value3 ?? "기본값";
console.log(result); // "값이 존재합니다"

---

5️⃣ 우선순위와 괄호 사용

• ??의 우선순위는 ||, &&보다 낮습니다.
• 따라서 함께 사용할 때는 괄호로 우선순위를 명확히 지정해야 합니다.

예시

const a = undefined; // null이나 undefined일 때 ?? 동작
const b = "값1"; // Truthy 값
const c = ""; // 빈 문자열 (Falsy 값)

const result = a ?? b && c; // b && c가 먼저 실행됨
console.log(result); // "" (b && c 결과가 Falsy 값인 c)

const result2 = (a ?? b) && c; // a ?? b가 먼저 실행됨
console.log(result2); // "" (a ?? b 결과인 b와 c의 && 연산 결과)

---

6️⃣ 주의사항

1. undefined와 null만 처리
   •   ??는 undefined와 null만 처리합니다.0, false, NaN, ""는 Truthy/Falsy 여부와 관계없이 반환됩니다.
2. 브라우저 호환성
   •   null 병합 연산자는 ES2020에서 도입되었습니다.구형 브라우저에서는 Babel 같은 트랜스파일러를 통해 지원해야 합니다.

---

7️⃣ 결론

• null 병합 연산자(??)는 정확한 기본값 설정을 위해 설계된 연산자입니다.
• 기존의 || 연산자로 발생하던 Falsy 값 처리 문제를 해결하며, 코드를 더 명확하고 의도적으로 작성할 수 있습니다.
• 기본값 설정, 사용자 입력 처리, 다중 기본값 처리 등 다양한 상황에서 활용할 수 있으니, 코드를 작성할 때 꼭 활용해 보세요!