JS - 옵셔널체이닝(Optional chaining)

Cannot read property

자바스크립트 작성 중 Cannot read property를 보는 경우가 많았다.
이는 특정 정보를 가져오고자 하는데 그 정보가 존재하지 않을 때 발생하는 에러다.

  if (storageData.complete === true) {
    li.classList.add("complete");
  }
// TypeError: Cannot read properties of undefined (reading 'complete')

이 문제를 해결하기 위해서 예전에는 && 연산자를 이용하여 해결했다.

// 중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야 할 구성 요소들을 $$로 연결
 if (storageData && storageData.complete === true) {
    li.classList.add("complete");
  }
// 코드가 길어진다는 단점이 있다.

옵셔널 체이닝의 등장

// 옵셔널체이닝 '?' 를 사용하면 간단하게 문제를 해결 할 수 있다.
  if (storageData?.complete === true) {
    li.classList.add("complete");
  }

'?' 은 앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

옵셔널 체이닝의 사용 예시

let user = {}; // 주소 정보가 없는 사용자
alert( user?.address?.street ); // undefined, 에러가 발생하지 않는다/

let user = null;
alert( user?.address ); // undefined
alert( user?.address.street ); // undefined
// 위 예시를 통해 ?.은 ?. ‘앞’ 평가 대상에만 동작되고, 확장은 되지 않는다는 사실을 알 수 있다.

• 위 예시에서 사용된 user?.는 user가 null이나 undefined인 경우만 처리가 가능하다.
• user가 null이나 undefined가 아니고 실제 값이 존재하는 경우엔 반드시 user.address 프로퍼티는 있어한다. 그렇지 않으면 user?.address.street의 두 번째 점 연산자에서 에러가 발생한다.

<주의사항>

• ?. 는 존재하지 않아도 괜찮은 대상에만 사용해야 한다.
  사용자 주소를 다루는 위 예시에서 논리상 user는 반드시 있어야 하는데 address는 필수값이 아니기에 user.address?.street를 사용하는 것이 바람직하다.
  => user값이 존재 하지 않다면 에러가 나오도록해서 문제를 알아낼 수 있도록 해야한다.
• - ?. 앞의 변수는 꼭 선언되어 있어야 한다.
  위 예시에서 변수 user가 선언되어있지 않으면 user?.anything 평가시 에러가 발생한다.
  user?.anything을 사용하려면 let이나 const, var를 사용해 user가 정의된 변수를 대상으로만 동작한다.

참고자료