Функции высшего порядка в JavaScript

Если вы занимаетесь изучением JavaScript, то вы, наверняка, сталкивались с понятием «функция высшего порядка» (Higher-Order Function). Может показаться, что это что-то очень сложное, но, на самом деле, это не так.

JavaScript подходит для функционального программирования благодаря тому, что он поддерживает концепцию функций высшего порядка. Такие функции широко используются в языке, и если вы программировали на JS, то вы, вероятно, уже с ними работали, даже не зная об этом.



Для того, чтобы в полной мере понять эту концепцию, вам сначала надо разобраться с понятием функционального программирования (Functional Programming) и с тем, что такое функции первого класса (First-Class Functions).

Материал, перевод которого мы публикуем, предназначен для начинающих, он направлен на объяснение концепции функций высшего порядка, и на демонстрацию того, как пользоваться ими в JavaScript.

Что такое функциональное программирование?

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

Среди языков, поддерживающих функциональное программирование, можно отметить JavaScript, Haskell, Clojure, Scala и Erlang.

Функции первого класса

Если вы изучаете JavaScript, вы могли слышать, что в языке функции рассматриваются как объекты первого класса. Это так из-за того, что в JavaScript, как и в других языках, поддерживающих функциональное программирование, функции являются объектами.

В частности, в JS функции представлены в виде объектов особого типа — это объекты типа Function. Рассмотрим пример:

function greeting() {
  console.log('Hello World');
}
// Вызов функции
greeting();  // выводит 'Hello World'

Для того чтобы доказать, что функции в JavaScript являются объектами, мы можем сделать следующее, продолжая предыдущий пример:

// К функции можно добавлять свойства, как и к любым другим объектам
greeting.lang = 'English';
// Выводит 'English'
console.log(greeting.lang);

Обратите внимание на то, что хотя добавление собственных свойств к стандартным объектам в JavaScript не вызывает сообщений об ошибках, делать так не рекомендуется. Не стоит добавлять собственные свойства к функциям. Если вам надо хранить что-то в объекте — лучше создайте для этого специальный объект.

В JavaScript с функциями можно делать то же самое, что можно делать с сущностями других типов, таких, как Object, String, Number. Функции можно передавать как параметры другим функциям. Такие функции, переданные другим, обычно выступают в роли функций обратного вызова (коллбэков). Функции можно назначать переменным, хранить их в массивах, и так далее. Именно поэтому функции в JS — это объекты первого класса.

Назначение функций переменным и константам

Функции можно назначать переменным и константам:

const square = function(x) {
  return x * x;
}
// выводит  25
square(5);

Функции, назначенные переменным или константам, можно назначать другим переменным или константам:

const foo = square;
// выводит 36
foo(6);

Передача функций в виде параметров

Функции можно передавать в виде параметров для других функций:

function formalGreeting() {
  console.log("How are you?");
}
function casualGreeting() {
  console.log("What's up?");
}
function greet(type, greetFormal, greetCasual) {
  if(type === 'formal') {
    greetFormal();
  } else if(type === 'casual') {
    greetCasual();
  }
}
// выводит 'What's up?'
greet('casual', formalGreeting, casualGreeting);

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

Функции высшего порядка

Функции высшего порядка — это функции, которые работают с другими функциями, либо принимая их в виде параметров, либо возвращая их. Проще говоря, функцией высшего порядка называется такая функция, которая принимает функцию как аргумент или возвращает функцию в виде выходного значения.

Например, встроенные функции JavaScript Array.prototype.map, Array.prototype.filter и Array.prototype.reduce являются функциями высшего порядка.

Функции высшего порядка в действии

Рассмотрим примеры использования встроенных в JS функций высшего порядка и сравним такой подход с выполнением аналогичных действий без использования таких функций.

▍Метод Array.prototype.map

Метод map() создаёт новый массив, вызывая, для обработки каждого элемента входного массива, коллбэк, переданный ему в виде аргумента. Этот метод берёт каждое возвращённое коллбэком значение и помещает его в выходной массив.

Функция обратного вызова, передаваемая map(), принимает три аргумента: element (элемент), index (индекс) и array (массив). Рассмотрим примеры.

Пример №1

Предположим, у нас имеется массив чисел, и мы хотим создать новый массив, который содержит результаты умножения этих чисел на 2. Рассмотрим способы решения этой задачи с использованием функций высшего порядка и без них.

Решение задачи без использования функций высшего порядка

const arr1 = [1, 2, 3];
const arr2 = [];
for(let i = 0; i < arr1.length; i++) {
  arr2.push(arr1[i] * 2);
}
// выводит [ 2, 4, 6 ]
console.log(arr2);

Решение задачи с помощью функции высшего порядка map

const arr1 = [1, 2, 3];
const arr2 = arr1.map(function(item) {
  return item * 2;
});
console.log(arr2);

Объём этого кода можно даже сократить, если воспользоваться стрелочной функцией:

const arr1 = [1, 2, 3];
const arr2 = arr1.map(item => item * 2);
console.log(arr2);

Пример №2

Предположим, у нас имеется массив, содержащий год рождения неких людей, и нам надо создать массив, в который попадёт их возраст в 2018 году. Рассмотрим, как и прежде, решение этой задачи в двух вариантах.

Решение задачи без использования функций высшего порядка

const birthYear = [1975, 1997, 2002, 1995, 1985];
const ages = [];
for(let i = 0; i < birthYear.length; i++) {
  let age = 2018 - birthYear[i];
  ages.push(age);
}
// выводит [ 43, 21, 16, 23, 33 ]
console.log(ages);

