Optional Chaining ?.은 JavaScript에서 중첩된 객체의 프로퍼티에 안전하게 접근할 수 있게 해주는 연산자입니다. 이 기능을 사용하면, 프로퍼티가 존재하지 않을 때 에러를 방지하며 코드의 안정성을 높일 수 있습니다.

Optional Chaining이 필요한 이유

JavaScript를 배우기 시작한 분들은 아마도 TypeError: Cannot read property 'xxx' of undefined와 같은 에러 메시지를 본 적이 있을 겁니다. 이 에러는 주로 중첩된 객체의 프로퍼티에 접근하려 할 때 해당 객체나 프로퍼티가 존재하지 않을 때 발생합니다. 예를 들어, 몇몇 사용자는 주소 정보가 없을 수 있으며, 이러한 상황에서 user.address.street에 접근하려고 하면 문제를 발생시킵니다.

 

사용법 및 예제

const user = {
  name: "홍길동",
  address: null
};
// Optional Chaining을 사용하여 street 값에 접근
const street = user.address?.street;
console.log(street); // undefined

 

배열과 함께 사용하기

Optional Chaining은 배열에도 사용할 수 있습니다. 예를 들어, 사용자의 관심사 목록에서 첫 번째 항목을 안전하게 추출하려면 다음과 같이 작성할 수 있습니다.

const user = {
  name: "홍길동",
  interests: ["코딩", "게임"]
};
const firstInterest = user.interests?.[0];
console.log(firstInterest); // "코딩"

반드시 필요한 경우에 사용하세요.

Optional Chaining은 해당 값이 undefined나 null일 수 있는 경우에만 사용해야 합니다. 예를 들어, 논리적으로 항상 존재해야 하는 객체에 대해 Optional Chaining을 사용하면 프로그래밍 오류를 놓칠 수 있습니다.