मुख्य कंटेंट तक स्किप करें

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

@serverSerrverlesskiy

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

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

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

Функциона́льное программи́рование — раздел дискретной математики и парадигма программирования, в которой процесс вычисления трактуется как вычисление значений функций в математическом понимании последних (в отличие от функций как подпрограмм в процедурном программировании). [Wikipedia]

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

First_class

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

लाइव एडिटर
परिणाम
Loading...

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

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

Higher

Это такие функции⚙️, которые принимают функцию⚙️ в качестве аргумента или возвращают функцию⚙️ в качестве вывода.

Например, эти функции⚙️ высшего порядка встроены в язык : map() filter() и reduce()

Пример №1. Изменяем числа .push

Edit_number

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

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

लाइव एडिटर
परिणाम
Loading...

С функцией⚙️ высшего порядка map консольный вариант:

लाइव एडिटर
परिणाम
Loading...

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

लाइव एडिटर
परिणाम
Loading...

Пример №2. Вычисляемые значения .map

Math

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

Например: без функции⚙️ высшего порядка (классика - через цикл for( ) и push( ))

लाइव एडिटर
परिणाम
Loading...

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

लाइव एडिटर
परिणाम
Loading...

Перепрошиваем новый массив за одну строчку кода .

Пример №3. С проверкой условия .filter()

Check

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

Без функции высшего порядка (классика - через цикл for( ) и push( ) ):

लाइव एडिटर
परिणाम
Loading...

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

लाइव एडिटर
परिणाम
Loading...

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

Create

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

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

लाइव एडिटर
परिणाम
Loading...

В примере выше, мы создали свою функцию высшего порядка mapFor(), которая принимает массив arr и callback-функцию fn. Эта функция циклично перебирает данный массив и вызывает callback-функцию fn внутри функции newArray.push() для каждой итерации, расчитывая количество символов в словах массива, алгоритм расчета которой описан в виде 2-й переменной .

callback

Функция⚙️ обратного вызова (callback) — это функция⚙️, переданная в другую функцию⚙️ в качестве аргумента, которая затем вызывается по завершению какого-либо действия.

Callback-функция⚙️ fn принимает текущий элемент массива и возвращает длину текущего элемента, который теперь хранится в newArray. После завершения цикла For(), newArray возвращает значение длины элементов в lenArray.

Помните, любой сколь угодно малый алгоритм состоит из 3-х этапов:

  • 1 этап - Инициализация переменных и функций
  • 2 этап - Функция высшего порядка (логика)
  • 3 этап - Вывод ответа.

Заключение

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

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

EnglishMoji!

Проблемы?

Problem

Пишите в Telegram или ВКонтакте, а также подписывайтесь на наши новости

Вопросы:

Question

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

  1. Объекты первого класса
  2. Объекты пятого класса
  3. Объекты высшего класса

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

  1. Принимает функцию в качестве аргумента или возвращает функцию в качестве вывода
  2. Только принимает функцию в качестве аргумента
  3. Только возвращает функцию в качестве вывода

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

  1. Нереально создать самому
  2. Можно использовать только через встроенный метод
  3. Можно самостоятельно создать самому

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

EnglishMoji!

Ссылки:

  1. Изучаем функции высшего порядка в JavaScript
  2. Статья "Функции высшего порядка в JavaScript"
  3. Выразительный Javascript. Статья "Функции высшего порядка"
  4. Код для подростков: прекрасное руководство по программированию для начинающих, том 1: Javascript - Jeremy Moritz

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Dmitriy K.


Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