[JS] 옵셔널 체이닝 : Optional Chaining(?.)

이번 포스팅에서는 삼항연산자와 조금은 헷갈릴 수 있는 Optional Chaining 연산자에 대해서 알아보도록 하겠습니다.

 

목차

---

0. 그게 뭔데?

Optional Chaining, 말 그대로 선택적으로 체이닝 하는 것을 뜻합니다.

이것만 듣고는 아직 잘 모르시겠죠..?!

 

우리가 일반적으로 자바스크립트에서 chaining을 사용해야 할 때는 .을 많이 사용해왔습니다.

하지만 만약 중간에 TypeError가 발생하게 된다면 어떨까요?

에러가 발생하면서 정상적으로 프로그램이 동작하지 않겠죠?

 

0.0. .의 문제점

기존 방법인 .을 사용한 예시 하나를 보겠습니다.

 

user 객체를 하나 만들고, 그 내부에 있는 요소들에 접근하기 위해서 .을 이용한 체이닝 방식으로 접근했습니다.

그런데 만약 잘못된 곳으로 이동하게 되면 어떨까요?

첫 번째 체이닝에서 잘못된 곳을 선택하면 undefined가 뜨게 됩니다.

그런데 그렇게 잘못 선택한 곳에서 또 다시 체이닝으로 무언가를 찾게 되면 undefined를 체이닝하게 되고, 이 과정에서 TypeError가 발생하게 됩니다.

 

 

이걸 막기 위해서는 if문이나 &&를 이용한 방어 로직을 짜야 하는데, 이렇게 되면 당연히 코드 길이가 길어지고 지저분해지겠죠?

(기존에는 방어 로직을 사용하거나 lodash 라이브러리를 사용해서 이런 위험성을 차단해주곤 했습니다.)

 

하지만 ES2020부터 생긴 ?.(Optional Chaining 연산자)를 통해서 방어 로직이나 별도의 라이브러리 없이도 "없는 속성값에서 발생할 수 있는 TypeError"를 막을 수 있게 되었습니다!

 

체이닝을 시도할 때 ?. 연산자를 사용하게 되면 해당 객체가 undefined나 null인 경우 TypeError 대신 undefined를 얻게 된 것이죠.

 

---

1. 실제 예시

전혀 어려울 것이 없습니다!

우리는 . 자리에 ?.만 넣어주면 됩니다.

기존 TypeError 대신 undefined가 나오는 모습 보이시죠?!!

 

 

추가로 ?. 연산자는 배열이나 함수에서도 사용할 수 있습니다.

 

배열에서의 예시

 

함수에서의 예시

 

이렇게 만들게 되면 많은 케이스에서 undefined가 발생하게 됩니다. (즉 이로 인해서 발생할 수 있는 문제가 없을 때에만 사용이 가능하다는 말이죠!)

그렇다면 undefined를 추출하게 될 때 특정한 값을 출력하게 만들고 싶을 수도 있지 않을까요?

 

그럴 때 사용할 수 있는게 바로 ??(Nullish coalescing operator) 연산자입니다.

??는 왼쪽 피연산자가 null이나 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 연산자입니다.

?.을 이용해서 undefined를 추출하게 되면 특정 값으로 반환하게 해 줄 수 있는 것이죠!

 

?? 연산자에 대해서 궁금해지셨다면 아래 포스팅을 참고하세요!

[JS] Nullish coalescing operator(??)

 

---

2. 참고 문헌

 

Optional chaining - JavaScript | MDN

옵셔널 체이닝 '?.'

[ES2020] ?. 연산자 - Optional Chaining