[Javascript] New Javascript 6장 - 옵셔널 체이닝

1. 옵셔널 체이닝이란?

자바스크립트를 사용하다 보면 객체 속성에 접근할 때 예상치 못한 에러(undefined 나 null)값으로 오류가 발생하는 경우가 흔하게 발생하고 있습니다. 예를 들어 API 응답에서 특정 필드가 누락되거나, 깊은 객체 구조에 중간 값이 비어있으면 흔히 다음과 같은 에러를 보게 됩니다.

Uncaught TypeError: Cannot read properties of undefined (reading 'prop')

이러한 문제를 해결하기 위해선 기존에 조건문 또는 논리 연산자(&&)를 사용했지만, 코드가 길어지며 점점 가독성이 떨어지는 계기가 되었고 이러한 불편함을 해소하기 위해 ECMAScript 2020(ES11)에서 도입된 문법이 바로 옵셔널 체이닝(Optional Chaining)입니다

---

2. 옵셔널 체이닝은 무엇인가?

옵셔널 체이닝은 ?. 연산자를 사용해 객체 속성이나 함수가 존재하지 않을 경우 에러를 발생시키지 않고 `undefined`를 반환하도록 하는 문법입니다.

let user = {};
console.log(user?.profile?.name); // undefined (에러 ❌)

---

🦖 2-1. 옵셔널 체이닝을 사용하지 않는 경우

let user = {};
console.log(user.profile.name); // ❌ 에러 발상

🖱️ 출력:

TypeError: Cannot read properties of undefined (reading 'name')

• 기존 방식에 user.profile이 없는 경우 곧바로 에러 발생

---

🦖 2-2. 기존 방식의 문제 해결법

옵셔널 체이닝이 없을 때에는 보통 && 연산자를 사용합니다.

// Optional Chaining이 없을 때 && 연산자 
let user = {}; 
console.log(user && user.profile && user.profile.name); // undefined

하지만 이런 방식은 코드가 장황해지고 가독성이 떨어지는 단점이 존재합니다 특히 객체가 깊어질 수록 && 체인은 길어지고 불편합니다.

---

3. 옵셔널 체이닝 예제

🦖 1. 객체 속성 접근

// 객체 속성  접근
let user = {
  name: "Mark",
  profile: {
    age: 20,
  },
};

console.log(user?.profile?.age); // 20
console.log(user?.profile?.address); // undefined
console.log(user?.job?.title); // undefined

🦖 2. 함수 호출

// 함수 호출
let beer = {
  drink: () => "Drink! Beer",
};

console.log(beer.drink?.()); // "Drink! Bear"
console.log(beer.sayCheers?.()); // undefined

• sayBye 함수는 없으나, ?.()을 사용하면 에러가 발생하지 않고 undefined 출력

🦖 3. 배열 요소 접근

// 배열
let users = [{ name: "Jimmy" }, { name: "Bob" }, null];

console.log(users[0]?.name); // "Jimmy"
console.log(users[2]?.name); // "undefined (null안전 처리)"
console.log(users[5]?.name); // undefined

---

4. 옵셔널 체이닝 + Null 병함 연산자

옵셔널 체이닝은 보통 Null 병합 연산자(??)와 함께 자주 사용됩니다.

let user = {};
let userName = user?.profile?.name ?? "Guest";

console.log(userName); // "Guest"

• ?.로 안전하게 접근한뒤 값이 undefined면 기본값이 "Guest"로 할당 

---

5. 주의할 점 

🦖 왼쪽 피연산자가 null또는 undefined일 때만 작동

// 왼쪽 피 연산자가 null 또는 undefined 일 때만 작동
let user = { name: "" };
console.log(user?.name); // "" (빈 문자열 유지)

• false 값(0, false, " ")은 그대로 반환됨  

🦖 남용금지 

옵셔널 체이닝을 남발하면 오류를 빨리 발견해야 할 상황이 오면 조용히 undefined가 반환되어 문제를 놓칠 수 있음

// 남용 금지
let config = { server: null };
console.log(config?.server?.url); // undefined(잘못된 설정이나 에러 ❌)

• 이런 경우는 명확한 예외 처리가 필요

---

6. 결론

옵셔널 체이닝(?.)은 자바스크립트에 객체의 중첩 속성, 함수 호출, 배열 접근시 안전성을 보장하는 강력한 문법임 

• 존재하지 않는 속성에 접근하더라도 에러는 발생하지 않으며 undefined를 반환
• 코드의 가독성을 높여, API 응답 데이터처럼 불확실한 구조를 다룰 때 매우 유용
• ??(Null 병합 연산자)와 함께 사용 시 기본값 처리까지 깔끔하게 가능함

---

 

GitHub - javascript-only/newJSRoom: https://thinky.tistory.com/category/Front-End/JavaScript