?? 연산자

🍄 Nullish Coalescing [??]

🌱 ?? 연산자란?

• ES2020에서 등장한 새로운 연산자로서 ?? 의 형태로 사용한다.
  OR연산자(||)를 통한 기본값 처리의 문제점으로, A 또는(||) B 를 비교하는 예시에서, A가 false 일지라도 B가 true 이면 결과는 true가 된다.
  이러한 문제점을 보완하기 위해 등장한 연산자가 ?? 이다.

function isEnabled(options) {
  return options.enabled || true;
}

isEnabled({})   // true

isEnabled({enabled: null})  // true

isEnabled({enabled: false})  // true  -> false인데 true가 반환되는 문제점!

• ?? 연산자를 사용하면 nullish 즉, undefined와 null에 대해서만 기본값 처리를 할 수 있다.
  즉, OR 연산자(||)와 비슷하게 동작하지만, ?? 연산자는 좌항이 undefined와 null이 아닌 경우에만 우항을 선택하며, 그 외의 경우에는 항상 좌항을 선택한다.

• ?? 는 || (또는)의 엄격한 의미로서, undefined 와 null만 해당된다.
  undefined 또는 null이면 ?? 뒤에를 실행하고, 그 외는 ??앞에를 그대로 실행한다.

자바스크립트에서는 undefined나 null 뿐만 아니라 false, 0, "", NaN 등 다양한 값들이 falsy가 될 수 있다.
OR 연산자(||)를 사용하면 모든 falsy값들을 기본값으로 처리하기 때문에 문제가 될 수 있다. 하지만 ?? 연산자를 || 대신 사용하면, null, undefined 를 제외한 falsy값은 배제할 수 있다.
좌항이 null, undefined 일때만 우항으로 넘어가기 때문에, 좌항이 false인 경우(=error)를 인정하지 않을 수 있다.

function isEnabled(options) {
  return options.enabled ?? true;
}

isEnabled({})   // true

isEnabled({enabled: null})  // true

isEnabled({enabled: false})  // false (좌항이 false이기 때문)
// 죄항이 null 또는 undefined 일때만 우항(true)으로 넘어간다 

🔆 사용 형태

• 물음표 기호(??) 2개를 사용.
• 좌항이 null / undefined 라면, 우항 리턴. (기본적으로 좌항 기준)

🌱 ??연산자 사용 예시

🪴 ??

• OR연산자(||) 는 모든 falsy값을 다루기 때문에 에러 확률이 높다. 따라서 대안으로 ??연산자를 사용하면 falsy값은 null과 undefined 만 다룰 수 있다.

let user;
alert(user ?? "Anonymous"); // Anonymous (user가 undefined 이기 때문에 우항 반환)

user = "John";
alert(user ?? "Anonymous"); // John (user에 값이 정의되었기 때문에 좌항 반환)


// 0을 유효한 값으로 받고 싶을 때
let height = 0;

alert(height || 100); // 100  -> 0은 false로 간주하여 100이 출력
alert(height ?? 100); // 0    -> null, undefined 외에는 모두 유효한 값으로 처리

Nullish coalescing operator Ref link