ES2020, typescript3.7, Babel 7.8.0, CRA 3.3.0 Node.js 14 지원
옵셔널 체이닝의 연산자는 ?. 입니다.
최신 버전(ES2020)에서 사용 가능한 기능으로 객체 체인 속성의 존재 여부를 확인합니다.
애플워치 구매를 고민하는 친구에게 하던 말처럼 ‘있으면 모르겠지만 없으면 너무 불편한’ (결론은 익숙해지면 아주 유용한) 기능의 연산자입니다.
자바스크립트로 객체 내부의 속성에 접근할 때, 존재하지 않는 객체(undefined)의 내부 속성에 접근하면 에러가 발생합니다.
const myObject = {
myOne:{
name:'one'
}
}
console.log(myObject.myTwo); // undefined
console.log(myObject.myTwo.name); // error
위와 같이 존재하는 객체의 하부 속성이 존재하지 않으면 undefined를 반환하지만 존재하지 않는 객체의 하부 속성에 접근하면 에러가 발생합니다.
객체와 속성이 존재하지 않는 상황을 가정하여 코드를 보수적으로 짜는 것은 습관화되어 있지 않으면 놓치기 쉽습니다.
1. 옵셔널 체이닝 사용
앞의 에러를 방지하기 위해서는 다음과 같이 먼저 객체의 존재 여부를 확인 후 존재하는 경우에만 속성에 접근하는 방법을 사용할텐데요.
const myObject = {
myOne:{
name:'one'
}
}
console.log(myObject.myTwo&&myObject.myTwo.name); // undefined
&&를 사용해 존재 여부를 먼저 체크합니다.
A && B를 예로 들어,
A = true면 return B,
A = false면 return A
와 같습니다.
false의 조건은 다음과 같습니다.
- undefined
- null
- NaN
- 0
- empty string
- “”
- ”
- “
위 코드는 존재 시 name 속성을 반환하지만 속성이 존재하지 않더라도 undefined가 반환되므로 에러가 발생하지 않습니다.
이 체크 부분의 코드를 간략하게 만들어 코드의 가독성을 높일 수 있는 것이 옵셔널 체이닝입니다.
const myObject = {
myOne:{
name:'one'
}
}
console.log(myObject.myTwo?.name); // undefined
앞의 코드와 완전히 동일한 결과가 발생합니다.
굉장히 단순하고 직관적인 것이 매력적입니다.
물론 속성 이외에 메서드나 함수 호출에도 사용할 수 있습니다.
const myObject = {
show(){
console.log('show');
}
}
console.log(myObject.show?.()); // show
console.log(myObject.exist?.()); // undefined
console.log(myObject.exist()); // error
호출한 메서드가 존재하지 않으면 옵셔널 체이닝은 undefined를 반환하지만 사용하지 않으면 에러가 발생합니다.
이와 같이 옵셔널 체이닝을 사용하면 null, undefined로 발생하는 에러를 많이 때려 잡을 수 있습니다.
그러나 과유불급을 잊지 말아야 합니다.
여기 저기 남발하면 에러 발생은 현저하게 줄어들겠지만 정작 문제가 발생해야 하는 부분에서도 문제가 발생하지 않아
디버깅이 어려워지는 문제가 발생하므로 꼭 필요한 부분에만 사용하는 것이 좋습니다.