Фильтрация (filter) / JS: Знакомство с функциями

Следующая операция называется "фильтрация" и выполняется она в JavaScript с помощью метода filter (в некоторых языках её ещё называют select). Понятие "фильтрация" интуитивно понятно каждому человеку. Мы пьём фильтрованную воду и фильтруем то, что говорим. В программировании практически тоже самое. Операция "фильтрация" по отношению к коллекции означает, что мы удаляем из неё нежелательные элементы. Возьмём наших многострадальных пользователей. Типичная задача может выглядеть так — выберем пользователей старше 10 лет:

const users = [
  { name: 'Igor', age: 19 },
  { name: 'Danil', age: 1 },
  { name: 'Vovan', age: 4 },
  { name: 'Matvey', age: 16 },
];

const result = [];
for (user of users) {
  if (user.age > 10) {
    result.push(user);
  }
}

console.log(result);
// => [ { name: 'Igor', age: 19 }, { name: 'Matvey', age: 16 } ]

Фильтрация встречается так же часто как отображение, а возможно и чаще. Общая схема кода при фильтрации практически один в один как и в отображении, кроме пары ключевых моментов:

Фильтрация возвращает коллекцию либо того же размера (если ничего не было отфильтровано), либо меньшего. Она может вернуть даже пустую коллекцию, если ни один из элементов не подошёл.
Фильтрация всегда возвращает исходные элементы. Она никогда не делает отображение. Если на вход фильтрации поступил список пользователей, то список пользователей будет и на выходе.

Теперь посмотрим, как выглядит фильтрация при использовании функции высшего порядка filter:

const filteredUsers = users.filter((user) => user.age > 10);
// вариант с дестракчерингом параметра:
// const filteredUsers = users.filter(({ age }) => age > 10);

Callback-функция, передаваемая в filter, должна быть предикатом. То есть её задача вернуть либо true, либо false для каждого элемента коллекции. Значение, которое возвращается, никак не используется — оно всего лишь говорит о том, включать ли текущий элемент в итоговый массив или нет. Новички часто делают ошибку на этом этапе и начинают возвращать из фильтра то, что они бы хотели увидеть в результирующем массиве (для этого надо применять map).

Реализация

Напишем свою собственную функцию, реализующую операцию фильтрации:

const myFilter = (callback, collection) => {
  const result = [];
  for (item of collection) {
    // Предикат используется только для проверки
    // Внутрь callback по очереди передается каждый элемент коллекции collection
    if (callback(item)) {
      // В результат всегда добавляется элемент исходной коллекции
      result.push(item);
    }
  }

  return result;
}

Дополнительные материалы

Метод filter