13. nullish 병합 연산자 (??)

nullish 병합 연산자 (??)

1. null과 undefined 값만을 체크해 비어있지 않은 값을 찾는 연산자입니다.
2. ||와의 차이점
   • ||: falsy(0, '', false 포함)를 건너뜀
   • ??: null과 undefined만 건너뜀 (숫자 0이나 false는 값으로 인정)
3. 연산자 우선순위
4. ??는 우선순위가 낮아 괄호를 사용해 명확하게 표현하는 것이 좋습니다.

---

nullish 병합 연산자의 평가 방식

let a = null;
let b = undefined;
let c = "값 있음";

let result = a ?? b ?? c ?? "기본값";
console.log(result); // "값 있음"

1. a와 b는 nullish이므로 건너뜀.
2. c는 값이 존재하므로 반환됨.
3. ??는 null과 undefined만 체크합니다.

---

??와 ||의 차이점

??와 ||는 유사하게 동작하지만, 중요한 차이점이 있습니다.

연산자 체크 기준 예시 결과

`		`	falsy 체크 (값이 false로 평가되면 넘어감)
??	nullish 체크 (null, undefined만 넘어감)	0 ?? 100	0

예제

let height = 0;

alert(height || 100);
// ||는 falsy 체크를 하므로 0은 falsy로 간주, 결과: 100

alert(height ?? 100);
// ??는 nullish 체크를 하므로 0은 값으로 인정, 결과: 0

• ||는 값이 0, false, '' 등 falsy로 평가될 경우 기본값을 반환.
• ??는 값이 null 또는 undefined일 때만 기본값을 반환.

---

3항 연산자와의 비교

??를 사용하지 않고 3항 연산자로 동일한 로직을 구현하려면 코드가 길어집니다.

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

단점

• 코드가 길고 가독성이 떨어짐.
• 여러 변수를 체크하면 더 복잡해짐.
• ??를 사용한 경우
• let x = a ?? b;

---

연산자 우선순위와 괄호 사용

??의 우선순위는 낮기 때문에 다른 연산자와 함께 사용 시 괄호를 명확히 사용해야 합니다.

문제 코드

let area = height ?? 100 * width ?? 50;
// 순서: height ?? (100 * width) ?? 50

올바른 코드

let area = (height ?? 100) * (width ?? 50);

---

??와 &&, ||를 함께 사용할 때

??는 &&나 ||와 직접 혼합해서 사용할 수 없습니다.

let x = 1 && 2 ?? 3; // SyntaxError 발생!

괄호를 사용해 해결

let x = (1 && 2) ?? 3; // 결과: 2

---

안전한 사용법

• 기본 값 제공 시 ?? 사용 (nullish 값만 체크)
• 다른 연산자와 함께 사용할 땐 괄호를 사용해 명확하게 표현

예제

let userHeight = null;
let defaultHeight = 100;

let height = userHeight ?? defaultHeight; // 100
let validHeight = (userHeight ?? 100) * 2; // 200

---

nullish 병합 연산자(??)의 실무 활용

??는 안전한 코드 작성에 매우 유용합니다. 특히, 예상치 못한 nullish 값(null, undefined)으로 인해 발생할 수 있는 오류를 방지하는 데 도움을 줍니다.

---

1. 기본값 제공

   let userInput = null;
   let defaultInput = "기본 값";
   
   let finalInput = userInput ?? defaultInput;
   console.log(finalInput); // 결과: "기본 값"
   
   

   • userInput이 nullish(null, undefined)이므로 defaultInput이 반환됩니다.
   • 이를 통해 코드의 예측 가능성이 향상됩니다.
2. 변수가 nullish 상태일 때 기본값을 할당함으로써, 프로그램이 예상치 못한 동작을 하지 않도록 보호합니다.

---

1. 불필요한 조건문 제거

   // 기존 조건문 사용
   let result;
   if (a !== null && a !== undefined) {
       result = a;
   } else {
       result = b;
   }
   
   // nullish 병합 연산자를 사용한 경우
   let result = a ?? b;
   
   

   • ??를 사용하면 코드가 간단하고 명확해져 실수를 줄일 수 있습니다.
2. nullish 상태를 체크하기 위해 조건문을 사용하는 대신, ??를 사용하여 간결하고 안전한 코드를 작성할 수 있습니다.

---

1. 의도하지 않은 falsy 값 방지이로 인해 의도치 않은 값의 무시를 방지할 수 있습니다.
   • ||를 사용할 경우, 0이 무시되는 문제가 발생합니다.
   • ??는 null, undefined만 체크하므로 안전합니다.
2. let pageCount = 0; console.log(pageCount || 10); // 결과: 10 (0이 무시됨) console.log(pageCount ?? 10); // 결과: 0 (0은 nullish가 아니므로 사용됨)
3. ??는 0, false, ''와 같은 falsy 값을 nullish 값과 구분합니다.

---

1. API 호출 및 데이터 처리 시

   let apiResponse = {
       user: {
           name: null,
           age: 25
       }
   };
   
   let userName = apiResponse.user.name ?? "Unknown User";
   console.log(userName); // 결과: "Unknown User"
   
   

   • 외부 데이터가 nullish일 경우에도 코드가 정상적으로 동작합니다.
   • 이를 통해 안정성과 가독성을 동시에 확보할 수 있습니다.
2. 외부 데이터나 API 호출 시 값이 없을 가능성을 대비해 기본값을 제공하여 오류를 방지합니다.

---

예시

잘못된 연산을 방지

let value = null;

// 잘못된 연산
console.log(value.length); // TypeError: Cannot read property 'length' of null

// nullish 병합으로 방지
let safeValue = value ?? "";
console.log(safeValue.length); // 결과: 0

DOM 요소를 안전하게 처리

let element = document.querySelector(".non-existent-element");

// nullish 병합으로 안전한 처리
let elementText = element?.textContent ?? "기본 텍스트";
console.log(elementText); // 결과: "기본 텍스트"

---

nullish 병합 연산자와 디폴트 매개변수 비교

함수의 매개변수에서 기본값을 제공하는 방법과 유사하지만, 더 유연한 활용이 가능합니다.

function printMessage(message = "기본 메시지") {
   console.log(message);
}

let msg = null;
printMessage(msg); // 결과: "기본 메시지"

let anotherMsg = null ?? "기본 메시지";
console.log(anotherMsg); // 결과: "기본 메시지"

---