프로퍼티가 없는 중첩 객체에 접근하는 법, 옵셔널 체이닝, optional chaining

위코드 1차 프로젝트에서 만난 에러를 바탕으로 모던 JavaScript 튜토리얼을 참고해 정리한 내용입니다.

목데이터로 테스트한 페이지가 백엔드와 통신할 때 에러가 나는 경우가 많습니다. 이번 프로젝트에서는 두가지 경로로 에러가 발생했는데 하나는 데이터를 받을 때 보내주는 토큰이 서버에 로그인된 유저의 토큰과 일치하지 않을 때였고(빈 객체 데이터를 받음) 목데이터로 만들어서 넣어준 값중 일부가 (쿠폰 정보) 없을 때 였습니다. 필수 데이터가 아닐 경우 값이 없을 수 있다는 것을 가정하고 undefined 라는 값에 대한 대응을 해주어야 합니다.

1차 프로젝트에서는 주로 && 연산자를 통해 조건부 렌더링을 적용했습니다. 아래와 같은 방식을 여기저기 적용했는데, 일부는 제대로 적용되지 않아 백엔드에 해당 데이터를 꼭 넣어달라는 요청을 하기도 했습니다. (이후 리팩토링 필요)

// 해당 값이 있을 때, true 일 때 값을 할당하는 것
const couponMoney = orderedItem.coupon && orderedItem.coupon[0].coupon_money;

// 해당 값이 undefined 가 아닐 때 실행하는 실행하는 것
orderedItem.product !== undefined &&
orderedItem.product.forEach(item => {
  totalPrice += item.price;
});

실제 && 연산자를 사용할 때는 중첩 객체의 특정 프로퍼티에 접근하기 위해 && 연산자를 여러번 쓰면서 중첩된 데이터를 순서대로 확인해주는데, 이렇게 할 경우 코드가 길어진다는 단점이 있습니다.

user && user.address && user.address.street;

위 조건을 옵셔널 체이닝을 적용해 바꿔보면 아래와 같습니다.

user?.address?.street

옵셔널 체이닝은 ?. 앞의 대상이 undefined 나 null 이면 평가를 멈추고 undefined 를 반환합니다. 옵셔널 체이닝은 필수 값이 아닌 경우에만 적용해야 합니다. 필수 값이 비어있다면 에러를 통해 발견해야 합니다.

?. 는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈추는데 이를 단락 평가라고 합니다. 그래서 ?. 오른쪽에 있는 동작은 ?. 평가가 멈추면 일어나지 않습니다.

let user = null;
let x = 0;

user?.sayHi(x++); // user 가 null 이므로 ?. 오른쪽 함수는 실행되지 않는다.

그리고 옵셔널 체이닝은 객채 안의 데이터 조재 여부가 확실치 않을 때 안전하게 접근하기 위해 사용하기도 하고 (에러 없이) 특정 데이터를 지울 때도 사용합니다. (입력은 안됨)

let usr1 = {
	firstName: "Violet"
};

let user2 = null; 

let key = "firstName"

alert( user1?.[key] ); // Violet - user1 에 데이터가 있으므로 key 에 접근
alert( user2?.[key] ); // undefined - user2 는 null 이므로 key 접근 자체를 안하고 undefined

// 삭제를 할 경우도 사용 가능, 입력은 안됨

delete user?.name; // user 가 존재하면 user.name 삭제