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

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

@serverSerrverlesskiy

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

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

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

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

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

First_class

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

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

Higher

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

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

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

Edit_number

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

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

Math

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

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

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

Check

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

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

Create

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

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

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

callback

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

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

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

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

Заключение#

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

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

Проблемы?#

Problem

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

Вопросы:#

Question

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

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

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

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

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

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

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

Sumerian school

Ссылки:#

  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

🖋 🐛 🎨

Become a Patron!