JS / 2020 웹개발경진대회 장바구니 기능 구현 중 시행착오 / find(), findIndex()함수

Sangho Dev 💻 회고록·2022년 12월 1일
0

2020년도 웹개발 경진대회 문제를 풀던 도중 위 상품 목록에서 담기 버튼을 누르게 되면 장바구니에 담기는 기능을 구현해야하는 상황에 직면했다.

처음에는 담기버튼을 누르면 localStorage에 setItem을 이용해 저장하고 getItem 로컬스토리지 함수를 이용해 다시 장바구니에 재배열하는 시행착오가 있었다. 하지만 로컬스토리지에는 문자열 형태로 저장되기 때문에

		var cart = [];
        var newItemCount = 0;
        $(".card .btn-dark").on("click", (e) => {
          let item_id = e.target.dataset.id;
          let click_item = products.find((a) => {
            return a.id == item_id;
          }); // 클릭한 카드가 하나의 객체로 생성
          let whereItem = cart.findIndex((a) => {
            return a.id == item_id;
          });
          if (whereItem == -1) {
            click_item.count = 1;
            cart.push(click_item);
          } else {
            click_item.count++;
            console.log(click_item.count);
          }

해당기능을 구현하기 위해서 담기 버튼을 누르면 해당 카드를 새로 만든 cart배열에 저장해야했다.
먼저

<button class = "btn btn-dark" data-id = "${arr[i].id}"}>담기</button>

각 버튼마다 data-id를 이용해서 순차적으로 id를 부여하였고
해당 id를

let item_id = e.target.dataset.id;

e.target을 이용하여 클릭한 버튼의 id를 item_id라는 변수에 저장하였다.
이후

let click_item = products.find((a) => {
            return a.id == item_id;
          }); // 클릭한 카드가 하나의 객체로 생성

find() 함수를 이용하여 위 네가지 상품 배열을 검색하여 클릭한 버튼의 id와 위 상품중에서 id가 같은게 있다면 해당 카드를 click_item 이라는 변수에 객체형태로 저장하였다.

그러나 또 다른 문제를 직면하게 되었는데 click_item을 cart라는 빈배열에 push() 함수를 이용해서 추가하려다 보니 중첩된 카드가 계속 반복해서 cart배열에 쌓이게 되는 현상이 발생했다.

그래서 findIndex()함수를 이용해서 cart 배열에 해당 카드가 있는지 없는지 검사 후,
있으면 해당 카드의 수량을 1 올려주고, 없다면 cart에 push해주는 방식으로 구현하였다.

let itemCheck = cart.findIndex((a) => {
            return a.id == item_id;
          });
          if (itemCheck == -1) {
            click_item.count = 1;
            cart.push(click_item);
          } else {
            click_item.count++;
            console.log(click_item.count);
          }

이렇게 되면 상품의 수량과 중복검사도 모두 할 수 있는 코드가 되었다.

profile
빨리 가는 유일한 방법은 제대로 가는 것이다. (로버트 C.마틴, <클린 코드>의 저자)

0개의 댓글