23. ?.

최근에 추가된 문법인 옵셔널 체이닝 ?.
옵셔널 체이닝을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 접근할 수 있다.

---

옵셔널 체이닝이 필요한 상황

여려명의 사용자가 존재하는데, 몇 명은 주소를 가지고 있지 않을 때

let user = {};
console.log(user.address.street); // TypeError

또는 dom을 이용해 어떠한 요소를 가져와 정보를 접근하려할 때

let ele = document.querySelector('.greet').textContent;
//.greet요소가 존재하지 않을 때(null) 에러 발생

---

옵셔널 체이닝의 등장

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

let user = {};
console.log(user?.address?.street); //undefined

user가 존재한다면 address에 접근하고 address도 존재한다면 street에 접근한다.

만약 user가 null이라면

let user = null;
console.log(user?.address); // undefined
console.log(user?.address.street); // undefined

이미 user에서 null을 발견하여 평가를 그만하기 때문에 위와 아래는 동일한 결과를 도출한다.

옵셔널 체이닝을 남용하면 안된다.
존재하지 않아도 괜찮은 대상에만 사용해야한다.
위에서 user의 경우는 꼭 필요한 데이터 이기때문에
user.address?.street로 작성하는것이 맞다.
불필요한 곳에 사용하다 보면 나중에 디버깅이 어려워 진다.

만약 옵셔널체이닝앞에 변수가 오는것이라면 해당 변수는 꼭 선언이 되어야한다. 그렇지 않다면 ReferenceError가 발생할 것이다.

---

단락 평가

?.는 평가 대상의 값이 없다면 즉시 평가를 멈춘다.
이것을 단락 평가라고 하며, 오른쪽의 부가 동작은 더이상 일어나지 않는다.

let user = null;
let x = 0;

user?.sayHi(x++); // user가 null이기 떄문에 아무일도일어나지 않는다.

console.log(x); // 0

---

?.() 와 ?.[]

?.은 함수나 대괄호와 함께 동작할 수 있는 특변한 문법 구조체다.

let user1 = {
  admin() {
    console.log('관리자 입니다');
  }
}
let user2 = {};

user1.admin?.(); // 관리자 입니다.
user2.admin?.(); // admin이 존재하지 않아 평가가 멈춤

let user1 = {
  firstName: "quakka"
};

let user2 = null; // user2는 권한이 없는 사용자라고 가정해봅시다.

let key = "firstName";

console.log( user1?.[key] ); // quakka
console.log( user2?.[key] ); // undefined

console.log( user1?.[key]?.something?.not?.existing); // undefined

delete와 조합

delete user?.name; // user가 존재한다면 삭제