자바스크립트 Nullish 병합: 기본값 할당을 위한 종합 가이드

자바스크립트에서 기본값을 할당하는 것은 흔한 작업입니다. 전통적으로 개발자들은 이 목적으로 OR 연산자(||)를 사용해왔습니다. 하지만 ECMAScript 2020에 도입된 nullish 병합 연산자(??)는 특히 null 또는 undefined 값을 다룰 때 기본값 할당을 처리하는 더 정확하고 신뢰할 수 있는 방법을 제공합니다. 이 가이드에서는 nullish 병합 연산자의 구문, 동작, OR 연산자와의 차이점, 그리고 실제 사용 사례를 심도 있게 다룹니다.

Nullish 병합이란 무엇인가?

nullish 병합 연산자(??)는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하는 논리 연산자입니다. 그렇지 않은 경우에는 왼쪽 피연산자를 반환합니다. 간단히 말해, 변수가 엄격하게 null 또는 undefined일 때만 기본값을 제공합니다.

구문

nullish 병합 연산자의 구문은 간단합니다:

leftOperand ?? rightOperand

여기서 leftOperand는 null 또는 undefined인지 확인하려는 변수나 표현식이며, rightOperand는 leftOperand가 실제로 null 또는 undefined일 경우 할당하려는 기본값입니다.

예제

다음 예제를 살펴보겠습니다:

const username = null ?? "Guest";
console.log(username); // 출력: Guest

const age = undefined ?? 25;
console.log(age); // 출력: 25

const city = "London" ?? "Unknown";
console.log(city); // 출력: London

이 예제에서 username은 초기에 null이므로 기본값 "Guest"가 할당됩니다. 마찬가지로 age는 undefined로 시작하기 때문에 25가 할당됩니다. 하지만 city는 null도 undefined도 아니므로 원래 값인 "London"을 유지합니다.

Nullish 값과 Falsy 값

자바스크립트에서 nullish 값과 falsy 값의 차이를 이해하는 것이 중요합니다. nullish 값은 null 또는 undefined입니다. falsy 값은 불리언 컨텍스트에서 마주쳤을 때 거짓으로 간주되는 값입니다. Falsy 값은 다음과 같습니다:

• null
• undefined
• 0 (0)
• NaN (숫자가 아님)
• '' (빈 문자열)
• false

핵심적인 차이점은 nullish 병합 연산자는 null 또는 undefined만 확인하는 반면, OR 연산자(||)는 모든 falsy 값을 확인한다는 것입니다.

??와 ||의 차이점

OR 연산자(||)는 왼쪽 피연산자가 falsy일 경우 오른쪽 피연산자를 반환하는 논리 OR 연산자입니다. 기본값을 할당하는 데 사용할 수 있지만, 0이나 빈 문자열과 같은 값을 다룰 때 예기치 않은 동작을 유발할 수 있습니다.

예제: ||의 함정

const quantity = 0 || 10; // quantity가 누락된 경우 기본값 10을 의도
console.log(quantity); // 출력: 10 (예상치 못함!) 0은 falsy이기 때문

const text = '' || 'Default Text'; //text가 누락된 경우 기본 텍스트를 의도
console.log(text); // 출력: Default Text (예상치 못함!) ''는 falsy이기 때문

첫 번째 예제에서, 우리는 quantity가 누락된 경우(null 또는 undefined)에만 기본 수량 10을 할당하려고 했습니다. 하지만 0이 falsy 값이므로 OR 연산자가 잘못된 기본값을 할당했습니다. 마찬가지로, 빈 문자열은 문자열이 존재함에도(비어있을 뿐) 기본 텍스트가 표시되게 합니다.

??를 사용한 정확성

이전 예제를 nullish 병합 연산자를 사용하여 다시 작성해 보겠습니다:

const quantity = 0 ?? 10;
console.log(quantity); // 출력: 0 (정확함!)

const text = '' ?? 'Default Text';
console.log(text); // 출력: '' (정확함!)

이제 출력은 예상대로입니다. nullish 병합 연산자는 null 또는 undefined만 확인하므로 0과 ''는 유효한 값으로 취급되어 원래 값이 보존됩니다.

Nullish 병합의 사용 사례

