[Javascript] 옵셔널 체이닝(Optional Chaining) 이란?

 

 

 

오늘은 옵셔널 체이닝(Optional Chaining)에 대해 이야기해보겠습니다~!

💡 참고: 옵셔널 체이닝은 ES2020에 도입된 최신 문법이기 때문에 구식 브라우저에서는 폴리필(polyfill)을 사용해야 합니다.

 

 

✅ 옵셔널 체이닝이란?

옵셔널 체이닝(optional chaining)은 자바스크립트에서 중첩된 객체의 특정 프로퍼티나 메서드에 안전하게 접근할 수 있도록 도와주는 문법입니다.

즉, 안전한 코드를 작성하기 위한 도구라고 볼 수 있는데 어떻게 이런 역할을 할 수 있는지는 차차 설명 드려보죠!

 

 

✅ 옵셔널 체이닝은 왜 쓸까?? (옵셔널 체이닝이 필요한 이유)

 

 

1️⃣ 에러를 방지하기 위해

옵셔널 체이닝이 등장하기 전에는 중첩된 객체의 프로퍼티에 접근할 때, 해당 경로의 값이 존재하지 않으면 TypeError가 발생 했습니다.

 

코드로 예시를 들어 설명해보자면~

let user = {}; // 주소 정보가 없는 유저

console.log(user.address.street); 
// TypeError🚨

사용자 정보를 담은 객체가 있다고 가정해봅시다. 그런 상태에서 위 코드는 user 객체에 address 프로퍼티가 없기 때문에 바로 TypeError가 발생합니다.

 

 

 

2️⃣ 코드의 가독성을 높이기 위해

let user = {}; 

console.log(user && user.address && user.address.street); 
// undefined (에러 안 남)

그래서 우리는 TypeError 문제를 해결하기 위해 위 코드와 같 && 연산자를 사용했었습니다.

 

그런데 위 코드는 에러를 방지할 수는 있지만 코드가 길어지고 가독성이 떨어진다는 단점이 있죠.... /_ \

 

그래서 이런 문제를 해결하기 위해 등장한 것이 바로 옵셔널 체이닝입니다!! 🎉

 

 

 

✅ 옵셔널 체이닝의 사용법 (feat. 실제 사례)

옵셔널 체이닝 문법을 사용하면 프로퍼티가 없는 중첩 객체에 안전하게 접근할 수 있습니다.

옵셔널 체이닝을 간단히 설명하자면 '앞'의 평가 대상이 undefined나 null이면 즉시 평가를 멈추고 undefined를 반환합니다.

이런 옵셔널 체이닝을 아래와 같이 사용할 수 있는 것이죠!

 

 

 

1️⃣ 프로퍼티에 접근

중첩 객체의 프로퍼티에 접근할 때 안전하게 처리가능!

let user = {}; // 주소 정보가 없는 사용자

console.log(user?.address?.street); 
// undefined (에러 없이 실행 가능)

 

 

 

2️⃣ 메서드 호출

객체에 존재하지 않는 메서드를 호출할 때도 안전하게 처리가능!

let user = {
  greet() {
    console.log("Hello!");
  },
};

user.greet?.(); // "Hello!"
user.farewell?.(); // 아무 일도 안 일어남

 

 

3️⃣ 배열 요소 접근

배열에서도 옵셔널 체이닝을 사용할 수 있음.

let users = [{ name: "Ju" }, null, { name: "Yeon" }];

console.log(users[1]?.name); // undefined
console.log(users[2]?.name); // "Yeon"

 

 

 

 

✅ 옵셔널 체이닝의 한계

 

하지만 안타깝게도 옵셔널 체이닝에게도 한계가 있습니다..

 

 

 

1️⃣ undefined와 null에만 동작
옵셔널 체이닝은 null 또는 undefined인 경우에만 평가를 멈춥니다. 나머지 falsy 값(false, 0, '' 등)에는 영향을 주지 않습니다.

let user = { name: '' };

console.log(user?.name); 
// '' (빈 문자열 고대로 반환)

 

 

 

2️⃣ 쓰기에는 사용 불가
옵셔널 체이닝은 읽기 전용입니다. 그래서 안타깝지만 값을 할당하려고 하면 에러가 나게 됩니다.

let user = {};

user?.address?.street = "Seoul"; 
// Uncaught SyntaxError (에러 발생!🚨)

 

 

 

✅ 마무리

오늘은 옵셔널 체이닝(Optional Chaining)에 대해 작성해보았는데요! 

옵셔널 체이닝의 첫 부분만 읽어보았을 땐 정말 편해보이고 '너무 좋다~ 앞으로 자주 사용해야지!!' 라고 생각했었는데 위에 작성한 한계들이 저에게는 좀 치명적으로 다가와서 생각보다 많이 사용하지는 않고 있는 것 같습니다ㅎㅎ

그래도 코드의 안전성을 높일 수 있다는 측면에서 많은 매력을 느꼈으니 앞으로 종종 사용해보려구요!

 

오늘 글은 여기까지 입니다! 

읽어주셔서 감사합니다 :>

 

 

 

썸네일