JavaScript Nullish Coalescing 연산자: 널 병합 연산자 사용법

JavaScript의 Nullish Coalescing 연산자(??)는 비교적 최근에 도입된 기능으로, 특히 null이나 undefined 값을 다루는 상황에서 매우 유용합니다. 이 글에서는 Nullish Coalescing 연산자의 의미와 사용 방법, 그리고 이와 관련된 다양한 예제에 대해 알아보겠습니다.

Nullish Coalescing 연산자란?

Nullish Coalescing 연산자는 두 개의 피연산자를 비교하면서, 앞의 값이 null 또는 undefined일 경우 뒤의 값을 반환하는 이항 연산자입니다. 구문은 다음과 같습니다:

피연산자1 ?? 피연산자2

여기서 피연산자1이 null이나 undefined라면, 결과는 피연산자2가 됩니다. 그렇지 않다면 결과는 피연산자1이 됩니다.

기본 구문과 작동 방식

기본 구문은 간단합니다. 예를 들어보겠습니다:

javascript
let name = null;
let defaultName = "John Doe";
let result = name ?? defaultName;
console.log(result); // "John Doe"

이 예제에서 name는 null입니다. 따라서 name ?? defaultName는 defaultName의 값인 "John Doe"를 반환합니다.

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

많은 개발자들이 이미 || (OR) 연산자를 사용하여 기본값을 설정하는 패턴을 알고 있을 것입니다. 그러나 ||와 ??는 상황에 따라 다르게 동작합니다. || 연산자는 피연산자가 falsey (거짓 같은 값, 예: 0, '', false, null, undefined)인 경우에만 뒤의 값을 반환합니다. ?? 연산자는 오직 null과 undefined만을 고려합니다.

javascript
let num = 0;
let result1 = num || 42;
console.log(result1); // 42 (0은 falsey 값)

let result2 = num ?? 42;
console.log(result2); // 0 (0은 null 또는 undefined가 아님)

이처럼 num이 0일 경우, || 연산자는 0을 falsey 값으로 간주하여 42를 반환하지만, ?? 연산자는 0이 null 또는 undefined가 아니므로 0을 그대로 반환합니다.

Nullish Coalescing 연산자 사용 예제

기본값 설정

가장 일반적인 사용 사례는 변수에 기본값을 설정하는 것입니다:

javascript
function greet(name) {
    let greeting = name ?? "Stranger";
    console.log(`Hello, ${greeting}`);
}

greet(null); // "Hello, Stranger"
greet("Alice"); // "Hello, Alice"

API 응답 처리

API 응답에서 필요한 필드가 누락된 경우 기본값을 제공할 수 있습니다:

javascript
let response = {
    user: {
        name: "Alice",
        age: null
    }
};

let userName = response.user.name ?? "Anonymous";
let userAge = response.user.age ?? 18;

console.log(userName); // "Alice"
console.log(userAge); // 18

함수 매개변수

함수의 매개변수가 전달되지 않으면 기본값을 설정할 수 있습니다:

javascript
function displayPrice(price) {
    let finalPrice = price ?? 100;
    console.log(`The price is ${finalPrice}`);
}

displayPrice(undefined); // "The price is 100"
displayPrice(0); // "The price is 0"
displayPrice(200); // "The price is 200"

주의사항

Nullish Coalescing과 선택적 체이닝

Nullish Coalescing 연산자는 선택적 체이닝 (?.)과 함께 자주 사용됩니다. 선택적 체이닝은 값이 null이나 undefined일 때 오류를 발생시키지 않고 undefined를 반환합니다.

javascript
let user = {
    profile: {
        name: "Alice"
    }
};

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

let userAge = user.profile?.age ?? "Unknown";
console.log(userAge); // "Unknown"

우선순위 문제

Nullish Coalescing 연산자의 우선순위는 비교적 낮아서 &&와 ||보다 낮습니다. 따라서 다른 연산자와 함께 사용할 때는 괄호를 사용하는 것이 좋습니다.

javascript
let x = null;
let y = "hello";
let z = "world";

let result = x ?? y && z;
console.log(result); // "world"

위의 예제에서 예상과 달리 결과가 "world"가 됩니다. && 연산자의 우선순위가 높기 때문에 y && z가 먼저 평가됩니다. 따라서 명확한 결과를 얻기 위해 괄호를 사용해야 합니다:

javascript
let result = (x ?? y) && z;
console.log(result); // "hello"

결론

JavaScript의 Nullish Coalescing 연산자는 기존의 || 연산자보다 더욱 정밀하게 null과 undefined 값을 다룰 수 있게 합니다. 이를 통해 기본값 설정 및 다양한 조건문 작성에서 더욱 명확하고 예측 가능한 코드를 작성할 수 있습니다. ?? 연산자를 잘 이해하고 활용한다면 코드의 가독성과 안정성을 크게 향상시킬 수 있을 것입니다.