들어가며 😃
대체 이 글을 왜쓰냐! 특정 레파지토리 Issue List 들을 가져오던 중, 계속해서 property type error 오류 메시지를 만났기 떄문이다. 프로젝트 제출 기한이 짧고, 빠르게 제출해야 해서 옵셔널 체이닝을 사용하고 난 후 그냥 넘어갔지만 이제는 알고 넘어가야 할 것 같아 글을 작성한다.
옵셔널 체이닝이란 ? 🤔
간단하게 이야기를 하자면 ?.를 사용하면 프로퍼티가 없는 객체에 에러 없이 안전하게 접근이 가능하다는 뜻이다. 예를 들어 사용자가 여려 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정을 해보자 ! 이럴때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다.
let user = {}; // 주소 정보가 없는 사용자
alert(user.address.street); // TypeError: Cannot read property 'street' of undefined?.은 '앞'의 평가 대상이 undefined 이거나 null 이면 평가를 멈추고 undefined를 반환하게 해주는 역할을 한다. 위에 코드를 참고해서 다시 한번 예를 들어 보겠다. 옵셔널 체이닝을 사용하여 user.address.street에 안전하게 한번 접근을 해보겠다.
let user = {}; // 주소 정보가 없는 사용자
alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.옵셔널 체이닝을 남용하지 말자 ❌
?.는 존해자히 않아도 괜찮은 대상에게만 적용을 해야한다. 예를들어 사용자 주소를 다루는 위 예시에서 논리상 user는 반드시 있어야 하는데 address는 필수값이 아니다. 그러니 user.address?.street를 사용하는 것이 바람직하다.
요약
옵셔널 체이닝 문법 ?.은 세 가지 형태로 사용할 수 있다.
obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함
?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행한다.
?.를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있다.
?.은 ?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 한다.
꼭 있어야 하는 값인데 없는 경우에 ?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없으므로 이런 상황을 만들지 말자.
출처 : 코어 자바스크립트(옵셔널 체이닝)
