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

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

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

Видео

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

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

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

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

Интерактивный редактор

function learnJavaScript() { let greeting = () => 'Hello, World !' return greeting() }

function learnJavaScript() {
  let greeting = () => 'Hello, World !'

  return greeting()
}

Результат

Loading...

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

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

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

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

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

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

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

Интерактивный редактор

function learnJavaScript() { const arr1 = [1, 2, 3, 4] const arr2 = [] for (let i = 0; i < arr1.length; i++) { arr2.push(arr1[i] * 2) // массив arr2 растет в цикле } return arr2 // 2, 4, 6, 8 только без пробелов }

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4]
  const arr2 = []

  for (let i = 0; i < arr1.length; i++) {
    arr2.push(arr1[i] * 2) // массив arr2 растет в цикле
  }

  return arr2 // 2, 4, 6, 8 только без пробелов
}

Результат

Loading...

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

Интерактивный редактор

function learnJavaScript() { const arr1 = [1, 2, 3, 4] const arr2 = arr1.map(function (item) { // Старый вариант return item * 2 + ' ' }) return arr2 }

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4]
  const arr2 = arr1.map(function (item) {
    // Старый вариант
    return item * 2 + ' '
  })
  return arr2
}

Результат

Loading...

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

Интерактивный редактор

function learnJavaScript() { const arr1 = [1, 2, 3, 4, 5] const multTwo = item => item * 2 + ' ' const arr2 = arr1.map(multTwo) // Алгоритм в 1 строку return arr2 }

function learnJavaScript() {
  const arr1 = [1, 2, 3, 4, 5]
  const multTwo = item => item * 2 + ' '

  const arr2 = arr1.map(multTwo) // Алгоритм в 1 строку

  return arr2
}

Результат

Loading...

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

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

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

Интерактивный редактор

function learnJavaScript() { const birthYear = [1975, 1997, 2002, 1995, 1985] const ages = [] for (let i = 0; i < birthYear.length; i++) { let ageNew = 2020 - birthYear[i] + ' ' // Текущее значение нового массива ages.push(ageNew) // заносим новое значение в массив ages[] } return ages // [ 45, 23, 18, 25, 35 ] только без пробелов }

function learnJavaScript() {
  const birthYear = [1975, 1997, 2002, 1995, 1985]
  const ages = []
  for (let i = 0; i < birthYear.length; i++) {
    let ageNew = 2020 - birthYear[i] + ' ' // Текущее значение нового массива
    ages.push(ageNew) // заносим новое значение в массив ages[]
  }

  return ages // [ 45, 23, 18, 25, 35 ] только без пробелов
}

Результат

Loading...

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

Интерактивный редактор

function learnJavaScript() { const birthYear = [1975, 1997, 2002, 1995, 1985] let ages = birthYear.map(year => 2020 - year + ' ') // Алгоритм в 1 строку через стрелочную функцию return ages // [ 45, 23, 18, 25, 35 ] }

function learnJavaScript() {
  const birthYear = [1975, 1997, 2002, 1995, 1985]
  let ages = birthYear.map(year => 2020 - year + ' ') // Алгоритм в 1 строку через стрелочную функцию
  return ages // [ 45, 23, 18, 25, 35 ]
}

Результат

Loading...

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

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

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

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

Интерактивный редактор

function learnJavaScript() { const persons = [ { name: 'Niki', 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]) } } return fullAge.length // кол-во лиц старше 18 лет }

function learnJavaScript() {
  const persons = [
    { name: 'Niki', 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])
    }
  }

  return fullAge.length // кол-во лиц старше 18 лет
}

Результат

Loading...

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

Интерактивный редактор

function learnJavaScript() { const persons = [ { name: 'Niki', age: 34 }, { name: 'Mark', age: 18 }, { name: 'John', age: 27 }, { name: 'Jane', age: 14 }, { name: 'Tony', age: 24 } ] const fullAge = persons.filter(person => person.age >= 18) // Алгоритм с условием в 1 строку return fullAge.length // кол-во лиц старше 18 лет }

function learnJavaScript() {
  const persons = [
    { name: 'Niki', age: 34 },
    { name: 'Mark', age: 18 },
    { name: 'John', age: 27 },
    { name: 'Jane', age: 14 },
    { name: 'Tony', age: 24 }
  ]
  const fullAge = persons.filter(person => person.age >= 18) // Алгоритм с условием в 1 строку

  return fullAge.length // кол-во лиц старше 18 лет
}

Результат

Loading...

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

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

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

Интерактивный редактор

function learnJavaScript() { // Исходный массив const strArray = ['English', 'JavaScript', 'React', 'TypeScript', 'AWS'] // функция высшего порядка mapForEach() принимает к себе формальную (гипотетическую) функцию fn и формальный массив arr let mapFor = (arr, fn) => { const newArray = [] for (let i = 0; i < arr.length; i++) { newArray.push(fn(arr[i])) // Применяем к каждому элементу скрытую функцию fn() } return newArray // Возвращем новый массив } // Основной код преобразования - mapForEach() вызывается с конкретными значениями-параметрами const lenArray = mapFor(strArray, item => item.length + ' ') return 'Длина слов: ' + lenArray // [ 7, 10, 5, 10, 3 ] }

function learnJavaScript() {
  // Исходный массив
  const strArray = ['English', 'JavaScript', 'React', 'TypeScript', 'AWS']
  // функция высшего порядка mapForEach() принимает к себе формальную (гипотетическую) функцию fn и формальный массив arr
  let mapFor = (arr, fn) => {
    const newArray = []
    for (let i = 0; i < arr.length; i++) {
      newArray.push(fn(arr[i])) // Применяем к каждому элементу скрытую функцию fn()
    }
    return newArray // Возвращем новый массив
  }
  // Основной код преобразования - mapForEach() вызывается с конкретными значениями-параметрами
  const lenArray = mapFor(strArray, item => item.length + ' ')

  return 'Длина слов: ' + lenArray // [ 7, 10, 5, 10, 3 ]
}

Результат

Loading...

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

callback

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

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

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

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

Заключение

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

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

Проблемы?

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

Вопросы:

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

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

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

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

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

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

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

Ссылки:

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 🖋 🐛 🎨