nullish 병합 연산자는 변수가 엄격하게 null 또는 undefined일 때만 기본값을 제공해야 하는 다양한 시나리오에서 유용합니다. 다음은 일반적인 사용 사례입니다:

1. 선택적 함수 매개변수 처리

선택적 매개변수가 있는 함수를 정의할 때, 매개변수가 제공되지 않은 경우 기본값을 제공하기 위해 nullish 병합 연산자를 사용할 수 있습니다.

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

greet(); // 출력: Hello, User!
greet("Alice"); // 출력: Hello, Alice!
greet("Bob", "Greetings"); // 출력: Greetings, Bob!

2. 기본 구성 옵션 설정

구성 객체로 작업할 때, 특정 구성 옵션이 지정되지 않은 경우 기본값이 사용되도록 보장하기 위해 nullish 병합 연산자를 사용할 수 있습니다.

const config = {
  timeout: 5000,
  retries: 3
};

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // 기본 타임아웃 10초
  const retries = options.retries ?? 5; // 기본 5회 재시도
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // 출력: Timeout: 5000, Retries: 3
fetchData({}); // 출력: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // 출력: Timeout: 10000, Retries: 5

3. 중첩된 객체 속성 접근

중첩된 객체의 속성에 접근할 때, nullish 병합 연산자를 옵셔널 체이닝(?.)과 결합하여 중간 속성 중 어느 것이라도 null 또는 undefined일 경우 기본값을 제공할 수 있습니다.

const user = {
  profile: {
    address: {
      city: "New York"
    }
  }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // 출력: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // 출력: Unknown

4. API 및 외부 데이터 작업

API나 외부 소스에서 데이터를 가져올 때, 특정 데이터 필드가 누락되었거나 null 또는 undefined 값을 가질 경우 기본값을 제공하기 위해 nullish 병합 연산자를 사용할 수 있습니다. 다른 지역의 사용자 데이터를 검색한다고 가정해 봅시다. 일부 지역에서는 사용자 데이터에 `country` 필드가 포함되지 않을 수 있습니다.

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Unknown Country";
    const timezone = data.timezone ?? "UTC";
    console.log(`User is from: ${country}, Timezone: ${timezone}`);
  } catch (error) {
    console.error("Error fetching user data:", error);
  }
}

// 다른 API 응답 시뮬레이션:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// 이를 테스트하려면 실제 API 또는 모의 fetch가 필요합니다.
// 시연을 위해 응답을 시뮬레이션해 보겠습니다:
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("Unexpected URL");
};

getUserData(123); // 출력: User is from: USA, Timezone: EST
getUserData(456); // 출력: User is from: Unknown Country, Timezone: GMT

연산자 우선순위

nullish 병합 연산자는 비교적 낮은 연산자 우선순위를 가집니다. OR (||) 및 AND (&&) 연산자보다 낮습니다. 따라서 nullish 병합 연산자를 다른 논리 연산자와 결합할 때는 연산 순서를 명시적으로 정의하기 위해 괄호를 사용하는 것이 중요합니다. 그렇지 않으면 구문 오류나 예기치 않은 동작이 발생할 수 있습니다.

예제: 명확성을 위한 괄호 사용

// 괄호 없는 경우 (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// 괄호 있는 경우 (정확함)
const result = false || (null ?? "Default");
console.log(result); // 출력: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // 출력: null

첫 번째 예제에서는 괄호가 없어 자바스크립트 엔진이 의도된 연산 순서를 결정할 수 없기 때문에 SyntaxError가 발생합니다. 괄호를 추가함으로써 우리는 엔진에게 nullish 병합 연산자를 먼저 평가하도록 명시적으로 지시합니다. 두 번째 예제는 유효하지만, || 표현식이 먼저 평가되기 때문에 출력이 다릅니다.

브라우저 호환성

nullish 병합 연산자(??)는 비교적 새로운 기능이므로, 특히 구형 브라우저를 대상으로 하는 경우 브라우저 호환성을 고려하는 것이 중요합니다. 대부분의 최신 브라우저는 nullish 병합 연산자를 지원합니다, 다음을 포함하여:

• Chrome 80+
• Firefox 72+
• Safari 13.1+
• Edge 80+
• Node.js 14+

