자바스크립트 ||와 ?? 연산자 완벽 비교, 언제 뭘 써야 하는지 완벽 정리

2025-03-31

39

자바스크립트 `||`와 `??` 연산자 완벽 비교: 기본값 설정의 최적 방법

자바스크립트에서 Null 병합 연산자(??)와 논리 OR 연산자(||)는 기본값 설정에 자주 사용되지만, 그 동작 방식에는 중요한 차이가 있습니다. 이 두 연산자의 차이점을 이해하면 더 안정적이고 예측 가능한 코드를 작성할 수 있습니다. 이 글에서는 두 연산자의 특성, 활용법, 그리고 적절한 상황별 선택 방법을 상세히 알아보겠습니다.

자바스크립트 연산자 기초: `||`와 `??` 개요

자바스크립트를 사용하다 보면 변수에 기본값을 설정해야 하는 경우가 많습니다. 사용자 입력이 없거나, API 응답에서 특정 값이 누락되었을 때, 또는 환경 변수가 설정되지 않았을 때 대체 값을 제공해야 합니다. 이런 상황에서 ||(논리 OR 연산자)와 ??(Null 병합 연산자)가 유용하게 사용됩니다3 11.

결론 부터 말하자면 대부분의 경우에서 || 보다 ?? 을 사용하는 것이 더 안전합니다.

논리 OR 연산자(`||`)란?

논리 OR 연산자는 왼쪽 피연산자가 falsy 값일 때 오른쪽 피연산자를 반환합니다. 자바스크립트에서 falsy 값으로 간주되는 것들은 다음과 같습니다16 19:

false
0
"" (빈 문자열)
null
undefined
NaN

let username = "";
let displayName = username || "Guest";
console.log(displayName); // 출력: "Guest"

위 예시에서 username이 빈 문자열이므로 falsy 값으로 간주되어 "Guest"가 displayName에 할당됩니다11.

Null 병합 연산자(`??`)란?

Null 병합 연산자는 ES11(ECMAScript 2020)에서 도입된 비교적 새로운 기능으로, 왼쪽 피연산자가 명확하게 null 또는 undefined일 때만 오른쪽 피연산자를 반환합니다3 14:

let username = "";
let displayName = username ?? "Guest";
console.log(displayName); // 출력: ""

위 예시에서는 username이 빈 문자열이지만 null이나 undefined는 아니므로, 빈 문자열 그대로 displayName에 할당됩니다14.

`||`와 `??` 연산자의 핵심 차이점

두 연산자의 가장 큰 차이점은 왼쪽 피연산자를 평가하는 방식에 있습니다. ||는 모든 falsy 값을 무시하고 오른쪽 값을 반환하지만, ??는 오직 null과 undefined만 무시합니다7 14 16.

직관적인 비교: 같은 값에 대한 다른 결과

다음 예시를 통해 두 연산자의 동작 차이를 명확히 이해할 수 있습니다:

// 숫자 0의 처리
let num = 0;
console.log(num || 42); // 출력: 42
console.log(num ?? 42); // 출력: 0

// 빈 문자열 처리
let str = "";
console.log(str || "기본 문자열"); // 출력: "기본 문자열"
console.log(str ?? "기본 문자열"); // 출력: ""

// null과 undefined 처리 (두 연산자 모두 동일하게 동작)
let value1 = null;
let value2 = undefined;
console.log(value1 || "기본값"); // 출력: "기본값"
console.log(value1 ?? "기본값"); // 출력: "기본값"
console.log(value2 || "기본값"); // 출력: "기본값"
console.log(value2 ?? "기본값"); // 출력: "기본값"

이 예시에서 볼 수 있듯이, 0이나 빈 문자열이 입력되었을 때 두 연산자의 동작 방식이 달라집니다3 7 16.

행동 원리 이해하기

|| 연산자는 첫 번째 truthy 값을 반환합니다.
?? 연산자는 첫 번째 정의된(defined) 값을 반환합니다16.

이 차이는 다음과 같이 요약할 수 있습니다:

// || 연산자의 동작
(false || true) // true
(0 || 42) // 42
("" || "hello") // "hello"
(null || "default") // "default"
(undefined || "default") // "default"

// ?? 연산자의 동작
(false ?? true) // false
(0 ?? 42) // 0
("" ?? "hello") // ""
(null ?? "default") // "default"
(undefined ?? "default") // "default"

실무에서의 `||`와 `??` 활용 방법

두 연산자의 차이를 이해했다면, 이제 실제 개발 상황에서 어떻게 활용할지 살펴보겠습니다.

사용자 입력 처리에서의 활용

