[Javascript] find()와 reduce()

2023년 1월 13일

백엔드와 통신을 할 때 프론트엔드에서 백엔드로 데이터를 보내줘야하는 경우가 있었다. 그때 백엔드에서 원하는 형태의 데이터로 가공을 해 데이터를 보내줘야했다.

 

 

장바구니 페이지에서는 1. 장바구니에서 구매할 항목을 체크 후 주문하기를 누르면 선택한 항목들의 cartId가 배열에 담기는데, 그 배열에 담긴 항목의 cartId와 productId, quantity를 보내줘야 했다. 2. 내가 구매할 아이템들의 총 가격을 보내줘야 했다. 그래서 값을 구하기 위해 find와 reduce를 활용했다.

 

find()

find() 는 배열에서 특정 조건에 맞는 값을 찾는 함수이다. 조건에 부합하는 첫 번째 값을 리턴하고, 만약 조건에 일치하는 값이 없을 경우 undefinded를 리턴한다.

 

나는 find 함수를 통해 cartList에 담겨있는 항목의 cartId 와 selectedItemIdArr에 존재하는 cartId가 일치할 경우 해당 아이템을 orderProductList에 담아 관리할 수 있도록 했다.

  let orderProductList = [];
  const orderProduct = () => {
    for (let i = 0; i < selectedItemIdArr.length; i++) {
      orderProductList.push(
        cartList.find((el) => el.cartId === selectedItemIdArr[i])
      );
    }
    return orderProduct;
  };

reduce()

reduce()는 배열의 모든 요소에 대해 연산을 수행하여 하나의 결과값을 계산하는 함수이다. 총 합을 구할 때 많이 사용한다. 백엔드에서 데이터를 보내줄 때 1개당 가격을 보내줬기 때문에 프론트엔드에서 직접 수량 x 단가를 해서 총 가격을 보여줬다. 돼지목살의 경우 8개 x 1개당 9,900원 = 79,200원이 화면에 나타나도록 했다. 그러다보니 총 가격을 구하기 위해서는 개별 항목당 총 가격을 더해서 결제예정금액을 보여줘야했다.

 

cartList에 있는 품목의 개수만큼 조건문이 돌도록 했고, totalPriceArr에 각각 품목의 가격 x 수량이 담기도록 했다. 그 다음에 reduce함수를 이용하여 총 합계를 구했다.

 

이번에 함수들을 통해 원하는 값을 구하면서 왜 알고리즘 공부를 해야하는지 뼈저리게 느꼈다. 고차함수 공부를 열심히 해서 내가 원하는 값을 쉽게 구할 수 있도록 해야겠다!