옵셔널 체이닝 ‘?.’

옵셔널 체이닝 ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.

 

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

다음과 같이 주소 정보가 없는 user가 있을 때

let user = {}; // 주소 정보가 없는 사용자  alert(user.address.street); // TypeError: Cannot read property 'street' of undefined

존재하지 않는 요소에 접근해 요소의 정보를 가져오려할 때

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

 

?.

?. ‘앞’의 평가 대상이 undefined 나 null 이면 평가를 멈추고 undefined 를 반환

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

 

⚠️

옵셔널 체이닝은 존재하지 않아도 괜찮은 대상에만 사용해야한다. 사용자 주소를 다루는 예시에서 논리상 user 는 반드시 있어야하는데, address 는 필수값이 아니다. 따라서, user.address?.street 를 사용하는 것이 바람직하다.

⚠️

옵셔널 체이닝 앞의 변수는 꼭 선언되어 있어야한다. 변수가 선언되어있지 않으면 에러가 발생한다.