[JS] nullish 값 종류

🗣️ 자바스크립트의 nullish 값은 무엇이 있을까요?

• 의도: nullish로 평가되는 데이터 타입과 값의 종류를 이해하고 있는지 확인하는 질문

• 팁: nullish 병합 연산자를 언급하면 좋다.

• 나의 답안

  nullish는 null 또는 undefined를 포함하는 상태를 의미합니다.
  null은 값이 "비어 있음" 또는 "명시적으로 없음"을 나타냅니다.
  undefined는 변수가 선언되었지만 값이 할당되지 않았음을 의미합니다.

  nullish 병합 연산자인 ??를 사용하여 nullish 값을 활용할 수 있습니다.
  nullish 병합 연산자는 값이 null 또는 undefined인 경우에만 반응합니다.
  falsy한 값에 포함되는 0, false, NaN, 빈 문자열까지 기본값으로 처리하는 논리 OR 연산자(||)와 차이가 있습니다.
  따라서 nullish한 값에 대해서만 병합을 실행하여 0, 빈 문자열 등을 유효한 값으로 처리할 수 있습니다.

• 주어진 답안 (모범 답안)

  자바스크립트에서 nullish는 말 그대로 null과 같은 값을 뜻합니다.
  이에 대한 예시로는 대표적으로 null과 undefined가 있습니다.

  여기서 알고 넘어가면 좋은 게 있는데, 바로 nullish 병합 연산자입니다.
  기존에는 논리 OR 연산자 ||를 이용해서 병합을 구현했습니다.
  이렇게 되면 0이나 ''처럼 빈 문자열 등이 false로 평가되어 제대로 동작하지 않을 가능성이 생기곤 합니다.
  그때 바로 물음표 2개를 뭍인 null 병합 연산자 ??로 대체해준다면 nullish한 값에 대해서만 병합을 실행하게 됩니다.

---

📝 개념 정리

nullish는 JavaScript에서 null 또는 undefined 값과 관련된 개념으로, 값이 정의되지 않았거나 nullish한 상태임을 나타낸다.
nullish는 JavaScript에서 null 또는 undefined를 포함하는 상태를 의미한다.

이를 활용하기 위해 ES2020(ES11)에서 도입된 Nullish Coalescing Operator(??)는 null 또는 undefined인 경우에만 기본값을 할당하거나 다른 값을 선택하는 데 사용된다.

🌟 nullish와 관련된 동작

1. null과 undefined
   • null : 값이 "비어 있음" 또는 "명시적으로 없음"을 나타낸다.
   • undefined : 변수가 선언되었지만 값이 할당되지 않았음을 의미한다.

2. ?? 연산자
   • ??는 Nullish Coalescing Operator로, null 또는 undefined인 경우에만 오른쪽 값을 반환한다.
   • 이 연산자는 논리적 OR(||)과 비슷하지만, falsy한 값(예: 0, false, NaN, 빈 문자열 "")을 다루는 방식이 다르다.

---

🌟 Nullish Coalescing Operator 사용법

const value1 = null;
const result1 = value1 ?? "기본값";
console.log(result1); // "기본값"

const value2 = undefined;
const result2 = value2 ?? "기본값";
console.log(result2); // "기본값"

const value3 = 0;
const result3 = value3 ?? "기본값";
console.log(result3); // 0 (0은 nullish하지 않으므로 그대로 반환)

---

🌟 ??와 ||의 차이

• ㅣㅣ는 falsy 값(null, undefined, 0, false, NaN, "")을 모두 기본값으로 처리한다.
• ??는 nullish 값(null, undefined)에만 반응한다.

const value1 = 0;

// || 사용
const resultWithOr = value1 || "기본값";
console.log(resultWithOr); // "기본값" (0이 falsy 값으로 처리됨)

// ?? 사용
const resultWithNullish = value1 ?? "기본값";
console.log(resultWithNullish); // 0 (0은 nullish 값이 아님)

---

🌟 응용 예시

1. 기본값 설정

   function greet(name) {
     const userName = name ?? "Guest";
     console.log(`Hello, ${userName}!`);
   }
   
   greet(null); // "Hello, Guest!"
   greet(undefined); // "Hello, Guest!";
   greet("Alice"); // "Hello, Alice!";

2. 옵션 값 처리

   const config = {
     timeout: 0, // 0은 유효한 값
     retries: undefined,
   };
   
   const timeout = config.timeout ?? 5000; // 기본값 사용 안 함
   const retries = config.retries ?? 3; // 기본값 사용
   
   console.log(timeout); // 0
   console.log(retries); // 3

3. 중첩된 nullish 값 처리

   const user = {
     preferences: {
       theme: null,
     },
   };
   
   const theme = user.preferences.theme ?? "light";
   console.log(theme); // "light"

---

🌟 주의사항

1. ||와 혼동하지 않기
   ||는 모든 falsy 값(0, false, NaN, "")을 기본값으로 처리하는 반면, ??는 오직 null과 undefined에만 반응한다.

2. 연산자 우선순위
   ??는 다른 연산자보다 우선순위가 낮아, && 또는 ||와 함께 사용할 때는 괄호를 명시해야 한다.

   const result = null || undefined ?? "Default"; // SyntaxError
   const resultFixed = (null || undefined) ?? "Default";
   console.log(resultFixed); // "Default"

   • ||(Logical OR)는 우선순위가 낮은 연산자이다.
   • ??(Nullish Coalescing Operator)는 ||와 우선순위가 동일하거나 더 낮은 연산자로, 같이 사용할 때는 반드시 명확히 괄호로 구분해야 한다.
   • JavaScript의 문법 규칙에 따라, ||와 ??를 섞어 사용할 경우 명확하지 않은 동작을 방지하기 위해 SyntaxError를 발생시킨다.
     이것은 연산자 간의 모호한 결합을 방지하기 위한 의도된 동작이다.