[2022.07.26] 자바스크립트 옵셔널 체이닝(Optional chaining)

REASON·2022년 7월 26일
0

STUDY

목록 보기
84/127

옵셔널 체이닝

Optional chaining 연산자 ?.
옵셔널 체이닝은 참조, 기능이 undefined나 null일 가능성이 있을 때 사용하면 된다.

. 체이닝 연산자와 동작은 유사하지만
?.는 참조가 null이나 undefined이면
에러발생 대신 리턴 값을 undefined로 만든다.

?. 는 존재하지 않아도 괜찮은 대상에만 사용해야 한다.
반드시 필요한 값이라면 ?. 를 사용하지 않는 것이 좋다.
?. 앞의 변수는 반드시 선언되어 있어야 한다.

const person = {

}

현재 person이라는 객체는 비어있지만 person의 hobby.title 값을 출력하는 코드를 작성해보았다.

일반적인 체이닝 연산자를 사용하면 다음과 같은 에러가 발생한다.

console.log(person.hobby.title);
// 실행 결과
TypeError: Cannot read properties of undefined (reading 'title')

체이닝 연산자를 사용하니 타입 에러가 발생했다.

하지만, 다음과 같이 옵셔널 체이닝 .? 을 사용하면 에러가 발생하지 않는다.

console.log(person.hobby?.title);
// 실행 결과
undefined

person이라는 객체가 hobby.title 을 가지고 있는 title이 출력되었겠지만 hobby.title이 정의되지 않았기 때문에 일반 체이닝 연산자에서는 에러가 발생했다.

옵셔널 체이닝의 경우 hobby가 undefined였기 때문에 평가를 멈추고 undefined를 반환하여 에러가 발생하지 않는다.


참고 자료
MDN Optional chaining
모던 자바스크립트 튜토리얼 옵셔널 체이닝

profile
블로그 티스토리로 이전했어요! ⇒ https://reasonz.tistory.com/

0개의 댓글