TIL 47 | 옵셔널체이닝 💛

Gom·2021년 4월 6일
0

JavaScript

목록 보기
12/22
post-thumbnail

에러 메시지를 줄여주는 고마운 옵셔널체이닝

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


필요성

10명의 유저 정보를 가지고 있다고 가정해보자.
주소 정보가 포함된 유저도 있고 그렇지 않은 경우도 있다.

존재하는 주소 정보만 얻고자 하는 의도로 주소 정보에 접근하다가 주소 정보가 없는 유저를 만나게 되면 undefuned 에러가 발생한다.
TypeError: Cannot read property '~~~' of undefined

이전의 해결방식

?.이 추가되기 전에는 &&연산자를 이용했다.
특정 프로퍼티에 접근하기 위해 거쳐야 할 구성요소를 AND로 연결했다. AND의 단점은 코드가 길어진다는 것이다.

사용방법

alert(user?.address);

물음표로 객체 존재여부 확인 후 존재하면 프로퍼티에 접근

주의사항

  • 남용자제
    : 존재하지 않아도 괜찮은 대상에만 사용 꼭 있어야 하는 값에 사용할 경우 프로그래밍 에러를 쉽게 찾을 수 없음.
    : 에러를 조기에 발견하지 못해 디버깅이 어려워질 수 있음.

  • 변수 선언 여부
    : 옵셔널 체이닝은 선언된 변수에만 작동
    :?.앞의 변수는 꼭 선언되어 있어야 함.

특징

  • 단락평가(ㄴshort-circuit)
    ?.의 왼편, 즉 평가대상에 값이 없으면 즉시 평가를 멈추는 평가 방법을 의미한다.
  • (), []와 함께 사용 가능하다.
    ?.와 소괄호, 대괄호를 함께 쓸 수 있다.
    소괄호로 함수 호출, 대괄호로 객체 프로퍼티에 접근할 수 있다.
profile
안 되는 이유보다 가능한 방법을 찾을래요

0개의 댓글