사용자로부터 입력을 받을 때, 빈 문자열이나 0과 같은 값이 유효한 입력일 수 있습니다. 이런 경우 ?? 연산자가 더 적합합니다3 14:

function processUserInput(input) {
  // 사용자가 명시적으로 null이나 undefined를 입력한 경우에만 기본값 사용
  const processedInput = input ?? "기본 입력값";
  return processedInput;
}

console.log(processUserInput("")); // 출력: ""
console.log(processUserInput(0)); // 출력: 0
console.log(processUserInput(null)); // 출력: "기본 입력값"

API 응답 처리에서의 활용

서버에서 데이터를 받아올 때, 특정 필드가 null이거나 undefined인 경우 대체 값을 사용하려면 ?? 연산자를 사용하는 것이 좋습니다3:

function processUserInput(input) {
  // 사용자가 명시적으로 null이나 undefined를 입력한 경우에만 기본값 사용
  const processedInput = input ?? "기본 입력값";
  return processedInput;
}

console.log(processUserInput("")); // 출력: ""
console.log(processUserInput(0)); // 출력: 0
console.log(processUserInput(null)); // 출력: "기본 입력값"

환경 설정 및 기본값 설정

환경 변수나 설정 파일에서 값을 가져올 때도 ?? 연산자를 활용할 수 있습니다14:

const config = {
  apiEndpoint: process.env.API_ENDPOINT ?? 'https://default.api.com',
  timeout: process.env.TIMEOUT ?? 5000,
};

console.log(config.apiEndpoint); // 환경 변수가 설정되지 않았다면 'https://default.api.com'
console.log(config.timeout); // 환경 변수가 설정되지 않았다면 5000

Null 병합 연산자의 고급 활용법

Null 병합 연산자는 기본 사용법 외에도 몇 가지 고급 활용 방법이 있습니다.

연속 사용과 우선순위 설정

Null 병합 연산자를 연속적으로 사용하여 여러 대체 값을 설정할 수 있습니다3:

let value1 = null;
let value2 = undefined;
let value3 = "Hello";

// value1이 null이므로 value2를 평가, value2도 undefined이므로 value3을 평가
// value3이 정의되어 있으므로 "Hello"가 할당됨
let defaultValue = value1 ?? value2 ?? value3 ?? "Default";
console.log(defaultValue); // 출력: "Hello"

다른 연산자와의 결합 사용 제약

주의해야 할 점은 null 병합 연산자는 AND(&&)나 OR(||) 연산자와 직접 함께 사용할 수 없다는 것입니다. 소괄호를 사용하여 명확히 우선순위를 지정해야 합니다11:

// 잘못된 사용법 - SyntaxError 발생
// let result = null || undefined ?? "foo";

// 올바른 사용법 - 소괄호로 우선순위 지정
let result = (null || undefined) ?? "foo";
console.log(result); // 출력: "foo"

Short-circuiting(단락 평가)

Null 병합 연산자도 다른 논리 연산자처럼 단락 평가를 수행합니다. 왼쪽 피연산자가 null이나 undefined가 아니면, 오른쪽 피연산자는 평가되지 않습니다11:

let x = 1;
let y = 2;

// x가 null이나 undefined가 아니므로 표현식 (y = 100)은 실행되지 않음
let z = x ?? (y = 100);
console.log(z); // 출력: 1
console.log(y); // 출력: 2 (y의 값이 변경되지 않음)

브라우저 호환성 및 폴리필

Null 병합 연산자는 비교적 최신 기능이므로 오래된 브라우저에서는 지원되지 않을 수 있습니다. 널 병합 연산자는 ES11(ECMAScript 2020)에서 도입되었습니다3.

주요 브라우저 지원 현황

대부분의 최신 브라우저는 Null 병합 연산자를 지원합니다만, 구형 브라우저에서 사용해야 한다면 폴리필이나 트랜스파일러를 사용해야 합니다.

구형 브라우저를 위한 대안

폴리필 없이 구형 브라우저에서 비슷한 기능을 구현하려면 다음과 같은 코드를 사용할 수 있습니다:

function nullishCoalesce(value, defaultValue) {
  return (value !== null && value !== undefined) ? value : defaultValue;
}

let username = null;
let displayName = nullishCoalesce(username, "Guest");
console.log(displayName); // 출력: "Guest"

TypeScript에서의 `||`와 `??` 활용

TypeScript에서도 두 연산자의 차이는 동일하게 적용되며, 타입 안전성을 위해 ?? 연산자를 적극적으로 활용할 수 있습니다7 20.

TypeScript에서의 활용 예시

