옵셔널 체이닝 ?.

이게 존재하나요? "아니오"면 undefined를 반환 후 평가 종료.
이게 존재하나요? "네"면 다음 단락을 평가

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

• ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.

• ?.는 존재하지 않아도 괜찮은 대상에만 사용해야 합니다.

• ?.은 연산자가 아닌 특별한 문법 구조체(Sysnatx construct) 이다.

---

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

1. 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해봅시다. 이럴 때 user.address.street(점 표기법)를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다.

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

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

2. 또 다른 사례론 브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제가 있습니다. 자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 하면 문제가 발생하죠.(까맣게 잊고있었다.)

<script>
// querySelector(...) 호출 결과가 null인 경우 에러 발생
let html = document.querySelector('.my-element').innerHTML;
</script>

---

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

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

alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다.
</script>

그런데 이렇게 AND를 연결해서 사용하면 코드가 아주 길어진다는 단점이 있습니다.

---

옵셔널 체이닝 ?.

• ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.

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

alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.
</script>

• user?.address로 주소를 읽으면 아래와 같이 user 객체가 존재하지 않더라도(null) 에러가 발생하지 않습니다.

<script>
let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined
</script>

• 위 예시를 통해 ?.은 ?. ‘앞’ 평가 대상에만 동작되고, 확장은 되지 않는다는 사실을 알 수 있습니다.( undefined를 반환하고 평가는 진즉에 멈춘다.)

---

delete와 조합

<script>
delete user?.name; // user가 존재하면 user.name을 삭제합니다.
</script>

지우기는 가능하지만 쓰기는 불가능합니다.

---

옵셔널 체이닝의 사용방식

<script>
1. obj?.prop : //obj가 존재하면 prop 반환, 없으면 undefined 반환
2. obj?.[prop] : //obj가 존재하면 prop 반환, 없으면 undefined 반환
3. obj?.method() : //obj가 존재하면 method()호출, 아니면 undefined 반환
4. obj.method?.() : //obj의 메서드 method가 존재하면 메소드 실행, 아니면 undefined 반환
</script>