?.

: 자바스크립트에서 비교적 최근에(?) 도입된 연산자인 '옵셔널 체이닝 연산자'는 프로퍼티가 없는 중첩 객체에 에러 없이 안전하게 접근할 수 있다.(중첩된 객체가 아닐 경우 굳이 사용할 필요는 없..)

---

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

: user가 여러 명 있는데 그 중 누군가의 주소 정보는 가지고 있지 않다고 가정해보자. 그럴 때 alert를 이용해 user의 주소 정보에 접근하면 어떻게 될까?

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

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

street 프로퍼티를 읽을 수 없다며 타입에러가 발생한다.
에러.. 너란 놈...

위에서 말했듯이, 옵셔널 체이닝 연산자는 비교적 최근에 도입되었다고 했다.

그렇다면 ?. 연산자 도입 이전에는 이 문제를 어떻게 해결했을까?

let user = {};

alert(user && user.address && user.address.street); 
// undefined

And 연산자를 활용하여 실제 해당 객체나 프로퍼티가 있는지 확인하는 방법을 사용했다. 오호.. undefined 반환돼서 에러가 발생하지 않았다!
그런데 문제는 && 연산자를 사용하니 코드가 매우 길어지고 지저분해졌다.

---

옵셔널 체이닝의 등장!

?.는 ' 앞 '의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환하게 된다.

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

alert(user?.address?.street); 
// undefined

user에 프로퍼티가 존재하지 않더라도 user?.address를 사용하였고, 그 결과 undefined를 반환하여 에러가 발생하지 않았다. 오예!

null도 똑같겠지!

let user = null;

alert(user?.address); // undefined
alert(user?.address.street); // undefined

참고로 위에 사용된 user?.는 user가 undefined나 null일 경우에만 처리할 수 있다.
user의 실제 값이 존재하는 경우에는 user.adress 프로퍼티는 있어야 한다. 그렇지 않으면 .adress이후 .street속성에서 에러가 발생할 것이다.

---

?. 연산자 사용시 주의사항

• 물음표 ' 앞 '에 있는 평가 대상에만 동작된다.
  앞쪽 평가 대상의 값이 존재하지 않는다면 즉시 평가를 멈춘다.

• 존재하지 않아도 되는 대상에만 사용해야 한다.

• 옵셔널 체이닝은 선언이 완료된 변수(예제에선 user)를 대상으로만 동작한다.
  변수가 선언되지 않았다면 에러가 발생한다.

---

참고하기 매우 좋은 영상을 가져왔다.

https://youtu.be/WHUvtiKy_pg?si=VbrLlM8AmiX2d9u1