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

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

Нет, не такого рода HOF. Убирайся с дороги!

Краткий обзор функций

Надеюсь, ваше учебное путешествие привело вас к тому моменту, когда вы поймете, что такое функции и как они работают. Давайте посмотрим на простую функцию:

function double (n) {
 return n * 2;
 }
console.log(double(3));

Мы помещаем число 3 в нашу функцию в качестве аргумента и в результате получаем 6. Хороший.

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

После большого накопления вы ожидаете каких-то сумасшедших объяснений и искажающих мозг знаний. Что ж, на самом деле HOF не такие противные, как вы думаете.

HOF - это просто функция, которая выполняет одно из следующих действий:

1. Возвращает функцию

2. Принимает функцию в качестве аргумента.

3. Выполняются ли оба вышеперечисленных

Вот и все. Я знаю, твой разум взорван и твоя жизнь бесконечно изменилась к лучшему!

N.B. Теперь вы можете подумать, что это означает, что такие функции, как setTimeout или addEventListener, являются HOF! И ты был бы прав. Они принимают функции в качестве аргументов и, следовательно, являются HOF!

Давайте ознакомимся с другими примерами.

1. Возвращает функцию

Если функция возвращает другую функцию, тогда у нас есть HOF!

function getAFunction () { 
  return function () { 
    console.log(‘Whoop!’);
  }
}
var party = getAFunction();
party(); // console logs ‘Whoop’

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

getAFunction () { 
  var inner = function () { 
    console.log(‘Whoop!’); 
  } 
  return inner;
}
var party = getAFunction();
party(); // console logs ‘Whoop’

Опять же, эта функция возвращает функцию и, следовательно, является HOF, yeehaa!

2. Использует функцию как аргумент

Другой способ, которым функция может быть HOF, - это если она принимает функцию в качестве аргумента.

function sayHello () { 
  return ‘Hello’
}
function callArgument (func) { 
  return func();
}
callArgument(sayHello) // => this will return ‘Hello’

As we can see from the above, callArgument takes a function as an argument and returns the result of invoking that function. This, my friend, is a HOF.

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

3. И то, и другое

И затем есть самый мощный из всех HOF (технически они все равны, но вы понимаете, о чем я ...), функция, которая не только принимает функцию в качестве аргумента, но и возвращает ее.

function sayHello () { 
  console.log(‘Hello’);
}
function mimic (func) { 
  return function () { 
    return func(); 
  }
}
var sayHelloCopy = mimic(sayHello);
sayHello(); // console logs ‘hello’
sayHelloCopy(); // console logs ‘hello'

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

Это немного сложнее, но давайте разберемся с этим.

  1. Функция mimic принимает в качестве аргумента функцию sayHello.
  2. Он возвращает функцию и сохраняет ее в переменной sayHelloCopy.
  3. sayHelloCopy при вызове вызывает функцию sayHello и возвращает результат. Это создает две функции, которые будут делать одно и то же, хотя sayHelloCopy имеет (довольно бессмысленную) оболочку вокруг нее.

Вот мы и покефаны, всех поймали!

Важное примечание о передаче или возврате функций

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

Давайте взглянем на это на мгновение:

function makeCupcake () { 
  return ‘A delicious cupcake’; 
} 
var cake1 = makeCupcake();

В данном случае makeCupcake - это мой рецепт, а cake1 - мой кекс (мой результат). Если я хочу передать функцию или вернуть функцию, я хочу передать рецепт, а НЕ результат. Вот почему мы только передаем функцию, не выполняя ее, т.е.

makeCupcake, а не makeCupcake().

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

function logger (item) { 
  console.log(item); 
}

Если я вызову makeCupcake при передаче, мы запишем в журнал следующее:

logger(makeCupcake()); // 'A delicious cupcake'

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

logger(makeCupcake) // ‘function makeCupcake () { return ‘A delicious cupcake’; }’

Теперь мы видим, что передается фактическая функция!

Подведение итогов

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

Далее идет Array.foreach(func), который, если вы не осознавали, тоже является HOF! Я призываю вас взглянуть на него и понять, почему это HOF, а также попытаться создать небольшие функции, которые либо принимают функции как аргументы, либо возвращают функции как аргументы. Следите за обновлениями, кузнечики!

P.s. Вы могли заметить, что сегодня я испытывал легкую ностальгию по своему детству.

— -

Дэрил Карр - Репетитор @ Northcoders

Первоначально опубликовано на blog.northcoders.com.