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

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

Итак, начнем с создания функции. Есть 2 способа сделать это:

  • Объявление именованной функции
  • Выражение функции

Объявление именованной функции

Чтобы определить функцию, вам нужно ключевое слово function вместе со следующими вещами:

  • name – название вашей функции (должно быть кратким и описательным).
  • parameters - входные переменные для вашей функции
  • body - логика/функциональность вашей функции с возвращаемым значением
//       name         parameter
//        👇🏽              👇🏽
function getFood(food, quantity) {
  const yourFood = food.repeat(quantity); // 👈🏽 logic
  return yourFood; // 👈🏽 return value
}

Если значение return не задано, будет возвращено undefined.

Звонок и обращение

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

getFood("🥪", 3); // 👈🏽 calling
getFood; // 👈🏽 reference

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

Параметры и аргументы

  • Параметры – это имена переменных, которые вы используете в определении функции.
  • Аргументы — это значения/выражения, являющиеся фактическими значениями, передаваемыми в качестве входных данных при вызове функции.

Выражение функции

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

//  variable
//  👇🏽
var getFood = function(food, quantity) {
  const yourFood = food.repeat(quantity);
  return yourFood;
};

console.log(getFood("🥪", 3));

Здесь переменная getFood содержит анонимную функцию.

Объявление функции имени и выражение функции

Функции, созданные с помощью объявления функции, поднимаются, тогда как функциональные выражения — нет. Какой 🏆 использовать? Использование объявления именованной функции имеет много преимуществ:

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

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

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

Только одно место, где вы должны использовать arrow functions, это когда вам нужно их лексическое поведение.

Приведенное ниже сравнение показывает, какой способ создания функции следует использовать:

Стрелочные функции

Лаконичный и «элегантный» способ написания функций в современном JavaScript. Преобразование обычной функции в функцию стрелки:

// Regular function
function getFood(food, quantity) {
  return food.repeat(quantity);
}

// Arrow function
const getFood = (food, quantity) => {
    return food.repeat(quantity);
};

// Directly returning
const getFood = (food, quantity) => food.repeat(quantity);

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

const breakfast = () => ({
  food: "🥪",
  quantity: 3,
});

Именно эта лаконичность делает стрелочные функции такими 💪🏽 мощными.

  • Он неявно вернет значение, если вы опустите фигурные скобки {}
  • Это всегда выражение, и поэтому его нельзя поднять
  • 🔥 У него нет собственного this контекста, как у обычных функций

Чистые функции

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

Что такое побочные эффекты? Операции функции, использующие ИЛИ, изменяют нелокальные состояния. Это делает функцию недетерминированной. console.log является побочным эффектом, потому что он выводит вывод в консоли, то есть вне функции.

Пример нечистой функции:

let x = 0;

const impure = (x) => {
  x = x + 1; // side-effect
  console.log(x); // side-effect
  return x;
};

Пример чистой функции:

const pure = (x) => x * 2;

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

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

В JavaScript функции являются гражданами первого класса. Это значит, что:

  • их можно 🔄 передавать и использовать в качестве аргументов для других функций
  • они могут быть возвращены из других функций
  • они могут быть назначены переменным

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

// Assigning a function to a variable
const milkshakeIngredients = () => ({ mango: "🥭", milk: "🥛" });

const getFood = (callback) => {
  const ingredients = callback();
  console.log(ingredients);

  return () => ({ status: "Mango milkshake is ready" }); // returning a function
};

// Passing function as an argument
const result = getFood(milkshakeIngredients);

console.log(result()); // calling the returned function's reference

Что дальше?

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