TypeScript에서는 다음과 같이 사용할 수 있습니다:

interface Item {
  value?: number;
}

function processItem(item: Item) {
  // value가 undefined이면 1.00 사용
  console.log(item.value ?? 1.00);
  
  // 주의: ||를 사용하면 value가 0일 때도 1.00으로 대체됨
  console.log(item.value || 1.00);
}

processItem({}); // undefined -> 두 경우 모두 1.00 출력
processItem({ value: 0 }); // 0 -> ??는 0 출력, ||는 1.00 출력

이 예시에서 볼 수 있듯이, ?? 연산자는 TypeScript에서 특히 유용합니다. value의 타입이 number | undefined일 때, 0이 유효한 값이라면 ??를 사용하는 것이 더 안전합니다7 20.

Falsy 값과 Nullish 값의 이해

두 연산자를 올바르게 사용하기 위해서는 Falsy 값과 Nullish 값의 차이를 명확히 이해해야 합니다.

Falsy 값이란?

Falsy 값은 불리언 컨텍스트에서 false로 평가되는 값들입니다. 자바스크립트에서는 다음 값들이 falsy로 간주됩니다16 19:

false
0, -0, 0n(BigInt)
"" (빈 문자열)
null
undefined
NaN

Nullish 값이란?

Nullish 값은 오직 null과 undefined 두 가지만 해당됩니다14 16. 이 두 값은 ‘값이 없음’을 나타내는 특별한 값입니다:

null: 의도적으로 값이 없음을 나타냄
undefined: 값이 할당되지 않았음을 나타냄

실무에서의 구분 활용

실무에서는 이 차이를 이해하고 상황에 맞게 연산자를 선택해야 합니다. 예를 들어, 수량이나 점수와 같은 값에서 0이 유효한 값이라면 ?? 연산자를 사용하는 것이 좋습니다14 19.

function calculateDiscount(price, discountRate) {
  // discountRate가 0인 경우(할인 없음)도 유효한 경우
  const actualDiscountRate = discountRate ?? 0.1; // 기본 할인율 10%
  return price * (1 - actualDiscountRate);
}

console.log(calculateDiscount(100, 0)); // 출력: 100 (할인 없음)
console.log(calculateDiscount(100, null)); // 출력: 90 (10% 할인 적용)

두 연산자의 실제 사용 사례 분석

실제 개발 환경에서 두 연산자가 어떻게 활용되는지 몇 가지 사례를 살펴보겠습니다.

사례 1: 사용자 설정 폼

사용자 설정을 저장하는 폼에서 기존 설정값을 불러오는 경우:

function loadUserSettings(settings) {
  // 테마 설정 (빈 문자열도 유효한 테마일 수 있음)
  const theme = settings.theme ?? "default";
  
  // 알림 설정 (false도 유효한 설정임)
  const notifications = settings.notifications ?? true;
  
  // 표시 언어 (빈 문자열은 브라우저 기본 언어를 의미할 수 있음)
  const language = settings.language ?? navigator.language;
  
  return { theme, notifications, language };
}

// 설정이 null이나 undefined인 경우에만 기본값 적용
const userSettings = loadUserSettings({
  theme: "",
  notifications: false,
  language: ""
});

console.log(userSettings);
// 출력: { theme: "", notifications: false, language: "" }

이 예시에서는 ?? 연산자를 사용하여 사용자가 명시적으로 설정하지 않은(null 또는 undefined) 항목에만 기본값을 적용합니다.

사례 2: 검색 조건 필터링

검색 필터에서 사용자 입력 값을 처리할 때:

function buildSearchQuery(filters) {
  // 가격 범위 (0도 유효한 최소값일 수 있음)
  const minPrice = filters.minPrice ?? 0;
  const maxPrice = filters.maxPrice ?? 1000000;
  
  // 검색어 (빈 문자열은 모든 결과를 의미할 수 있음)
  const keyword = filters.keyword ?? "";
  
  // 정렬 순서 (기본값: 관련성)
  const sortBy = filters.sortBy || "relevance";
  
  return { minPrice, maxPrice, keyword, sortBy };
}

// 사용자가 입력한 검색 조건
const searchQuery = buildSearchQuery({
  minPrice: 0,
  keyword: "",
  sortBy: ""
});

console.log(searchQuery);
// 출력: { minPrice: 0, maxPrice: 1000000, keyword: "", sortBy: "relevance" }

이 예시에서 minPrice와 keyword는 0이나 빈 문자열이 유효한 값이므로 ?? 연산자를 사용했고, sortBy는 특정 값이 있어야 하므로 빈 문자열을 무시하는 || 연산자를 사용했습니다.