Решение задачи с помощью функции высшего порядка map

const birthYear = [1975, 1997, 2002, 1995, 1985];
const ages = birthYear.map(year => 2018 - year);
// выводит [ 43, 21, 16, 23, 33 ]
console.log(ages);

▍Метод Array.prototype.filter

Метод filter() создаёт, на основе массива, новый массив, в которой попадают элементы исходного массива, соответствующие условию, заданному в переданной этому методу функции обратного вызова. Эта функция принимает, как и в случае с методом map(), 3 аргумента: element, index и array.

Рассмотрим пример, построенный по той же схеме, что и при рассмотрении метода map().

Пример

Предположим, у нас имеется массив, содержащий объекты, в свойствах которых хранятся сведения об имени и возрасте представителей некой группы людей. Нам надо создать массив, в котором будут сведения только о совершеннолетних представителях этой группы (тех, чей возраст достиг 18 лет).

Решение задачи без использования функций высшего порядка

const persons = [
  { name: 'Peter', age: 16 },
  { name: 'Mark', age: 18 },
  { name: 'John', age: 27 },
  { name: 'Jane', age: 14 },
  { name: 'Tony', age: 24},
];
const fullAge = [];
for(let i = 0; i < persons.length; i++) {
  if(persons[i].age >= 18) {
    fullAge.push(persons[i]);
  }
}
console.log(fullAge);

Решение задачи с помощью функции высшего порядка filter

const persons = [
  { name: 'Peter', age: 16 },
  { name: 'Mark', age: 18 },
  { name: 'John', age: 27 },
  { name: 'Jane', age: 14 },
  { name: 'Tony', age: 24},
];
const fullAge = persons.filter(person => person.age >= 18);
console.log(fullAge);

▍Метод Array.prototype.reduce

Метод reduce() обрабатывает каждый элемент массива с помощью коллбэка и помещает результат в единственное выходное значение. Этот метод принимает два параметра: коллбэк и необязательное начальное значение (initialValue).

Коллбэк принимает четыре параметра: accumulator (аккумулятор), currentValue (текущее значение), currentIndex (текущий индекс), sourceArray (исходный массив).

Если методу предоставлен параметр initialValue, то, в начале работы метода, accumulator будет равен этому значению, а в currentValue будет записан первый элемент обрабатываемого массива.

Если параметр initialValue методу не предоставлен, то в accumulator будет записан первый элемент массива, а в currentValue — второй.

Пример

Предположим, у нас есть массив чисел. Нам надо посчитать сумму его элементов.

Решение задачи без использования функций высшего порядка

const arr = [5, 7, 1, 8, 4];
let sum = 0;
for(let i = 0; i < arr.length; i++) {
  sum = sum + arr[i];
}
// выводит 25
console.log(sum);

Решение задачи с помощью функции высшего порядка reduce

Сначала рассмотрим использование метода reduce() без предоставления ему начального значения.

const arr = [5, 7, 1, 8, 4];
const sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
});
// выводит 25
console.log(sum);

Каждый раз, когда коллбэк вызывается с передачей ему currentValue, то есть — очередного элемента массива, его параметр accumulator оказывается содержащим результаты предыдущей операции, то есть того, что было возвращено из функции на предыдущей итерации. После завершения работы этого метода итоговый результат попадает в константу sum.

Теперь посмотрим на то, как будет выглядеть решение задачи в том случае, если передать начальное значение в метод reduce().

const arr = [5, 7, 1, 8, 4];
const sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 10);
// выводит 35
console.log(sum);

Как видите, использование функции высшего порядка сделало наш код чище, лаконичнее и легче для восприятия.

Создание собственных функций высшего порядка

До сих пор мы работали с функциями высшего порядка, встроенными в JS. Теперь давайте создадим нашу собственную функцию, работающую с другими функциями.

Представим, что в JavaScript нет стандартного метода массивов map(). Подобный метод мы вполне можем создать самостоятельно, что будет выражаться в разработке функции высшего порядка.

Пусть у нас имеется массив строк, и мы хотели бы создать на его основе массив с числами, каждое из которых представляет собой длину строки, хранящейся в некоем элементе исходного массива.

const strArray = ['JavaScript', 'Python', 'PHP', 'Java', 'C'];

function mapForEach(arr, fn) {
  const newArray = [];
  for(let i = 0; i < arr.length; i++) {
    newArray.push(
      fn(arr[i])
    );
  }
  return newArray;
}
const lenArray = mapForEach(strArray, function(item) {
  return item.length;
});
// выводит [ 10, 6, 3, 4, 1 ]
console.log(lenArray);

В этом примере мы создали функцию высшего порядка mapForEach, которая принимает массив и функцию обратного вызова fn. Функция mapForEach проходится по массиву в цикле и вызывает коллбэк fn на каждой итерации этого цикла.

Коллбэк fn принимает текущий строковый элемент массива и возвращает длину этого элемента. То, что возвращает функция fn, используется в команде newArray.push() и попадает в массив, который возвратит функция mapForEach(). Этот массив, в итоге, будет записан в константу lenArray.

Итоги

В этом материале мы поговорили о функциях высшего порядка и исследовали некоторые встроенные функции JavaScript. Кроме того, мы разобрались с тем, как создавать собственные функции высшего порядка.

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

Уважаемые читатели! Приходится ли вам писать собственные функции высшего порядка?