고차함수(2) - Array.prototype.filter

filter 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출하고, 콜백함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다. (원본 배열은 변경되지 X)

 

const numbers = [1, 2, 3, 4, 5];
const odds = numbers.filter(item => item % 2);
console.log(odds); // [1, 3, 5]

 

forEach vs map vs filter

forEach 메서드: 언제나 undefined를 반환,

map 메서드: 콜백함수의 반환값들로 구성된 새로운 배열을 반환,

filter 메서드: 콜백 함수의 반환값이 true인 요소만 추출한 새로운 배열을 반환

 

arr.filter(callback(element[, index[, array]])[, thisArg])

매개변수: callback함수 / element, index(선택), array(선택), thisArg(선택)

 

예시

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * 검색 조건에 따른 배열 필터링(쿼리)
 */
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

화살표 함수를 사용하여 filter 메서드를 사용 가능하다.

 

filter 메서드는 자신을 호출한 배열에서 특정 요소를 제거하기 위해 사용할 수 도 있다

const todos = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.todo]
    case DELETE_TODO:
      const deleteTodo = state.filter((todo) =>
        todo.id !== action.id
      )
      return deleteTodo
    case DONE_TODO:
      const doneTodo = state.map((todo) =>
        todo.id === action.id ? { ...todo, isDone: !todo.isDone } : todo
      )
      return doneTodo;
    default:
      return state;
  }
}

 

 

<출처>

https://ifpb.github.io/javascript-guide/ecma/array/object.html

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

https://ko.javascript.info/array-methods

https://poiemaweb.com/js-array-higher-order-function