[ TDL ] 1/13/23

실무에서 많이 쓰이는데 잘 까먹는다.

Q 두배열 객체 비교해서 중복된 값 제거

기존 원본 배열와 수정된 배열을 비교해서 수정되어진 배열 부분에서 꺼내와야 했다.
로직에서 이미 토글ON 데이터와 삭제된 데이터 리스트가 있는 와중에 전체 데이터에서 수정된 부분이 있는 경우도 데이터를 뽑아야만 했다.

A 해결과정
filter 함수를 사용하여서 콜백 함수안에 있는 true 인 데이터를 새로운 배열을 반환해 준다.
여기에서 some함수를 사용해서 배열을 비교한다. 배열에 값들이 많아서 JSON.stringify 문자열로 풀어준뒤 비교한다.
원본과 비교해서 수정된 데이터를 뽑아온 값에서 filter 함수를 사용해서 some에서 기존 토글ON 데이터와 삭제된 데이터 리스트에서 중복된 값을 뺸다.
그리고 해당 데이터에서 값을 null로 줘야 하는 값이 있었기 때문에 스프레드 연산자를 사용해서 풀어준 다음 해당 키에다가 값을 넣어주었다.

//기존 코드

const test = editedItems
  .filter(({ list: list1 }) => {
     return !beforeRegisteredBanners.some(
       ({ list: list2 }) => JSON.stringify(list2) === JSON.stringify(list1),
     );
   })
   .map(({ list }) => ({ ...list }));

 const items = editedItems
   .filter(({ item:itemUid }) => {
   // 기존 로직에서 해당 토글온 데이터, 삭제된 리스트만 뽑아져 있는 함수가 있었다.
     return ![...bannerDisplays, ...deletedBannerDisplays].some(
       ({ item: mergedListUid }) => mergedListUid === itemUid,
     );
   })
   .map((item) => ({ ...item,gender: null}));

//수정된 코드

const editBannerDisplays = registeredBanners
      .filter(({ bannerDisplay }) => {
        return !beforeRegisteredBanners.some(
          ({ bannerDisplay: originalBanner }) => JSON.stringify(originalBanner) === JSON.stringify(bannerDisplay),
        );
      })
      .filter(({ bannerDisplay }) => {
        return ![...bannerDisplays, ...deletedBannerDisplays].some(
          ({ bannerUid: mergedListbannerUid }) => mergedListbannerUid === bannerDisplay.bannerUid,
        );
      })
      .map(({ bannerDisplay }) => ({ ...bannerDisplay, gender: null }));