Array.filter를 통해 검색 filter 구현하기

2099 단어 검색searchfilterfilter

TOC

  1. 검색기능 구현을 위해 알아야 할 함수
  2. algorithm

1. 검색기능 구현을 위해 알아야 할 함수

1. Array.filter

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"]

filter 함수는 배열을 순회하며 callback 함수에 인자를 대입해 callback 함수의 return 값이 true인 경우
배열을 만들어 해당 callback 함수에서 true로 걸러진 값을 모아 배열을 반환해준다.

2. Array.includes

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

배열에 includes의 파라미터와 비교해 값이 같은 경우 true 틀리면 false 값을 반환한다.

3. String.prototype.toLowerCase()

문자열을 소문자로 변환해 반환합니다.

2. algorithm

  1. input태그의 onChange props를 통해 state.search를 받는다. (search의 기본 값은 null이다.)

  2. 외부 파일로부터 유저의 값을 받아와 배열에 삽입해 state.users를 초기화한다.

  3. search=null인 경우 users 전체를 반환해 users의 목록이 나오게 하고, search!=null인 경우

user의 이름.toLowerCase().includes(search.toLowerCase());
를 해준다

이는 user의 소문자 이름이 search의 소문자를 포함하고 있는 경우 true를 반환하고 이 true는 user의 소문자 이름이 search의 소문자 이름을 전부가 아닌 일부만 포함하더라도 filter의 배열에 포함되게 끔 해준다.

총총

Array.filter는 true가 나온 모든 요소를 다시 배열로 반환시켜 준다는 것을 활용해 filter의 callback 함수의 반환 값으로써 다시 callback 함수를 호출해 includes를 활용할 수 있다.

조심해야 할 것은 이는 callback 지옥의 입구라는 점이다.

이 코드가 난해한 것은 callback의 return으로 다시 callback을 불러주었기 때문이다. 코드 양이 좀 늘어나더라도 굳이 callback을 또 만들어 줄 필요는 없어보인다.