- ??(널 병합, nullish coalecing) 연산자: || 연산자 대용으로 사용되며, falsy한 값 중 null, undefined만 따로 구분한다.
- falsy한 값? 무조건 false를 리턴하는 값 (0, '', NaN, false, null, undefined, [ ] 빈 배열, { } 빈 객체 등)
const a = 0
const b = a || 3 // || 연산자는 falsy 값이면 뒤로 넘어감
console.log(b) // 3
const c = 0
const d = c ?? 3 // ?? 연산자는 null과 undefined일 때만 뒤로 넘어감
console.log(d) // 0
let count = 0
const e = count ?? 123 // 뒤에 것을 보여주고 싶을 때 ?? 사용
- ?. (옵셔널 체이닝) 연산자: null이나 undefined의 속성을 조회하는 경우
에러가 발생하는 것을 방지
const a = {}
a.b // a가 객체이므로 문제 없음
const c = null
try {
c.d
} catch (e) {
console.error(e) // TypeError: Cannot read properties of null
} // c = null 이기 때문에 에러 발생
// ?.(옵셔널 체이닝) 연산자 사용
try {
c?.f() // ?. 사용 c가 없으면 f를 읽음.
} catch (e) {
console.error(e)
}
try {
c[0] // -> c?.[0] 에러 해결
} catch (e) {
console.error (e) // TypeError: Cannot read properties of null
}
옵셔널 체이닝이 나오기 전에는 위와 같은 문제를 해결하려면 조건문을 사용해
코드가 길어지고 지저분해졌으나 옵셔널 체이닝을 사용하면 null, undefined로 인해
발생하는 에러를 간단하게 해결할 수 있다....
타입스크립트를 사용하면 애초에 다양한 에러를 해결할 수 있다... 계속해서 배우고 발전하자!