💫JavaScript | TypeError와 옵셔널 체이닝

✨ 문제

API로 가져온 객체 데이터 내 저장된 속성에 접근하고, 접근한 속성에 특정 메서드를 적용할 때마다 다음과 같은 에러가 발생하곤 했다.

위 에러는 해당 코드 내 productData.price.toLocaleString()에서 발생하고 있다. productData라는 객체 내 price라는 key에 접근한 후 가져온 value로 toLocaleString()을 적용하려 할 때 발생한 오류이다.
(이외에도 slice() 등 특정 메서드로 값을 처리하려 할 때에도 해당 에러가 발생하였다.)

해당 컴포넌트에는 기본적으로 태그 최상단에서 &&연산자를 사용해 로딩이 완료 되었고(isLoading), 객체가 존재할 때(productdata)에만 렌더링 될 수 있도록 적용되어 있다.
그래서 productData.product_name 같은 단순 접근에서는 이상이 없지만 접근 후 toLocaleString() 메서드 이용 시 에러가 그대로 발생하는 것을 볼 수 있었다.

이미 상위에 productData가 있을 때만 처리될 수 있도록 지정해 주었음에도 왜 에러가 발생하는 걸까?

---

원인

• 일단 문제가 발생하는 가장 큰 이유는 productData 객체 자체는 존재하지만 그 안의 price 속성이 없을 경우에 대한 처리가 없기 때문이다.
• 위와 같은 코드에서는 객체가 존재하더라도 그 객체의 특정 속성이 존재하지 않을 때 해당 속성에 접근하려고 하면 undefined를 반환해 준다.
  하지만, 메서드를 호출하려고 하면 undefined나 null은 메서드를 가질 수 없기 때문에 TypeError가 발생하게 되는 것이다.

---

해결 방법

해결방법 1) && 연산자 직접 적용하기

먼저 &&연산자로 price 속성까지 직접 적용하는 방법이 있다.
다만 이 방법의 경우 객체의 중첩이 더 깊은 데이터에 접근할 수록 &&연산자를 하나하나 일일이 적용해야 하는 번거로움이 생길 수 있다.

해결방법 2) - 옵셔널 체이닝 연산자

&&연산자 보다 더욱 간편하고 안전하게 프로퍼티에 접근할 수 있는 방법이 있다. 바로 옵셔널 체이닝이다.
아래 코드와 같이 접근할 프로퍼티에 옵셔널 체이닝 연산자(?.)를 사용해 주면 된다.

1) ?.를 표시한 좌항의 값(여기서는 productData.price)이 null 또는 undefined인 경우, 에러를 발생시키지 않고 실행 종료 후 undefined를 반환한다.
2) productData.price가 존재한다면 (null 또는 undefined가 아니라면), 그 다음에 오는 .toLocaleString() 메서드를 호출하게 된다.

---

👀 옵셔널 체이닝이란?

JavaScript에서 객체의 중첩된 속성에 접근하려고 할 때, 해당 속성이 존재하지 않으면 undefined를 반환하는 대신에 TypeError가 발생한다. 이러한 문제를 해결하기 위해 ES2020에서 도입된 기능이 바로 '옵셔널 체이닝' 이다.

즉, 내가 만난 저 TypeError를 해결하기 위해 등장한 기능이라는 것🌟

객체의 속성을 읽어오는 과정에서 해당 값이 undefined 또는 null일 경우, 에러를 발생시키지 않고 undefined 또는 null을 반환하기 때문에 코드의 안정성을 높일 수 있다는 장점을 지니고 있다.

활용

• 함수나 메서드 호출에도 사용할 수 있다.

  let user = {
  sayHello: function() {
   return 'Hello!';
  }
  };
  console.log(user.sayHello?.()); // Hello!
  

  let user = {};
  console.log(user.sayHello?.()); // undefined

  user.sayHello존재하면 함수를 호출하고 그 결과값을 반환한다. user.sayHello가 존재하지 않으면(undefined나 null일 경우), 바로 undefined를 반환한다.

• 배열에도 옵셔널 체이닝을 사용할 수 있다.

  let value = arr?[index];

  배열 arr이 존재하면 해당 인덱스의 값을 반환하고, 그렇지 않으면(undefined나 null일 경우), 바로 undefined를 반환한다.
  

특징

• 가장 왼쪽의 평가대상인 변수는 반드시 선언 되어 있어야 한다.(위 예시에서는 productData)
  변수(productData)가 선언되어 있지 않을 시 ReferenceError가 발생할 수 있다.
• 옵셔널 체이닝은 왼쪽 평가대상에 값이 없으면(null 또는 undefined) 즉시 평가를 멈추고, 아무 동작도 일어나지 않게 된다. (이를 단락 평가 방법(short-circuit)이라고 한다)
• 옵셔널 체이닝 연산자는 좌변의 값이 null 또는 undefined일 때만 작동한다. 다른 'falsy'한 값들 (false, 0, "", NaN 등)에서는 작동하지 않으며 이런 경우엔 일반적인 프로퍼티 접근/함수 호출과 동일하게 작동한다.
• 남용 금지 : 존재하지 않아도 괜찮은 대상에만 사용할 것
  위 예시에서 productData는 반드시 있어야 하는데 price는 필수값이 아니므로 productData?.price?. 보다는 productData.price?. 로 사용하는 게 바람직한 방법이며, productData?.price와 같이 사용한다면 변수productData가 존재하지 않더라도 ReferenceError 대신 undefined가 반환되고 에러가 발생하지 않아 디버깅이 어려워질 수 있다.