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

Изучаем функции высшего порядка в JavaScript

Nov 14, 2018 · 6 min read

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

Если вы изучаете JavaScript, то наверняка сталкивались с термином ― «Функции высшего порядка». Звучит так, как будто это нечто сложное, но это не так.

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

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

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

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

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

JavaScript, Haskell, Clojure, Scala, и Erlang — это лишь некоторые языки, в которых применяется такой способ программирования.

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

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

В JavaScript функции являются особым типом объектов. Это Function объекты. Например:

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

Несмотря на то, что это валидный код, его не рекомендуется использовать на практике. Не следует присваивать случайные свойства функциональным объектам. Для этого используйте объекты.

В JavaScript вы можете делать с функциями то же, что делаете с другими типами, такими как: объекты, строки или числа. Вы можете передавать их в качестве параметров другим функциям (обратный вызов), присваивать их переменным и передавать дальше. Поэтому функции в JavaScript называют — «Функции первого класса».

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

В JavaScript мы можем назначать функции переменным. Например:

Мы также можем передавать их. Например:

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

Мы можем передать функции в качестве параметров другим функциям. Например:

Теперь мы знаем, что такое функции первого класса. Можно приступать к «Функциям высшего порядка».

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

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

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

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

Array.prototype.map

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

Давайте посмотрим на примеры:

Пример №1

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

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

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

Мы можем записать ещё короче, используя синтаксис стрелочных функций:

Пример №2

Допустим, у нас есть массив, который содержит годы рождения разных людей. Нам нужно создать массив, в котором будет храниться их возраст. Например:

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

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

Array.prototype.filter

Давайте посмотрим примеры:

Пример №1

У нас есть массив, который содержит объекты со свойствами: имя и возраст. Нам нужно создать массив, который будет содержать только совершеннолетних (т.е. возраст больший или равный 18).

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

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

Array.prototype.reduce

Если параметр initialValue не предусмотрен, тогда accumulator будет равен первому элементу массива, а currentValue – второму.

Пример №1

Допустим, нам нужно суммировать массив чисел:

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

Мы можем задать начальное значение этой функции:

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

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

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

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

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

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

Заключение

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

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Метод Array.prototype.map

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

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

Источник

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

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

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

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

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

Принимаем функции как аргументы

Если вы много занимались web-ориентированным Javascript программированием или браузерной разработкой, вы вероятно сталкивались с функциями, которые используют функция обратного вызова(callback — прим. переводчика). Функция обратного вызова — функция, которая выполняется в конце операции, когда все остальные операции уже завершены. Как правило, функция обратного вызова передается в качестве последнего аргумента функции. Часто функцию обратного вызова определяют как анонимную функцию.

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

Такой подход очень удобен в среде веб-разработки, когда скрипт может отослать Ajax запрос на сервер, а затем обработать ответ вне зависимости от времени его получения, учета сетевых задержек и времени обработки на сервере. Node.js часто обращается к функциям обратного вызова для наиболее эффективного использования серверных мощностей. Данный подход также эффективен, когда приложений ожидает ввода данных от пользователя до начала выполнения функции.

Например, обратите внимание на сниппет простого JavaScript кода ниже, который добавляет обработчик событий к кнопке:

Данный скрипт использует анонимную функцию для отображения предупреждения. Однако, он мог с тем же успехом использовать отдельно заданную функцию и передавать эту названную функцию методу addEventListener:

Обратите внимание, что мы передали proveIt, а не proveIt() нашей функции addEventListener. Когда Вы передаете функцию по имени без круглых скобок, вы передаете объект функции. Когда же вы передаете ее с круглыми скобками, то передается результат выполнения функции.

Наша маленькая proveIt() функция is структурно независима от окружающего ее кода, всегда возвращая id эелемента на котором она сработала. Этот небольшой код может находится в любом контексте, в котором вы хотите показать предупреждение с id элемента и так же, может быть вызван любым обработчиком событий.

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

Возвращаем функции как результаты

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

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

Например, предположим, что Вам настолько надоело читать об особости миллениалов (millenials), что вы решаете заменять слово “millenials” на фразу “snake people” каждый раз, когда оно встречается в Сети. Обычно вы бы просто написали функцию, которая по вашему желанию заменяла бы один текст на другой:

Это будет работать, но только в данной конкретной ситуации. Так же вы устали слушать о бэби-бумерах (baby boomers). Вы хотите написать кастомную функцию и для них. Проблема только в том, что даже для такой простой функции вы не хотите повторять уже написанный код:

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

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

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

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

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

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

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

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

Вы уже применяете функции высшего порядка

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

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

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

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

Об авторе

М. Дэвид Грин (M. David Green)
Я работал веб-разработчиком, писателем, менеджером по коммуникациям и директором отдела маркетинга в таких компаниях, как Apple, Salon.com, StumbleUpon и Moovweb. Мое исследование “Социология в телекоммуникации”, которое я провожу в Калифорнийском университете в Беркли, а также степень магистра по бизнесу по теме “Организационное поведение”, стали достаточным основанием понять, что человек движим инстинктом общения с себе подобными, что этот инстинкт достаточно силен и работает всегда и везде, вне зависимости от среды общения.

Над переводом работали: greebn9k(Сергей Грибняк), silmarilion(Андрей Хахарев)
Singree

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

▍Метод Array.prototype.map

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

Пример №1

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

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

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

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

Пример №2

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

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

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

▍Метод Array.prototype.filter

Пример

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

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

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

▍Метод Array.prototype.reduce

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

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

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

Пример

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

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

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

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

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

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

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

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

Итоги

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

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

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

Источник