Nullish Coalescing Operator (??)

Nullish Coalescing Operator(??)

Nullish Coalescing Operator 는 JavaScript에서 null또는 undefined 일때만 기본값을 제공하는 연산자입니다. 이 연산자는 값이 없거나 정의되지 않은 경우에만 기본값을 설정하고, 그 외의 경우에는 원래 값을 그대로 유지합니다.

 

?? 는 ES11(ECMAScript 2020)에서 도입되었으며, null 과 undefiend 외의 falsy 값(빈 문자열, 0, flase, NaN)을 기본값으로 처리하지 않기 때문에 , 보다 정확한 기본값 처리가 가능합니다.

 

기본문법

let result = value ?? defaultValue;

 

?? 와 || (OR 연산자)의 차이점

?? 와 || 는 기본값을 설정하는 방식에서 차이가 있습니다. 둘 다 "왼쪽 값이 없으면 오른쪽 값을 반환"하는 방식이지만, 다르게 작동합니다.

|| (OR 연산자)는 모든 falsy 값(null , undefined, false, 0, NaN, " ")을 기본값으로 처리합니다.

??(Nullish Coalescing Operator)는 오직 null 또는 undefined 일때만 기본값을 반환합니다.

 

|| 예시

let result = "" || "default";  // "default"
let num = 0 || 100;  // 100
let isActive = false || true;  // true

 위 예시에서 빈 문자열(""), 0, false 모두 false로 취급되어 "defalut",100, true 로 반환됩니다.

 

?? 예시

let result = "" ?? "default";  // ""
let num = 0 ?? 100;  // 0
let isActive = false ?? true;  // false

위 예시에서 빈 문자열(""), 0, false는 그대로 값으로 반환되고, null 또는 undefined 일때만 기본값인 "default", 100, true가 반환됩니다.

 

?? 의 사용 예제

const user = { name: "Alice", age: null };

// age가 null이면 기본값 25를 설정
const userAge = user.age ?? 25;

console.log(userAge);  // 25

function getUser() {
  return null;
}

const user = getUser() ?? { name: "Default" };
console.log(user);  // { name: "Default" }

const user = { profile: { name: "Bob", age: undefined } };

// `user.profile.age`가 undefined일 경우 기본값으로 30을 설정
const userAge = user?.profile?.age ?? 30;

console.log(userAge);  // 30