[JS] Optional Chaining (?.)

우연히 보게된 ?. / ?? .. 진짜 물음표 그 잡채🤔

정의

옵셔널 체이닝(Optional Chaining) 은 자바스크립트(JavaScript)에서 중첩된 객체에서 프로퍼티에 접근할 때, 해당 프로퍼티가 존재하지 않을 경우 발생하는 오류를 방지하고 안전하게 undefined 값을 반환하도록 하는 연산자이다.

⚙ 기본 문법

형태	의미
obj?.prop	obj가 존재하면 prop 반환
obj?.method()	obj가 존재하면 method() 실행
arr?.[index]	배열이 존재하면 해당 인덱스 접근

ex)

const user = {
  name: "Aki",
  address: {
    city: "Seoul",
    zip: "12345"
  }
};

console.log(user.address.city); // ✅ "Seoul"
console.log(user.contact.email); // ❌ 에러

위 이미지처럼 user.contact.email 없는 객체를 불러올 경우, 에러가 뜨게 된다.

예시가 단순해서 그렇지 객체가 중첩되어있고 소스도 길다면 이처럼 간혹 없는 객체를 불러오는 실수를 할 때가 있..었다.

이럴 때 Optional Chaining을 사용하면 에러대신 undefined 값을 반환할 수 있다.

console.log(user.address?.city); // ✅ "Seoul"
console.log(user.contact?.email); // ✅ undefined (에러 ❌)

✨이처럼 Optional Chaining은 존재 여부를 먼저 확인한 후 속성이나 메서드에 접근할 수 있게 해주기때문에 에러를 막고 코드가 더 안전하게 실행되게 도와준다.

---

👀 추가로... Null 병합 연산자 같이 사용하기!

Null 병합 연산자 (??)

값이 null 또는 undefined인 경우에만 대체값(default) 을 제공하는 연산자이다.

const result = value ?? defaultValue;

• value가 null 또는 undefined라면 defaultValue를 반환

• 그 외의 falsy 값(0, '', false 등)은 그대로 유지함

falsy 값이란? Boolean 문맥에서 false 로 평가되는 값

ex)

const name = null;
const displayName = name ?? "Anonymous";
console.log(displayName); // "Anonymous"
// ✨name값이 null이기때문에 대체값 "Anonymous" 제공

const age = 0;
const userAge = age ?? 18;
console.log(userAge); // ✅ 0 (0은 falsy지만 null/undefined가 아님)
// ✨null/undefined가 아니기때문에 falsy값 그대로 유지

const comment = '';
const userComment = comment ?? 'No comment';
console.log(userComment); // ✅ '' (빈 문자열 유지)
// ✨null/undefined가 아니기때문에 빈 문자열 그대로 유지

Optional Chaining + Null 병합 연산자

두 조합을 많이 사용하는 편

ex)

const user = {
  profile: {
    nickname: null
  }
};

const nickname = user.profile?.nickname ?? "Guest";
console.log(nickname); // "Guest"
// ✨user.profile?.nickname이 null이라서 "Guest" 반환

위에 첫 예시로 적용해보면👇

const user = {
  name: "Aki",
  address: {
    city: "Seoul",
    zip: "12345"
  }
};

console.log(user.address?.city ?? "city none"); // ✅ "Seoul"
console.log(user.contact?.email ?? "email none"); // ✅ "email none"
// ✨user.contact?.email 값이 undefined 이기때문에 "email none" 반환

📝요약

구문	설명
?.	안전하게 접근 (에러 방지)
??	값이 없을 때 기본값 설정 (null, undefined일 때만 작동)