배열 필터링 - array.prototype.filter()
Post

배열 필터링 - array.prototype.filter()

01/04/2022 03/04/2022
Da-Bin Jeong
2

array.prototype.filter()

  • filter() 메서드의 배개변수로는 콜백함수가 들어감
  • return에는 필터 통과 조건을 작성
  • 필터에서 통과하는 녀석들만 배열로 다시 출력
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

이전 프로젝트에서 사용

import filterSearchProps from './filterSearch.type';

const filterSearch = ({ inputValue = '', datas }: filterSearchProps) => {
  //데이터 배열에 순서 번호 추가 (id)
  const plusDataNumber = datas.map((item, index) => {
    return { id: index, key: item[0], item: item[1] };
  });

  //item기준으로 key값 필터링
  const filter = plusDataNumber.filter(data => {
    return data.item.indexOf(inputValue) !== -1;
  });

  //필터링된 값을 다시 id, key 형태로 변환 후 반환
  const result: filterSearchProps['result'] = filter.map(item => {
    return { id: item.id, key: item.key };
  });

  return result;
};

export default filterSearch;
  • 검색어를 받아서 필터링된 값을 출력하는 유틸 컴포넌트이다.
  • 이전 코드는 빈 배열을 const result = [] 결과 값으로 놓고 array.map()을 사용해서 result에 push해 줬는데 array.filter()를 사용하는 것이 더 적절한 것으로 생각되어 리팩토링했다.
  • 하지만 코드가 더 길어져 버렸는데 datas로 들어온 녀석이 2차원 배열이고, 그 배열 안에 id값이 포함이 안 되어 있는데 출력할 때는 id를 출력해야 해서 데이터 처리가 복잡해졌다.
  • 어쨌든 받아온 데이터에 id값을 추가로 넣어주고
  • key값 기준으로 필터링한 후
  • value를 삭제하고 결과 값을 넘기는 방식으로 구현했다.
  • 여기에서 filter를 사용했고 return안에 조건을 넣었다.
  • return 전에 있는 코드들은 무조건 한 번씩 실행된다.
  • array.map()과 비슷한데 새로운 배열을 반환할 때 return안에 있는 조건을 통과한 경우에만 반환되는 점이 다르다.

Reference

TIL, JavaScript