javascript Optional chaining

Optional chaining

• 옵셔널체이닝이 유용한 이유

react와 javascript 를 하다보면 값이 TypeError: Cannot read property ‘?’ of undefined
라는 에러를 자주 만나게 된다. 이 방식을 가장 쉽게 해결하는 것이 옵셔널 체이닝이라고 생각한다.
foreach 등을 통해 데이터를 받아올 경우에 값이 안받아올때 undefined를 반환하게 되기때문에 이것이 TypeError를 일으키게된다. map에 일부 데이터만 없다고 해서 못받아오는 경우는 없어야하기 때문에

let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
//((obj.first === null || obj.first === undefined)

let nestedProp = obj.first?.second;
//Optional chaining

Optional chaining
위의 함수가 옵셔널체이닝의 기본적인 방식이라고 공식에서 소개하고 있다. 객체에first라는 프로퍼티를 생성하였을때 nestedProp라는 변수에서 obj.first?.second는 결국 temp가 null이나 undefined일 경우 undefined를 반환한다는 뜻이다. 정확하게 변수의 타입을 지정해줘서 TypeError를 회피하는 방식이다.

//현재 에러때문에 옵셔널체이닝 사용한 예시
    .then(data => {      
    // fetch 나 axios와 같은 방식으로 데이터를 받아왔을 경우
      const Array= data.response?.docs;
      //((data.response === null || data.response === undefined)? undefined : data.response.docs
     

위와 같은 방식으로 시도중이다