옵셔널 체이닝이란?

객체에 접근할 때 프로퍼티가 없어도 에러 없이 접근할 수 있는 양날의 검(?) 같은 문법이다.

 

let person = {};

console.log(person.name.firstName); //TypeError: Cannot read properties of undefined (reading 'firstName')

 

이렇게 객체에 존재하지 않는 프로퍼티에 접근 하려면 에러가 발생한다.

 

그래서 개발을 할 때 보통 &&를 사용해서 존재하지 않는 프로퍼티에 접근할 때 사용하곤 했다.

 

let person = {};

console.log(person && person.name && person.name.firstName); //undefined

물론 이런 방법도 있지만 객체의 단계가 깊어지면 깊어질수록 코드의 길이가 엄청나게 길어져버린다.

 

이럴 때 사용하는 것이 옵셔널 체이닝이다.

 

let person = {}

console.log(person && person.name && person.name.firstName); //undefined
console.log(person?.name?.firstName); //undefined

이렇게 옵셔널 체이닝을 사용하게 되면 코드의 가독성이 좋아진다.

 

옵셔널 체이닝이란

1. 앞에 평가대상이 null이나 undefined 이어야 한다.

2. 예시에서 사용한 객체 person이 존재하는 거처럼 꼭 선언되어 있는 변수에 사용해야 한다.

3. 옵셔널 체이닝 앞에 값이 없으면 그 뒤로 실행되지 않는다. 

 

옵셔널 체이닝이 undefined나 null이라도 에러를 발생시키지 않아서 디버깅할 때 힘들 수 있으니... 꼭 필요한 곳에서 써야 한다. 그래서 양날의 검이라는 생각이 들었다.