Optional chaining(?), Nullish coalescing operator(??)

Optional chaining (?)

값이 존재하지 않을 때, 그 값을 호출하면 에러가 발생하면서 어플리케이션이 중단된다. null이나 undefined일 경우 그 값을 호출 하면 에러가 발생하는데 그 때 에러를 발생시키지 않고 undefined 값을 리턴해주는 역할을 한다.

const pet = {
  age: 2,
  dog: {
    name: "lili",
  },
};

const catName = pet.cat?.name; 
console.log(catName); //undefined

위와 같은 예시에서 pet.dog.name을 호출하면 lili가 출력되나 존재하지 않는 값인 cat.name을 호출할 경우 에러를 발생한다. 이때 cat이 존재하는지 ?를 붙여서 확인할 수 있다. 존재하지 않기 때문에 undefined를 출력한다.
값을 출력하기 위해 테스트를 해서 존재하는지 여부를 미리 체크하지 않아도 optional chaining을 통해 값이 존재하지 않는 경우 예외처리를 해줄 수 있다. 여러번 쌓아서(pet.cat?.age?.name) 사용할 수도 있다. 

Nullish coalescing operator (??)

falsy (거짓 같은 값)을 고려하지 않고 값이 없는 경우인 null과 undefined 인 경우에 오른쪽 값을 반환하고, 아닌 경우 왼쪽 값을 반환하는 연산자이다. 기본값을 할당해 주는 역할을 한다.

 

falsy (거짓 같은 값) : false, 0, -0, 0n, "", null, undefined, NAN은 거짓으로 평가된다.

const text = ''; //falsy에 해당하는 값을 지정

const orCheck = text || 'Hello';
console.log(orCheck); // Hello를 반환. false로 인식하기 때문

const nullishCheck = text ?? 'Hi';
console.log(nullishCheck); // ''를 반환. falsy 값이 아니라 빈 문자열 값으로 인식하기 때문 

let text; //undefined

const orCheck = text || 'Hello';
console.log(orCheck); // Hello

const nullishCheck = text ?? 'Hi';
console.log(nullishCheck); // Hi

참고

optional chaining MDN,
nullish coalescing operator MDN