[JS] Optional Chaining

💡 개요

프론트엔드 개발을 하다가 Optional Chaining의 개념을 확실히 기억하기 위해 기록한다. 이 글에서는 Optional Chaining의 개념과 예시, 그리고 사용법을 명확히 설명한다.

🔍 Optional Chaining이란?

옵셔널 체이닝(Optional Chaining)은 "존재할 수도 있고, 없을 수도 있는 값에 안전하게 접근하는 방법"이다.
이 방법을 통해 예상치 못한 undefined나 null에 접근하는 상황에서도 에러 없이 안전하게 실행할 수 있다.

🔎 예시

아래 예시와 함께 Optional Chaining의 동작 방식을 알아보자.

const user = {   
	name: '철수',   
	profile: {     
		age: 25,     
		hobby: '축구'   
	} 
};

user 객체는 profile 속성을 가지고 있지만, detail 속성은 존재하지 않는다.

console.log(user.detail.age); // 🤯 에러 발생!

위 코드에서 user.detail.age를 접근하려고 하면, user.detail이 undefined이기 때문에 undefined.age에 접근하려고 한다.

자바스크립트에서는 undefined에 속성을 접근하려고 하면 "Cannot read property 'age' of undefined"라는 에러가 발생한다.

이 문제를 Optional Chaining을 사용해 해결할 수 있다.

console.log(user?.detail?.age); // ✅ 에러 X, undefined 반환

📘 Optional Chaining 동작 원리

Optional Chaining을 적용한 코드는 다음과 같은 방식으로 동작한다.

1. user?. → user가 존재하면 다음으로 진행. user가 null이나 undefined이면 바로 undefined 반환.
2. user?.detail?. → detail이 존재할 때만 다음으로 진행. detail이 null이나 undefined면 바로 undefined 반환.
3. user?.detail?.age → age에 접근. 만약 user나 detail이 없으면 undefined를 반환하기 때문에 에러 없이 코드가 실행된다.

🪄 결론

Optional Chaining은 존재할 수도 있고, 없을 수도 있는 값에 안전하게 접근하는 방법이다.
만약 접근하려는 속성이 없으면 에러 대신 undefined를 반환한다.
Optional Chaining을 사용하면 예상치 못한 에러 없이 코드를 더 안정적으로 작성할 수 있다.

💡 Tip:
Optional Chaining은 객체의 속성뿐 아니라, 함수 호출에도 사용할 수 있다. 예를 들어 user?.getName?.()과 같이 함수 호출을 안전하게 처리할 수도 있다.

혹시 모를 에러를 대비하여 undefined의 속성을 찾을 가능성이 있는 위치에서는 Optional Chaining을 적극적으로 활용하자.

---

📌 Reference