[JS] "?." 옵셔널 체이닝 연산자 (Optional chaining)

📗 Optional Chaning

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

 

📗 언제 사용하나?

1. 있을 수도 없을 수도 있는 객체의 속성을 조회할 때

말이 이상하게 들리겠지만 옵셔널 체이닝은 이런 경우에 굉장히 유용하게 사용된다.

옵셔널 체이닝 연산자가 없을 때는 객체에 속성이 있는지 확인하기 위해서 "&&" 연산자를 썼다. 

 

let user = {};

user 객체 안에서 user.address.street 을 조회하여야 하는데 주소 정보가 없는 user가 있다고 할 때

그냥 조회한다면 바로 타입에러가 발생할 것이다.

이를 해결하기 위해서 

console.log(user && user.address && user.address.street);

이런 식으로 확인하면서 접근하는 방법을 썼다.

 

옵셔널 체이닝이 만들어지고 나서는

console.log(user?.address?.street);

이렇게 접근할 수 있게되었다. 옵셔널 체이닝으로 접근하면 타입에러가 나지 않고 값이 없는 경우에는 undefined를 반환한다.

---

1-2. 

나의 경우 api 값을 불러올 때 사용했다. (튜토리얼 보는중..)

        <img
          src={channelIcon?.url} // ? 이 물음표 뭐지
          alt='channel img'
        />

channelIcon이 api에서 불러온 값이고 값이 없을 경우를 방지하기 위해서 옵셔널 체이닝을 사용한 것 같다. 

(튜토리얼에서 저 물음표를 봤을 때 오타인줄ㅎㅎ)

---

2. 존재하지 않을 수 있는 메서드를 호출할 때 (함수의 호출)

let result = someInterface.customMethod?.();

만약 속성에 해당 이름이 있지만 함수가 아니라면 ?. 의 사용은 여전히 예외를 발생시킨다.

옵셔널 체이닝은 ?. 이전 부분만 확인하기 때문에 저 예제의 경우 someInterface 자체는 null이나 undefined가 아니어야 한다. 만약 null 또는 undefined 값이 나올 수 있는 경우라면

someInterface?.customMethod?.();

이렇게 사용해야한다.

 

참고한 사이트

https://ko.javascript.info/optional-chaining

옵셔널 체이닝 '?.'

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining - JavaScript | MDN