[JAVASCRIPT-모던자바스크립트] 옵셔널 체이닝 '?.'

최근에 추가됨

스펙에 추가된지 얼마 되지 않은 문법이다. 구식 브라우저의 경우 폴리필이 필요하다

옵셔널 체이닝 (optional chaining) ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.

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

자바스크립트를 배우기 시작했다고 한다면 옵셔널 체이닝이 등장하게 된 배경 상황등을 직접 겪어보지 않았을 것이라 생각한다. 여기서 몇 가지 사례를 재현하면서 옵셔널 체이닝이 등장했는지 알아보는것이 좋다.

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

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

alert(user.address.street); // 에러 발생

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

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

명세서에 ?.이 추가되기 전에는 이런 문제들을 해결하기 위해서 &&연산자를 사용하고는 했다.

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

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

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

옵셔널 체이닝의 등장

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

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

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

user?.address로 주소를 읽으면 아래와 같이 user 객체가 존재하지 않더라도 에러가 발생하지 않는다.

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

위 예시를 통해서 ?.은 ?. 앞 평가 대상에만 동작을 하고 확장은 되지 않는다는 사실을 알 수 있다.

위 예시에서 사용된 user?. 는 user가 null이나 undefined인 경우에만 처리할 수 있다.

user가 null이거나 undefined가 아니고 실제 값이 존재하는 경우에는 반드시 user.address 프로퍼티는 있어야 한다. 그렇지 않을 경우 user?.address.street의 두번째 점 연산자에서 에러가 발생된다.