Optional Chaining

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

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

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

주소 정보가 없는데 주소 정보에 접근하면 에러가 발생한다.
다른 사례로는 브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제.
자바스크립트를 사용해서 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려고 하면 문제가 발생한다.

let html = document.querySelector(".my-element").textContent;
// querySelector(...) 호출 결과가 null인 경우 에러가 발생한다.
// Uncaught TypeError: Cannot read property 'textContent' of null

optional chaining

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

let user = {};
alert (user?.address?.street); // undefined , 에러 발생하지 않는다.

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

?. 은 ?. '앞' 평가 대상에만 동작되고, 확장은 되지 않는다.
위 예시에서 사용된 user?. 은 user 가 null 이거나 undefined 인 경우만 처리할 수 있다.
실제 값이 존재하는 경우에는 반드시 user.address 프로퍼티는 있어야 한다.
그렇지 않으면 user?.address.street 의 두번째 점 연산자에서 에러가 발생한다.

console.log(user?.address.street);
//Uncaught TypeError: Cannot read property 'street' of undefined

let user = {
    address: "uiJeongBu"
}
// address를 넣어주고 다시 콘솔에 찍어보면,

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

🚨 옵셔널 체이닝은 남용하면 안된다.

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

사용자 주소를 다루는 위 예시에서는 논리상 user는 반드시 있어야하지만 address 는 필수값이 아니다. 그렇기 때문에 user.address?.street 를 사용하는 것이 바람직하다.

실수로 인해 user 에 값을 할당하지 않았다면 바로 알아낼 수 있도록 해야한다.
그렇지 않으면 에러를 조기에 발견하지 못한다.

🚨 ?. 앞의 변수는 꼭 선언이 되어있어야 한다.

변수 user 가 선언되어있지 않으면 user?.anything 평가시 에러가 발생함.

단락평가( short-circuit)

?. 는 왼쪽 평가 대상에 값이 없으면 즉시 평가를 멈춘다. 이런 평가 방법을 단락 평가라고 부른다. 함수 호출을 비롯한 ?. 오른쪽에 있는 부가 동작은 ?. 의 평가가 멈췄을 때 더는 일어나지 않는다.

(음... 이거 이해 잘 안된다)

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