JS / filter() / 웹개발 경진대회

2020년도 웹개발 경진대회 문제 풀이 중 검색어 필터 기능이다.
Input 박스에 검색어를 입력하면 상품이름이나 브랜드이름에 해당 Input value가 포함되어 있다면 해당 카드만 남기고 나머지는 화면에 보이지 않게하는 원리라고 생각하고 구현을 시작했다.

먼저 인풋박스에 키보드 입력이 될 때 마다 이벤트 발생을 감지하는 keyup() 이벤트 리스너를 사용하였다. 검색어를 입력하고 버튼을 눌러 검색하는 것이 아닌 입력시 마다 필터를 적용하여 카드를 화면에 보여주는 방식을 사용하기로 했다.

먼저 input박스 안의 value를 keyup 이벤트가 발생할 때 마다 inputVal 이라는 변수에 저장시켜주었다.

처음에 생각했던 것은

if(inputVal.length >= 2 && (a.title.includes(inputVal) || a.brand.includes(inputVal)))

if문을 이용하여 조건문 내부에서 조건에 만족하는 카드만 새로운 배열에 집어넣는 방식을 생각했다. 그렇게 하니 다른 검색어를 입력할때 기존 카드를 삭제했다가 새로 배열을 쌓는 과정이 너무 복잡했다.

 		var products = data.products;
        var new_list = [];
        $("#filter").keyup(() => {
          var inputVal = $("#filter").val(); // 입력한 값
          if (inputVal.length >= 2) {
            new_list = products.filter((a) => {
              return a.title.includes(inputVal) || a.brand.includes(inputVal);
            });
            $(".row").html("");
            create_card(new_list);
          } else if (inputVal == "") {
            $(".row").html("");
            create_card(data.products);
          }
        });

이 문제는 fliter() 함수를 이용하면 쉽게 해결할 수 있었다.

filter() 함수

filter() 함수란

Array.filter(callbackfn(element){
	return ;     
}

로 사용하며 해당 배열에서 반환값을 ture로 만드는 요소만을 따로 추출해 새로운 배열을 만들어내는 함수다.

a.title.includes(inputVal) || a.brand.includes(inputVal)

이 조건에 만족하는 함수를 반환시켜 새로운 배열을 new_list라는 배열에 저장하고 new_list를 cart에 띄우는 방식으로 구현할 수 있었다.