Хабрахабр

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

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

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

Для того, чтобы в полной мере понять эту концепцию, вам сначала надо разобраться с понятием функционального программирования (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) 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, используется в команде newArray.push() и попадает в массив, который возвратит функция mapForEach(). Коллбэк fn принимает текущий строковый элемент массива и возвращает длину этого элемента. Этот массив, в итоге, будет записан в константу lenArray.

Итоги

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

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

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

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть