참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining
// case 1
const info = {
name: 'Alice',
cat: {
name: 'Dinah'
}
}
------------------------------------------------------------------------
// optional chaining
1. console.log(info.dog.name) // 'name' of undefined
2. console.log(info?.dog.name) // 'name' of undefined
3. console.log(info.dog?.name) // undefined
------------------------------------------------------------------------
// lodash의 get
1. console.log(get(info, 'dog.name')) // undefined
?. 은 ?.’앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.
하지만 optional chaining의 2번의 경우처럼 앞의 대상에 ?.를 정의 하였다고 해서 하위까지 확장 되지는 않습니다.
?.의 앞에 평가대상이 꼭 존재하지 않아도 될 때 사용해야 합니다.
// case2 const info = null ------------------------------------------------------------------------ // optional chaining 1. console.log(info?.dog.name) // undefined 2. console.log(info.dog?.name) // 'name' of undefined ------------------------------------------------------------------------ // lodash의 get 3. console.log(get(info, 'dog.name')) // undefined
?. 을 남용하면 디버깅이 어려워지니 상황에 맞게 잘 사용해야 합니다.
옵셔널 체이닝을 권장하는 이유
// 예시
interface Info {
dog: {
name: strin
}
}
const info:Info = {
dog: {
name: 'Chao'
}
}
- 데이터, 타입의 정합성 체크
console.log(‘info’, info.dog.age) 은 type 에러 남console.log(get(info, ‘dog.age’))은 에러나지 않음
=> dog의 age라는 속성이 없는건지
dog.age의 값이 없는건지 확인하기 어려움 - 오타검증
info?.dok.name은 빌드X
get(info, ‘dok.name’)은 빌드O
=> lodash/get을 쓴다면 info에 dok.name이 값이 없는건지 오타인지 알 수 없다.