Вы узнаете, что такое функции высшего порядка и как их применять в JavaScript.
Если вы изучаете JavaScript, то наверняка сталкивались с термином ― «Функции высшего порядка». Звучит так, как будто это нечто сложное, но это не так.
Функции высшего порядка позволяют JavaScript быть пригодным для функционального программирования.
Такие функции широко используются в JavaScript. Если вы хоть немного программировали на JavaScript, то наверняка использовали их, возможно, даже не догадываясь об этом.
Чтобы в полной мере понять эту концепцию, вам следует сначала разобраться с функциональным программированием и концепцией функций первого класса.
Что такое функциональное программирование
Если говорить простыми словами, то функциональное программирование — это способ программировать, при котором вы можете передавать функции в качестве параметров другим функциям, а также возвращать их как значения. В функциональном программировании мы думаем и пишем код с точки зрения функций.
JavaScript, Haskell, Clojure, Scala, и Erlang — это лишь некоторые языки, в которых применяется такой способ программирования.
Функции первого класса
Если вы уже изучаете JavaScript, то могли слышать, что JavaScript расценивает функции как объекты первого класса. В JavaScript функции являются объектами, как и в других языках функционального программирования.
Чтобы доказать, что функции являются объектами в JavaScript, можно написать такой код:
Примечание:
Несмотря на то, что это валидный код, его не рекомендуется использовать на практике. Не следует присваивать случайные свойства функциональным объектам. Для этого используйте объекты.
В JavaScript вы можете делать с функциями то же, что делаете с другими типами, такими как: объекты, строки или числа. Вы можете передавать их в качестве параметров другим функциям (обратный вызов), присваивать их переменным и передавать дальше. Поэтому функции в JavaScript называют — «Функции первого класса».
Назначение функций переменным
В JavaScript мы можем назначать функции переменным. Например:
Передача функций в качестве параметров
Мы можем передать функции в качестве параметров другим функциям. Например:
Функции высшего порядка
Такие функции оперируют другими функциями, принимая их в качестве аргументов или возвращая их. Проще говоря, функции высшего порядка ― это такие функции, которые принимают функцию в качестве аргумента или возвращают функцию в качестве вывода.
Например, эти функции высшего порядка встроены в язык: Array.prototype.map, Array.prototype.filter и Array.prototype.reduce .
Функции высшего порядка в действии
Давайте посмотрим на несколько примеров таких функций, и сравним код с функциями высшего порядка и без них.
Array.prototype.map
Метод map() создаёт новый массив, вызывая callback-функцию, указанную в качестве аргумента, для каждого элемента входного массива. Метод map()берёт каждое возвращённое значение от callback-функции и создаёт новый массив, используя эти значения.
Callback-функция, отправленная в метод map(), принимает 3 аргумента: element, index, и array.
Давайте посмотрим на примеры:
Пример №1
Допустим, у нас есть массив из чисел. Мы хотим создать новый массив, который будет содержать удвоенные значения первого. Давайте посмотрим, как мы можем решить эту задачу с помощью функции высшего порядка и без неё.
Мы можем записать ещё короче, используя синтаксис стрелочных функций:
Пример №2
Допустим, у нас есть массив, который содержит годы рождения разных людей. Нам нужно создать массив, в котором будет храниться их возраст. Например:
Array.prototype.filter
Метод filter() создаёт новый массив из элементов, которые прошли тест предусмотренный callback-функцией. Эта функция, отправленная методу filter(), принимает 3 аргумента element, index, и array.
Давайте посмотрим примеры:
Пример №1
У нас есть массив, который содержит объекты со свойствами: имя и возраст. Нам нужно создать массив, который будет содержать только совершеннолетних (т.е. возраст больший или равный 18).
Без функции высшего порядка
Array.prototype.reduce
Метод reduce выполняет callback-функцию для каждого элемента вызываемого массива, что в результате приводит к одному выходному значению. Метод reduce принимает два параметра: 1) reducer-функцию (callback), 2) и опционально initialValue.
Reducer-функция (callback) принимает 4 параметра: accumulator, currentValue, currentIndex, sourceArray.
Если параметр initialValue предусмотрен, тогда accumulator будет равен initialValue , а currentValue равен первому элементу в массиве.
Если параметр initialValue не предусмотрен, тогда accumulator будет равен первому элементу массива, а currentValue – второму.
Пример №1
Допустим, нам нужно суммировать массив чисел:
С функцией высшего порядка reduce
Reducer-функция вызывается для каждого элемента массива, а результат возвращённый reducer хранится в accumulator . В currentValue содержится текущее значение массива. Конечный результат хранится в переменной sum .
Мы можем задать начальное значение этой функции:
Без функции высшего порядка
Обратите внимание, как использование функции высшего порядка сделало наш код чище, лаконичнее и менее многословным.
Создание собственной функции высшего порядка
До этого мы рассматривали функции высшего порядка, встроенные в язык. Теперь давайте сами создадим такую функцию.
Представьте, что в JavaScript нет встроенного метода map. Мы можем самостоятельно написать его, создав функцию высшего порядка.
Допустим, у нас есть строчный массив, и мы хотим конвертировать его в массив integer, в котором каждый элемент представляет длину строки из оригинального массива.
В примере выше, мы создали функцию высшего порядка mapForEach , которая принимает массив и callback-функцию fn. Эта функция циклично перебирает данный массив и вызывает callback-функцию fn внутри функции newArray.push для каждой итерации.
Callback-функция fn принимает текущий элемент массива и возвращает длину текущего элемента, который хранится в newArray . После завершения цикла For, newArray возвращает значение в lenArray .
Заключение
Мы узнали, что такое функции высшего порядка и разобрали несколько из них, уже встроенных в язык. А также научились создавать их самостоятельно.
Не углубляясь в детали, о функциях высшего порядка можно сказать так: это функции, которые могут принимать функцию в качестве аргумента и даже, возвращать функцию. Такие функции похожи на обычные функции, но с дополнительной способностью ― получать и возвращать другие функции в качестве аргументов и вывода.
Читайте нас в телеграмме и vk
Перевод статьи Sukhjinder Arora : Understanding Higher-Order Functions in JavaScript
