옵셔널 체이닝이란?

 

 '?.'의 형태로 사용하며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다. 체이닝 연산자와 비슷하게 동작하지만, 만약의 참조가 null 혹은 undefined여도 에러식을 뱉지 않고 undefined값을 리턴한다. 함수 호출시에도 마찬가지로 값이 없다면 undefined를 리턴한다.

 ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.

 

옵셔널 체이닝이 필요한 이유

1. 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다.

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

alert(user.address.street); // TypeError: Cannot read property 'street' of undefined

 

2.브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제가 있다. 자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 하면 문제가 발생한다.

// querySelector(...) 호출 결과가 null인 경우 에러 발생
let html = document.querySelector('.my-element').innerHTML;

 

 

?.이 추가되기 전엔 이런 문제들을 해결하기 위해 && 연산자를 사용했다. 중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야 할 구성요소들을 AND로 연결해 실제 해당 객체나 프로퍼티가 있는지 확인하는 방법을 사용했었죠. 그런데 이렇게 AND를 연결해서 사용하면 코드가 아주 길어진다는 단점이 있습니다.

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

alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다.

 

 

?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

 

옵셔널 체이닝을 사용해 user.address.street에 접근 

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

alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.

 

풀어서 해석해보면 이런 식이 될 수 있다한다.

user.address
user?.address 
= ((user ===null || user === undefined) ? undefined : user.address

 

 

-> 어떤 경우에 사용하는지?

-> 에러가 없어야 하는이유? 제작시에는 필요할텐데!!

 

 

Reference

https://rootjang-dev.tistory.com/2

[JavaScript] '?' 옵셔널 체이닝은 무엇일까?