[TypeScript] 옵셔널 체이닝(Optional Chaining)

Yuri Lee·2021년 11월 6일
0

Intro

현재 회사에서 TypeScript 기반의 리액트 웹 프로젝트를 진행하고 있다. 사실 나는 TypeScript의 개념만 알고 있었고, 실제로 TypeScript를 사용해본 적이 없었다. 그래서 헷갈리는 부분이 너무 많았다 🤯🤯 .. 그 중에서도 TypeScript의 옵셔널 체이닝 에 대해 알아보도록 하자!

TypeScript의 옵셔널 체이닝

타입 스크립트 3.7이 릴리즈 되면서 새롭게 사용할 수 있게 된 문법 중 하나가 옵셔널 체이닝이라고 한다. null이나 undefined 인 값이 반환되면, 즉시 중단하고 undefined 를 반환하는 문법이다. 보통의 경우에는 null이나 undefined에 접근하여 실행시키는 경우에 오류가 발생하지만, 이 경우에는 오류 없이 바로 undefined 를 반환한다.

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

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

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

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

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

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의 두 번째 점 연산자에서 에러가 발생한다.

느낀점

옵셔널 체이닝! 왼쪽 평가대상이 없어도 괜찮은 경우에 선택적으로 사용하도록 하자 :)


https://jaeheon.kr/155
https://ko.javascript.info/optional-chaining

profile
Step by step goes a long way ✨

0개의 댓글