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); // []
find
는 filter
와 비슷하지만, 단 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
는 맞는 요소가 없으면 빈배열을 반환했지만
find
는 undefined
를 반환한다.
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' }
]
이렇게 검색을 할수있다.