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

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

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

사용방법

  • expression: 검사할 값입니다. 이 값이 null 또는 undefined가 아니면 result는 이 값이 됩니다.
  • defaultValue: expression이 null 또는 undefined일 경우 반환될 값입니다.
inline ad
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

RECENT POSTS

개미를 퇴치하는 자연적인 방법 중 가장 효과적인 방법 6가지

개미를 자연스럽게 퇴치하는 여러 가지 방법 중 가장 효과적인 몇 가지 방법을 소개하겠습니다. 이 방법들은 모두 집에서 쉽게 구할 수 있는 재료를 사용하여 개미를...

부심장을 지키는 올바른 식단: 먹으면 좋은 음식과 나쁜 음식

부정맥 환자는 심장 건강을 유지하고 증상을 관리하기 위해 특정 음식을 피하고, 심장 건강에 좋은 음식을 섭취하는 것이 중요합니다. 다음은 부정맥 환자가 피해야 나쁜 음식과...

부정맥 arrhythmia: 정의, 원인, 증상, 진단 및 검사, 치료 방법, 예방 방법, 주의사항, 생활 습관

정의 부정맥(Arrhythmia)은 심장의 정상적인 리듬이 불규칙해지거나 비정상적으로 빨라지거나 느려지는 상태를 말합니다. 이는 심장의 전기적 신호 전달에 문제가 생겨 발생하며, 다양한 원인과 증상을 가지고 있습니다. 원인 부정맥의 원인은...

폐렴 pneumonia: 정의, 원인, 증상, 진단 및 검사, 치료 방법, 예방 방법, 주의사항, 생활 습관

정의 폐렴(Pneumonia)은 폐의 폐포(air sacs)에 염증이 생겨 액체나 고름이 차는 질환입니다. 주로 세균, 바이러스, 곰팡이 등의 감염에 의해 발생하며, 심한 경우 생명을 위협할 수 있습니다. 원인 폐렴의...