?. - Optional chaining 연산자 / ?? - Null 병합 연산자

?. - 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'