최신 자바스크립트(ES11)에 추가된 ?.(Optional Chaining)과 ??(Nullish Coalescing)은 실무에서 버그를 줄이고 코드를 깔끔하게 만드는 필수 방패입니다.
안전한 탐색 (Optional Chaining)
?. 연산자는 깊은 객체의 프로퍼티를 읽을 때 사용합니다. 만약 중간 단계가 null이나 undefined라면, 무서운 TypeError 에러를 내며 앱을 죽이는 대신, 조용히 undefined를 반환하고 멈춥니다.
엄격한 기본값 (Nullish Coalescing)
기존의 논리합 연산자 ||는 왼쪽 값이 0, 빈 문자열"", false일 때도 모두 기본값으로 덮어씌우는 치명적인 단점이 있었습니다. 반면 ?? 연산자는 오직 null이거나 undefined일 때만 우측의 기본값을 반환하여 이 문제를 완벽히 해결합니다.
|| (OR) vs ?? (Nullish) 동작 방식 비교
||는 0과 빈 문자열("")조차 Falsy로 판단해 덮어씌워버리는 치명적 단점이 있습니다.
반면 ??는 오직 null과 undefined만 걸러내므로 의도치 않은 버그를 완벽히 막아줍니다.
script.js
// 1. Optional Chaining (?.) - 안전한 탐색
const user = {
name: "Minstudio"
// profile: { age: 25 } // 만약 API 지연 등으로 profile이 아직 안 왔다면?!
};
// 기존 방식: user.profile이 없는데 age를 찾으려고 해서 무서운 TypeError 발생! (앱이 뻗음)
// console.log(user.profile.age);
// 최신 방식 (?): 중간에 하나라도 없으면 에러 대신 부드럽게 undefined를 반환
console.log("나이:", user.profile?.age); // undefined (안전함!)
// 2. Nullish Coalescing (??) - 엄격한 기본값
const volume = 0; // 사용자가 볼륨을 0으로 켰다고 가정
// 기존 || 연산자의 치명적 단점: 0을 Falsy(거짓)로 착각해서 강제로 100을 줘버림!
const oldVolume = volume || 100;
console.log("기존 || 볼륨:", oldVolume); // 100 (원치 않는 버그 발생!)
// 최신 ?? 연산자: 값이 오직 null이거나 undefined일 때만 우측 값을 반환. 0이나 ""는 정상 값으로 인정!
const newVolume = volume ?? 100;
console.log("최신 ?? 볼륨:", newVolume); // 0 (정상 작동!)