본 포스팅은 31기 SOPT 1주차 생각 과제입니다.
개요
non-null assertion과 optional chaining을 알아보고 두 차이점을 비교해보자.
과제를 수행하다가 Object is possibly 'undefined'를 마주하게 되었습니다. 이 오류가 일어나는 이유는 타입스크립트는 구체적인 value type을 예상하는데, 작성자가 구체적이지 못한 value type을 제공하기 때문인데요.(쳇, 깐깐하기는)
작성자는 조건문과 non-null assertion, optional chaining을 활용해서 해결했는데, 이 포스팅에서는 non-null assertion과 optional chaining에 주목하려고 합니다.
non-null assertion
post-fix 연산자인 ! 는 앞의 값이 확실히 null이나 undefined가 아니라는 걸 알리려고 할 때 쓴다.
다시 말해서 '나를 믿어. 절대 null이나 undefined일리 없어!'라고 못 박아서 얘기한다고 생각하시면 됩니다.
organize(members) {
const ob = members.find((member) => member.group == "ob");
const yb = members.find((member) => member.group == "yb");
console.log(
`오늘 서버파트 저녁 모임은 ${ob!.name},${yb!.name}입니다!`
);
}optional chaining
?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.
organize(members) {
const ob = members.find((member) => member.group == "ob");
const yb = members.find((member) => member.group == "yb");
console.log(`오늘 서버파트 저녁 모임은 ${ob?.name},${yb?.name} 입니다!`);
}차이점
동작은 비슷해보이지만 약간의 차이점이 있습니다.
non-null assertion은 null, undefined 일 경우는 없음을 확신할 때 사용하며 optional chaining은 null, undefined 이면 undefined을 리턴하는 것입니다.
non-null assertion의 경우, 속성 체인을 null로 보호하지 않습니다!
이미 TypeScript에서 값이 null이 되지 않을 것이라고 단언해버렸기 때문이죠.
그래서 실제 속성이 null 일 경우 에러가 발생하게 됩니다.
optional chaining의 경우, 속성이 null인지 아닌지 체크를 합니다. 속성이 null 이거나 undefined으로 확인되면 TypeScript는 속성 체인 실행을 더 이상 중지하고 코드를 계속 진행하기에 속성값이 null, undefined여도 에러가 발생하지 않습니다.
마치며
non-null assertion과 optional chaining에 대해서 간단하게 알아보았습니다. 지난 기수 때 많이 마주했던 ?와 !였지만 그렇구나하고 넘어갔는데 이번 기회에 저도 정리가 된 것 같아요:)
충분히 좋은 기능들이라고 생각하지만 무조건 남용하는 건 지양하도록 해요🙌 non-null assertion은 타입 단언이기에 조심해서 사용되어야 하며, Typescript의 장점이 묻힐 수도 있습니다. 그리고 eslint가 싫어합니다
또한 optional chaining의 경우, 안정적인 코드가 될 수도 있겠지만 테스트 코드를 작성할 때 사용한다면 디버깅시 많은 어려움을 겪을 수 있어요! 이는 테스트의 목적을 방해할 수도 있겠죠? 그러니 상황에 따라 신중하게 사용해보는 건 어떨까요?
참고 자료
Optional Chaining vs Assertion Operator in TypeScript
Optional Chaining
Typescript handbook