결론: 상황에 맞는 연산자 선택하기

두 연산자의 차이를 이해했다면, 이제 어떤 상황에서 어떤 연산자를 선택해야 할지 명확해졌을 것입니다:

`??` 연산자를 사용해야 하는 경우:

0, 빈 문자열(“”), false와 같은 falsy 값이 유효한 값으로 처리되어야 할 때
null이나 undefined인 경우에만 기본값을 적용하고 싶을 때
숫자 값(수량, 금액 등)이나 사용자 입력을 다룰 때
TypeScript에서 옵셔널 프로퍼티를 다룰 때7 20

`||` 연산자를 사용해야 하는 경우:

모든 falsy 값에 대해 기본값을 적용하고 싶을 때
빈 문자열이나 0이 유효한 값이 아닌 경우
레거시 코드 호환성이 필요한 경우(구형 브라우저 지원)
조건부 로직에서 truthy 값을 찾을 때7 19

자주 묻는 질문 (FAQ)

1. Null 병합 연산자(`??`)가 도입된 이유는 무엇인가요?

Null 병합 연산자는 기존의 논리 OR 연산자(||)가 모든 falsy 값을 동일하게 처리하는 문제를 해결하기 위해 도입되었습니다. 특히 0이나 빈 문자열이 유효한 값으로 간주되어야 하는 상황에서 매우 유용합니다. 이전에는 복잡한 조건문을 사용해야 했지만, 이제는 간결하게 표현할 수 있게 되었습니다3 14.

2. Null 병합 연산자와 옵셔널 체이닝(`?.`)은 어떻게 다른가요?

두 기능 모두 ES11에서 함께 도입되었지만 용도가 다릅니다. 옵셔널 체이닝은 객체 프로퍼티에 안전하게 접근하기 위해 사용되며, 해당 객체나 프로퍼티가 존재하지 않으면 undefined를 반환합니다. 반면 Null 병합 연산자는 값이 null이나 undefined일 때 대체 값을 제공합니다. 두 기능은 함께 사용하면 더욱 강력해집니다11:

const user = {
  // 프로필이 없는 사용자
};

// 프로필이 없으면 undefined 반환, 그리고 ?? 로 기본값 설정
const username = user?.profile?.name ?? "익명 사용자";
console.log(username); // 출력: "익명 사용자"

3. 다른 언어에도 Null 병합 연산자와 비슷한 기능이 있나요?

네, 여러 언어에서 비슷한 개념이 있습니다. C#, Swift, PHP 등에서도 null 병합 연산자가 있으며, 동작 방식도 유사합니다. 다만, 각 언어마다 구문이나 세부 동작이 약간씩 다를 수 있으므로 사용하는 언어의 문서를 확인하는 것이 좋습니다.

4. Null 병합 연산자를 사용할 때 주의해야 할 점은 무엇인가요?

가장 큰 주의점은 AND(&&)나 OR(||) 연산자와 함께 사용할 때 반드시 괄호로 우선순위를 명시해야 한다는 것입니다. 그렇지 않으면 구문 오류가 발생합니다11. 또한, 브라우저 호환성도 고려해야 합니다. 구형 브라우저를 지원해야 한다면 트랜스파일러나 폴리필을 사용하는 것이 좋습니다.

5. Typescript에서 Null 병합 연산자를 사용할 때 특별히 고려해야 할 사항이 있나요?

TypeScript 3.7부터 Null 병합 연산자를 지원하며, 타입 시스템과 잘 통합됩니다7 11. 특히 옵셔널 타입(Type | undefined 또는 Type | null)을 다룰 때 매우 유용합니다. TypeScript에서는 타입 체크를 통해 null이나 undefined가 될 수 있는 값에 대해 더 안전하게 코드를 작성할 수 있도록 도와줍니다. 또한 어떤 값이 falsy한지 확인하는 것보다 정확히 null 또는 undefined인지 확인하는 것이 타입 안전성 측면에서 더 좋은 방법으로 간주됩니다7 20.

Citations:

https://www.money-writing.com/%ed%83%80%ec%9e%85%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8-%ec%99%84%eb%b2%bd%ea%b0%80%ec%9d%b4%eb%93%9c

자바스크립트 ||와 ?? 연산자 완벽 비교, 언제 뭘 써야 하는지 완벽 정리

자바스크립트 ||와 ?? 연산자 완벽 비교: 기본값 설정의 최적 방법

자바스크립트 연산자 기초: ||와 ?? 개요

논리 OR 연산자(||)란?

Null 병합 연산자(??)란?

||와 ?? 연산자의 핵심 차이점