옵셔널 체이닝 연산자는 null이나 undefined의 속성을 조회하는 경우 에러가 발생하는 것을 막습니다.

const a = {}
a.b; // a가 객체이므로 문제없음

const c = null;
try {
  c.d;
} catch (e) {
  console.error(e); // TypeError: Cannot read properties of null (reading 'd')
}
c?.d; // 문제없음

try {
  c.f();
} catch (e) {
  console.error(e); // TypeError: Cannot read properties of null (reading 'f')
}
c?.f(); // 문제없음

try {
  c[0];
} catch (e) {
  console.error(e); // TypeError: Cannot read properties of null (reading '0')
}
c?.[0]; // 문제없음

위 코드처럼 일반적인 속성뿐만 아니라 함수 호출이나 배열 요소 접근에 대해서도 에러가 발생하는 것을 방지할 수 있습니다. c?.d와 c?.f(), c?.[0]의 값은 undefined가 된다는 것도 알아두세요.

옵셔널 체이닝 연산자는 자바스크립트 프로그래밍을 할 때 발생하는 TypeError: Cannot read properties of undefined 또는 null 에러의 발생 빈도를 획기적으로 낮출 수 있기에 자주 사용합니다.

이외에도 많은 문법이 추가되었고 앞으로도 추가될 예정입니다. 하지만 이 책에서는 위에서 설명한 내용 정도만 자주 사용합니다. 다른 변경 사항이 더 궁금한 분들을 위해 2.3절에 새로운 문법을 배울 수 있는 사이트의 링크를 적어놓았습니다.

이제 프런트엔드에서 사용되는 자바스크립트 코드를 알아보겠습니다.