구형 브라우저를 지원해야 하는 경우, Babel과 같은 트랜스파일러를 사용하여 코드를 호환 가능한 버전의 자바스크립트로 변환할 수 있습니다. Babel은 ?? 연산자를 구형 환경에서 작동하는 동등한 자바스크립트 코드로 변환할 것입니다.

모범 사례

nullish 병합 연산자를 효과적으로 사용하기 위한 몇 가지 모범 사례는 다음과 같습니다:

• nullish 확인에 ?? 사용: 변수가 null 또는 undefined일 때만 특정하여 기본값을 제공하고 싶을 때 nullish 병합 연산자(??)를 사용하십시오.
• 복잡한 표현식에는 괄호 사용: nullish 병합 연산자를 다른 논리 연산자와 결합할 때는 연산 순서를 명확하게 정의하기 위해 괄호를 사용하십시오.
• 브라우저 호환성 고려: 브라우저 호환성을 확인하고 필요한 경우 트랜스파일러를 사용하여 구형 브라우저를 지원하십시오.
• 일관성 있는 사용: 프로젝트 전반에 걸쳐 더 예측 가능한 코딩 스타일을 위해 적절한 곳에 ??를 채택하십시오.
• 옵셔널 체이닝과 결합: 중첩된 객체의 속성에 안전하게 접근하고 기본값을 할당하기 위해 ??를 옵셔널 체이닝 ?.과 함께 사용하십시오.

전역적 고려사항

전 세계 사용자를 대상으로 개발할 때 기본값 할당과 관련하여 다음 사항을 고려하십시오:

• 지역화: 기본값은 사용자의 언어나 지역에 따라 지역화해야 할 수 있습니다. 예를 들어, 기본 통화 기호나 날짜 형식.
• 문화적 규범: 특정 기본값은 문화적 규범에 따라 조정해야 할 수 있습니다. 예를 들어, 기본 환영 메시지는 문화권마다 다를 수 있습니다.
• 접근성: 기본값이 장애가 있는 사용자에게도 접근 가능하고 이해하기 쉬운지 확인하십시오. 사용자 인터페이스에서 기본값에 대해 명확하고 설명적인 레이블을 제공하십시오.
• 시간대와 날짜: 날짜 및 시간으로 작업할 때, 다른 지역의 사용자에게 기본값이 올바르게 표시되도록 적절한 시간대와 날짜 형식을 사용하십시오.

예제: Nullish 병합을 사용한 지역화

사용자의 로케일에 따라 다른 언어로 기본 환영 메시지를 표시하고 싶다고 가정해 봅시다. 지역화된 메시지를 사용할 수 없는 경우 기본 메시지를 제공하기 위해 nullish 병합 연산자를 사용할 수 있습니다.

function getWelcomeMessage(locale) {
  const localizedMessages = {
    en: "Welcome!",
    fr: "Bienvenue !",
    de: "Willkommen!"
  };

  const message = localizedMessages[locale] ?? "Welcome!"; // 로케일을 찾을 수 없는 경우 영어로 기본 설정
  return message;
}

console.log(getWelcomeMessage("fr")); // 출력: Bienvenue !
console.log(getWelcomeMessage("es")); // 출력: Welcome! (영어로 기본 설정됨)

결론

nullish 병합 연산자(??)는 자바스크립트 언어에 귀중한 추가 기능입니다. 특히 0이나 빈 문자열과 같은 값을 다룰 때 OR 연산자(||)에 비해 더 정확하고 신뢰할 수 있는 방법으로 기본값을 할당합니다. 그 구문, 동작 및 사용 사례를 이해함으로써, 기본값 할당을 정확하게 처리하는 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있습니다. 프로젝트에서 nullish 병합 연산자를 사용할 때는 브라우저 호환성, 연산자 우선순위 및 전역적 고려사항을 기억하십시오.

이 가이드에 설명된 모범 사례를 따르면, nullish 병합 연산자를 효과적으로 활용하여 자바스크립트 코드의 품질과 신뢰성을 향상시키고, 더 견고하고 이해하기 쉽게 만들 수 있습니다. 코드에서 항상 명확성과 유지보수성을 우선시하고, nullish 병합 연산자는 이러한 목표를 달성하는 데 강력한 도구가 될 수 있음을 기억하십시오.