javascript nullish coalescing: 실무 가이드와 사용법 요약

javascript nullish coalescing이 필요한 상황

javascript nullish coalescing 연산자(??)는 undefined와 null만을 기본값으로 대체할 때 유용합니다. 이 글에서는 javascript nullish coalescing의 개념, 실무 적용 예제, 언제 써야 하고 피해야 할지, 성능/보안/운영 관점의 주의점과 바로 적용 가능한 체크리스트까지 제공합니다. 목적은 개념 이해 → 실무 적용 → 주의점 확인 → 즉시 적용 가능하도록 하는 것입니다.

javascript nullish coalescing 핵심 개념

nullish coalescing 연산자는 A ?? B 형태로 사용되며 A가 null 또는 undefined인 경우에만 B를 반환합니다. 이는 논리 OR (||)과 달리 falsy 값(false, 0, '', NaN)을 기본값으로 치환하지 않기 때문에 기본값 처리에서 의도치 않은 동작을 피할 수 있습니다.

핵심 포인트:

??는 오직 null과 undefined를 검사합니다.
기존 코드의 ||를 대체할 때는 falsy 값의 의미를 고려해야 합니다.
optional chaining(?.)과 함께 사용하면 네스티드 값 접근과 기본값 처리를 간결하게 작성할 수 있습니다.

javascript nullish coalescing 실무 예제

아래 예제는 폼 입력값, API 응답, 환경 변수 처리 등 실제 케이스에서 어떻게 사용하는지 보여줍니다.

// 폼 입력의 기본값 처리
function getDisplayName(user) {
  // user.name이 ''(빈 문자열)이면 빈 문자열을 유지해야 하는 상황
  return user.name ?? 'Anonymous';
}

// API 응답에서 nested 값 처리
const data = { profile: { nickname: '' } };
const nickname = data.profile?.nickname ?? '기본닉네임'; // ''일 때는 '' 반환

// 환경 변수 처리 (0이나 ''을 허용할 때)
const port = process.env.PORT ?? 3000;

// 기존 || 사용 시 의도치 않은 치환 예시
const value1 = 0 || 10; // 10 (0을 허용하지 않는 경우 문제가 됨)
const value2 = 0 ?? 10; // 0 (0을 허용해야 할 때 올바름)

언제 쓰면 좋고 언제 피해야 할까

언제 쓰면 좋은가

값이 0, 빈 문자열('') 등 falsy일 수 있으나 이를 유효한 값으로 취급해야 할 때
API 응답에서 명시적 null/undefined 여부로 기본값을 설정할 때
optional chaining과 결합해 네스티드 프로퍼티 접근 시 안전하게 기본값을 할당할 때

언제 피해야 하는가

falsy 값을 모두 기본값으로 바꾸려는 의도라면 ||를 사용해야 함
코드베이스에서 팀 합의 없이 혼용하면 가독성 및 버그 소지가 생길 수 있음
오래된 런타임(ES2020 미지원) 환경에서는 트랜스파일 설정이 필요함

비교: || vs ?? 판단 기준표

구분	항목1	항목2	항목3
내용	연산자	기본적으로 대체하는 값	사용 권장 상황
내용			(Logical OR)
내용	?? (Nullish Coalescing)	null, undefined 만	0이나 '' 같은 falsy 값은 유지해야 할 때

실무 체크리스트

코드리뷰 시 기본값 처리 의도 명시: falsy 전체를 대체하려는지 null/undefined만 대체하려는지 주석 또는 커밋 메시지로 명시
빌드/런타임 호환성 확인: ES2020 기능을 사용하는 경우 트랜스파일러(babel/tsc) 설정 확인
테스트 케이스 추가: undefined, null, 0, '', false 케이스를 모두 포함
팀 코딩 컨벤션 업데이트: ||와 ??의 사용 기준을 문서화

체크리스트(예):

undefined/null 케이스 테스트 추가
0, '', false 케이스에 대한 기대 동작 문서화
빌드 설정에서 core-js/폴리필 필요 여부 확인

성능·보안·운영 주의점

성능

nullish coalescing 자체는 연산 비용이 거의 없으나, 중첩된 복잡한 표현식에서 불필요한 평가를 피하기 위해 가독성을 우선하세요.
짧은 경로(guard clause)로 처리하면 불필요한 계산을 줄일 수 있습니다.

보안

사용자 입력을 기본값으로 대체할 때는 신뢰 수준을 고려하세요. 예를 들어 ''(빈 문자열)을 허용하면 downstream 로직에서 의도치 않은 인증/권한 오류를 초래할 수 있습니다.
환경 변수나 구성값을 기본값으로 설정할 때 민감 정보가 하드코딩되지 않도록 주의합니다.

운영

런타임 호환성: 일부 구형 브라우저/환경에서는 트랜스파일이 필요합니다. CI 파이프라인에 대상 브라우저/노드 버전 테스트를 포함시키세요.
로깅: 기본값이 적용된 케이스는 로깅 레벨(디버그/정보)에 따라 기록하여 장애 시 원인 추적이 용이하도록 합니다.

javascript nullish coalescing 실무 적용 패턴

옵션 객체의 기본값 설정

function createUser(options = {}) {
  const name = options.name ?? 'Guest';
  const retries = options.retries ?? 3; // 0을 유효값으로 허용하고 싶다면 ?? 사용
  return { name, retries };
}

API 응답 병합

const resp = await fetch('/api/user');
const json = await resp.json();
const age = json.age ?? null; // 명시적 null로 처리

폼 처리에서 빈 문자열 유지

const input = document.querySelector('#count').value; // '' 또는 '0'
const count = input ?? 10; // input은 ''일 수 있으므로 ??? 주의: DOM value는 항상 문자열

자주 묻는 질문

Q1: ??는 모든 falsy 값을 체크하나요? A1: 아니요. ??는 오직 null과 undefined만 체크합니다. false, 0, '', NaN 등은 falsy지만 ??의 대상이 아닙니다.

Q2: 기존 코드의 ||를 모두 ??로 바꿔도 될까요? A2: 아닙니다. ||는 falsy 전체를 대체하기 때문에 0이나 빈 문자열을 기본값으로 치환하길 원할 때는 ||가 맞습니다. 변경 시 의도한 동작을 반드시 테스트하세요.

Q3: 브라우저 호환성은 어떤가요? A3: nullish coalescing은 ES2020 기능입니다. 최신 브라우저와 Node는 지원하지만, 구형 환경에서는 트랜스파일(Babel/TypeScript) 설정이나 폴리필이 필요합니다.

Q4: optional chaining과 같이 사용해도 안전한가요? A4: 네. optional chaining(?.)과 ??를 조합하면 네스티드 프로퍼티 접근 시 안전하고 간결한 기본값 처리가 가능합니다. 다만 연산자 우선순위 때문에 괄호로 명확히 해주는 것이 좋습니다.

정리

javascript nullish coalescing는 null과 undefined만 기본값으로 대체한다.
||와 ??의 차이를 이해하고 의도에 맞게 선택해야 한다.
optional chaining과 결합하면 네스티드 값 처리에 유용하다.
팀 규칙, 테스트 케이스, 빌드 호환성 체크는 필수이다.
실무 체크리스트를 통해 기대 동작을 문서화하고 CI에 반영하라.