널 병합 연산자

ljjunh·2024년 11월 17일

clean-code-javascript

목록 보기

19/38

널 병합 연산자(??)는 편리하지만 주의해서 써야 할 부분이 많다. 어떤 함정들이 있는지 살펴보자

1. Falsy 값의 함정 🕳️

// 👎 OR 연산자(||) 사용 시 문제점
function createElement(type, height, width) {
    const element = document.createElement(type || 'div');
    
    element.style.height = String(height || 10) + 'px';
    element.style.width = String(width || 10) + 'px';
    
    return element;
}

const el = createElement('div', 0, 0);  // 결과: height: 10px, width: 10px

height와 width에 0을 넣으면 의도와 다르게 10px이 나온다. OR연산자(||)가 모든 Falsy값에 대해 우측 피연산자를 반환하기 때문이다.

// 👍 널 병합 연산자(??) 사용
function createElement(type, height, width) {
    const element = document.createElement(type ?? 'div');
    
    element.style.height = String(height ?? 10) + 'px';
    element.style.width = String(width ?? 10) + 'px';
    
    return element;
}

const el = createElement('div', 0, 0);  // 결과: height: 0px, width: 0px

널 병합 연산자를 사용하면 피연산자가 null이나 undefined일 때만 기본값이 적용된다. 이제 의도한대로 동작한다.

2. 널 병합 연산자의 함정 ⚠️

널 병합 연산자가 편리해서 모든 상황에 무분별하게 사용하다 보면 의도치 않은 결과가 발생할 수 있다

// 👎 잘못된 사용 예시
function getUserStatus(isActive) {
    return isActive ?? "오프라인";  // ❌ 잘못된 사용
    // boolean 값을 체크할 때는 ?? 대신 || 를 써야 함
}

console.log(getUserStatus(false));  // false가 반환됨 (의도는 "오프라인"이었을 것)

// 👍 올바른 사용 예시
function getUserStatus(isActive) {
    return isActive || "오프라인";  // ✅ 올바른 사용
}

console.log(getUserStatus(false));  // "오프라인" 출력

3. 혼합 사용 시 주의사항 🚫

// 👎 에러 발생
console.log(null || undefined ?? "foo") 
// SyntaxError: Logical expressions and coalesce expressions cannot be mixed

OR 연산자(||)와 널 병합 연산자(??)를 같이 쓰면 에러가 난다. 이건 의도적으로 만들어진 제약이다. 개발자들이 자주 실수하니까 아예 문법 단계에서 막아버린 것이다.
🤔 만약 문법적으로 허용됐다면?
두 가지 해석이 가능해서 문제가 생긴다

// 🤔 만약 허용됐다면, 개발자들은 이런 코드를 어떻게 해석해야 할까요?
null || undefined ?? "foo"

// 1️⃣ OR 연산을 먼저할까요?
(null || undefined) ?? "foo"
// -> undefined ?? "foo"
// -> "foo"

// 2️⃣ 널 병합을 먼저할까요?
null || (undefined ?? "foo")
// -> null || "foo"
// -> "foo"

이런 모호성을 없애기 위해 자바스크립트는 두 연산자를 같이 쓰지 못하게 막아버렸다. 대신 괄호로 명시적으로 우선순위를 지정하도록 강제한다

// ✅ 명시적으로 의도를 표현
console.log((null || undefined) ?? "foo")  // OR 먼저
console.log(null || (undefined ?? "foo"))  // 널 병합 먼저