Javascript - 기존배열요소 와 추가될 요소 중복검사 하는법 some()

1인당 1개의 제품만을 구매할 수 있는 조건을 가진 상품이라면 중복으로 장바구니에 담기는것은 당연히 안될것입니다.

 

제품을 장바구니에 담은후 또 같은제품을 장바구니에 담으려는 시도를하면 중복구매는 할수없다고 알림창을 띄어주는것이 사용자 경험에 좋을것입니다.

 

저는 NFT 거래소 사이트를 만들고있는데 NFT도 1개의 NFT는 중복으로 장바구니에 담을수 없기에 중복검사 로직 추가가 필요했습니다.

 

Array.prototype.some() 을 사용해보자!

 

문법

 

arr.some(function(currentValue, index, array), thisValue))

some 메서드는 콜백함수의 반환값이 하나라도 true 라면 true를 반환하고 모두 false라면 false를 반환하게됩니다.

 

장바구니에 위와같은 배열객체가 담겨있다고 하겠습니다. 

NFT 특징상 identifier 는 컬렉션이 다르면 얼마든지 겹칠수가 있기때문에 image_url 로 중복여부를 검사하도록 하겠습니다.

 

 addToCart: (state, action: PayloadAction<CartListType>) => {
      const isDuplicate = state.cartList.some(
        (cart) => cart.image_url === action.payload.image_url
      );
      if (isDuplicate) {
        alert("이미 담긴 아이템 입니다.");
      } else {
        state.cartList.push(action.payload);
      }
    },

위 코드는 장바구니 담기 기능을 하는 Redux의 Action입니다. cartList 의 요소들의 image_url 과 payload로 넘어오는 image_url을 비교하여 모두 하나라도 중복이 있다면 true가 반환되어 if문이 실행될것입니다.

중복된값이 한개도 없다면 즉 모두 false 라면 some메서드의 리턴값은 false 가 되어 장바구니에 아이템이 추가가 되겠죠