최신 JS 필수 연산자: ?. 와 ??

최신 자바스크립트(ES11)에 추가된 ?.(Optional Chaining)과 ??(Nullish Coalescing)은 실무에서 버그를 줄이고 코드를 깔끔하게 만드는 필수 연산자입니다.

안전한 탐색 (Optional Chaining)

?. 연산자는 깊은 객체의 프로퍼티를 읽을 때 사용합니다. 만약 중간 단계가 null이나 undefined라면, 무서운 TypeError 에러를 내며 앱을 죽이는 대신, 조용히 undefined를 반환하고 멈춥니다.

엄격한 기본값 (Nullish Coalescing)

기존의 논리합 연산자 ||는 왼쪽 값이 0, 빈 문자열"", false일 때도 모두 기본값으로 덮어씌우는 치명적인 단점이 있었습니다. 반면 ?? 연산자는 오직 null이거나 undefined일 때만 우측의 기본값을 반환하여 이 문제를 완벽히 해결합니다.

|| (OR) vs ?? (Nullish) 동작 방식 비교

||는 0과 빈 문자열("")조차 Falsy로 판단해 덮어씌워버리는 치명적 단점이 있습니다.
반면 ??는 오직 null과 undefined만 걸러내므로 의도치 않은 버그를 완벽히 막아줍니다.

// 1. Optional Chaining (?.) 예제
const user = {
  name: "Minstudio",
  // profile: { age: 25 } // profile 객체가 API 응답 지연 등으로 누락된 상황!
};

// 기존 방식: user.profile이 undefined라 내부 속성 읽기 실패! -> TypeError 발생!
// console.log(user.profile.age); 

// 최신 방식: user.profile이 없으면 거기서 멈추고 안전하게 undefined 반환
console.log(user.profile?.age);


// 2. Nullish Coalescing (??) 예제
const volume = 0; // 사용자가 볼륨을 0으로 명시적으로 설정함

// 기존 || 연산자의 치명적 단점: 0을 Falsy(거짓)로 인식해 강제로 100으로 덮어버림
const oldVolume = volume || 100;
console.log("기존 볼륨:", oldVolume); // 출력: 100 (오류!)

// 최신 ?? 연산자: 값이 오직 null이나 undefined일 때만 100을 반환. 0은 정상 숫자로 인정!
const newVolume = volume ?? 100;
console.log("최신 볼륨:", newVolume); // 출력: 0 (정상!)

실행 결과