?. - Optional chaining 연산자
객체의 프로퍼티 접근을 편하게 해준다.
const obj = {
a = {
b: 1
}
}
console.log(obj.b.c) // 에러 발생
console.log(obj.b?.c) // undefined
JS는 선언되지 않은 객체의 프로퍼티를 참조하려고 하면 에러를 발생시킨다.
이를 ?.
을 쓰지 않고 처리하면,
if(obj === null) return undefined
if(obj.b === null) return undefined
return obj.b.c
이렇게 복잡하게 처리를 해야 한다.
이 때 ?.
을 사용하면 obj.b?.c
로 간결하게 참조할 수 있어 매우 유용하다.
?? - null 병합 연산자
왼쪽 피연산자가
null
또는undefined
일 경우 오른쪽 피연산자를 반환하고 그렇지 않을 경우 왼쪽 피연산자를 반환
const a = null ?? 'a' // a : 'a'
변수에 값이 할당되어 있지 않을 시 기본값을 설정해주는 용도로 사용할 수 있다.
구현
export const ?? = (a, b) => {
if(a === null || a === undefined) {
return b
}
return a
}
활용
객체에서 depth 깊은 값을 찾을 때 없을 경우 기본값 지정하기
const a = obj?.a?.c?.d ?? 'invalid property name'
'프론트엔드 > JavaScript, TypeScript' 카테고리의 다른 글
조건부 타입과 맵드 타입, 유틸리티 타입 (1) | 2023.03.15 |
---|---|
타입 가드 (1) | 2023.01.25 |
Promise 일정 시간 초과시 대기 취소하고 에러 처리하기 (1) | 2022.08.07 |
디바운스와 쓰로틀 (0) | 2022.07.24 |
Vanila Js로 사진첩 사이트 만들기 (0) | 2022.03.16 |