반응형
🔍 ??란?
??는 null 병합 연산자 (Nullish Coalescing Operator) 입니다.
JavaScript(ES2020)부터 도입된 문법으로, 값이 null 또는 undefined일 때 대체값(default value) 을 설정하는 데 사용됩니다.
const result = value ?? defaultValue;
📘 동작 방식
왼쪽 값 | ?? 결과 |
null | 오른쪽 값 반환 |
undefined | 오른쪽 값 반환 |
나머지 값들 (0, '', false) | 왼쪽 값 그대로 사용 |
let name = null ?? "익명"; // "익명"
let age = undefined ?? 30; // 30
let isActive = false ?? true; // false ← 주의!
let count = 0 ?? 10; // 0 ← 주의!
✅ false, 0, "" 는 null이 아님! → ??는 무시하고 그대로 반환
🔁 || (OR 연산자)와 차이점?
||는 falsy 값 전체를 체크
let title = "" || "기본 제목"; // "기본 제목"
??는 null / undefined 만 체크
let title = "" ?? "기본 제목"; // ""
표현식 | 결과 | 이유 |
`null | '기본'` | |
`0 | 100` | |
0 ?? 100 | 0 | null/undefined 아니므로 유지 |
결론:
- ||는 많이 비우고 싶을 때
- ??는 정말 null/undefined일 때만 대체하고 싶을 때 사용하세요.
🧱 실전 예시
✅ 환경 변수 기본값 설정
const PORT = process.env.PORT ?? 3000;
→ PORT가 설정되지 않았을 때만 기본값 3000 사용
✅ 사용자 입력 처리
function getUserName(user) {
return user.name ?? "손님";
}
→ user.name이 null 또는 undefined일 때만 "손님" 반환
✅ 객체 병합
const defaultOptions = {
retry: 3,
timeout: 5000
};
const userOptions = {
timeout: null
};
const config = {
retry: userOptions.retry ?? defaultOptions.retry,
timeout: userOptions.timeout ?? defaultOptions.timeout
};
console.log(config); // { retry: 3, timeout: 5000 }
→ timeout: null은 무시하고 default 사용
❌ 에러 주의: 옵셔널 체이닝과 혼용 시
let username = user?.info?.name ?? "익명";
- user 또는 info가 없으면 undefined
- ??로 "익명" 설정됨 → 매우 강력한 조합
728x90
반응형
'개발라이프 > 자바스크립트' 카테고리의 다른 글
TypeScript 전역 설치 vs 로컬 설치 – 무엇을 선택해야 할까? (0) | 2025.04.02 |
---|---|
Node.js에서 KST(Korea Standard Time)로 날짜 출력하기 (0) | 2025.03.18 |
Node.js에서 CSV 스트림 처리 시 비동기 이슈 해결법 (0) | 2025.02.25 |
JavaScript에서 부동소수점 연산 오차와 해결 방법 (0) | 2025.02.14 |
JavaScript에서 forEach에서 break 사용하기: 완벽 가이드 (0) | 2025.01.31 |