TIL20. React filter

김정현·2020년 10월 18일
1

filter 란?

filter() 메서드는 주어진 배열 내에서 콜백 함수로 넘어온 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.
Array.prototype.filter() 이렇게 사용한다.

▼예시

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6); 
// [ 'exuberant', 'destruction', 'present' ]

map을 보면 element 자리에 currentvalue 가 있는데 둘다 현재 처리할 요소를 나타낸다.
filter()의 매개변수는 map()과 동일하다.

filter의 맞는 요소가 하나도 없다면 빈 배열을 반환 해준다.

// 5의 배수만 구해서 각 요소를 2배로 곱하는 함수

const arr = [4, 377, 1024];  // 5의 배수가 없다...
const findTest = arr.filter(function (n) {
    return n % 5 == 0;  // filter는 빈 배열을 반환
}).map(function (n) {  // map의 콜백함수는 호출되지도 않음
    return n * 2;
});

console.log(arr2); // []

filter 와 비슷한 find 메서드

findfilter와 비슷하지만, 단 1개의 요소만 반환한다.

const arr = [2, 4, 6, 8, 10]; // 4의 배수는 4, 8 2개!
const findTest = arr.find(function (n) {
    return n % 4 == 0;
});
console.log(findTest); // 4

위의 예제에서 처럼, 처음으로 만나는 테스트를 통과한 요소(4) 1개만 반환한다.
find 안의 콜백함수는 딱 2번만 호출되었다.

왜 2번만 호출될까?
처음 arr[0] 2 라는 요소에 대해 테스트를 진행하고 false 값이 나오면 그 다음 요소로 넘어간다.
그 다음 요소는 arr[1] 4 요소를 테스트 진행하고 true 값이 나오면 4를 반환하고
find 메서드는 바로 종료된다.

filter는 맞는 요소가 없으면 빈배열을 반환했지만
findundefined를 반환한다.

filter() 메서드를 이용한 배열 내의 요소 검색

let users = [
  { id: 11, name: 'ABC', age: 26, group: 'editor' },
  { id: 47, name: 'BCD', age: 33, group: 'admin' },
  { id: 85, name: 'CDE', age: 27, group: 'editor' },
  { id: 97, name: 'DEF', age: 21, group: 'admin' }
];
let res = users.filter(it => it.name.includes('BC'));

console.log(res);  

[
  {id:11, name:'ABC', age:26, group: 'editor' },
  {id:47, name:'BCD', age:33, group: 'admin' }
]

이렇게 검색을 할수있다.

0개의 댓글