널 병합 연산자 Nullish coalescing operator (??) 에 대해서 알아보자.

By
markettraders
-
0
572
javascript
javascript

널 병합 연산자 Nullish coalescing operator (??)는 JavaScript에서 null이나 undefined 값을 체크하는 데 사용되는 연산자입니다. 이 연산자는 좌변의 피연산자가 null 또는 undefined일 경우 우변의 피연산자를 반환하고, 그렇지 않은 경우 좌변의 피연산자를 반환합니다. 이는 기존의 논리 OR 연산자 (||)와 유사하지만, 0, NaN, 또는 빈 문자열 (“”) 같이 falsy 값들을 유효한 값으로 처리한다는 점에서 차이가 있습니다.

사용방법

  • expression: 검사할 값입니다. 이 값이 null 또는 undefined가 아니면 result는 이 값이 됩니다.
  • defaultValue: expression이 null 또는 undefined일 경우 반환될 값입니다.
const result = expression ?? defaultValue;

기본값 설정

변수에 값이 할당되지 않았을 때 기본값을 제공하고자 할 때 유용합니다. 예를 들어, 함수 매개변수에 기본값을 설정하거나, API 호출 결과와 같이 예측 불가능한 데이터에 대한 기본값을 설정할 때 사용할 수 있습니다.

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

설정 값이 falsy 값일 경우에도 유지해야 할 때

0, “” (빈 문자열), 또는 false와 같은 falsy 값들이 유효한 입력 값이거나 설정 값으로 사용되어야 할 경우, ?? 연산자는 이러한 값들이 null 또는 undefined로 잘못 대체되지 않도록 보장합니다.

const volume = 0;
console.log(volume ?? 10); // 0

구성 객체의 선택적 속성

구성 객체에서 선택적 속성을 다룰 때, 해당 속성이 설정되지 않았을 때만 기본값을 적용하고 싶을 때 유용합니다. 이는 애플리케이션의 설정이나 사용자 설정 등 다양한 옵션을 다룰 때 특히 유용합니다.

const config = { timeout: 0 };
const timeoutDuration = config.timeout ?? 3000;
console.log(timeoutDuration); // 0

체이닝 연산과 함께 사용

null 또는 undefined 값을 안전하게 처리하면서 객체의 속성에 접근할 때, Optional Chaining (?.) 연산자와 결합하여 사용될 수 있습니다. 이는 객체의 깊은 속성 값을 안전하게 접근하고, 필요한 경우 기본값을 제공할 때 유용합니다.

const user = {
  profile: {
    name: null,
  },
};

const userName = user.profile.name ?? "Anonymous";
console.log(userName); // "Anonymous"

예시

위의 예시에서 첫 번째 console.log는 name이 null이기 때문에 defaultName인 “John Doe”를 출력합니다. 두 번째 console.log는 age가 0이지만, 0은 null이나 undefined가 아니기 때문에 ?? 연산자의 좌변 값인 0을 그대로 사용합니다.

const name = null;
const defaultName = "John Doe";
console.log(name ?? defaultName); // "John Doe"

const age = 0;
console.log(age ?? 25); // 0

?? vs ||

Nullish coalescing operator (??)와 논리 OR 연산자 (||)의 주요 차이점은 falsy 값(0, “”, NaN, false, null, undefined)을 처리하는 방식에 있습니다.

const height = 0;

console.log(height || 100); // 100
console.log(height ?? 100); // 0

위 예시에서 || 연산자는 height가 0 (falsy 값)이기 때문에 우변의 100을 반환합니다. 반면, ?? 연산자는 height의 값이 null 또는 undefined가 아니기 때문에 0을 그대로 반환합니다. 따라서, ?? 연산자는 null 또는 undefined의 경우에만 우변의 값을 반환하며, 다른 falsy 값들은 유효한 값으로 간주합니다.

Nullish coalescing operator는 코드에서 null 또는 undefined 값을 다룰 때 보다 명확한 의도를 전달할 수 있도록 도와주며, 특히 설정 값이나 옵셔널한 값들을 다룰 때 유용하게 사용될 수 있습니다.

관련문서

Nullish coalescing operator : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing