В этой статье будет представлен обзор их синтаксиса, а также рассмотрены такие важные понятия, как замыкания и функции высшего порядка. Давайте погрузимся в JavaScript и исследуем мир функций.
Базовый синтаксис
Синтаксис:
function f(a, b) {
const sum = a + b;
return sum;
}
console.log(f(3, 4)); // 7
В этом примере f — это имя функции. (a, b) - это аргументы. Вы можете написать любую логику в теле и, наконец, вернуть результат. Вам разрешено return ничего, и вместо этого будет неявно возвращено undefined.
Анонимная функция
При желании вы можете исключить имя функции после ключевого слова function.
var f = function(a, b) {
const sum = a + b;
return sum;
}
console.log(f(3, 4)); // 7
Выражение немедленно вызываемой функции (IIFE)
Вы можете создать функцию и сразу же выполнить ее в Javascript.
const result = (function(a, b) {
const sum = a + b;
return sum;
})(3, 4);
console.log(result); // 7
Зачем вам писать такой код? Это дает вам возможность инкапсулировать переменную в новую область. Например, другой разработчик сразу увидит, что sum нельзя использовать нигде вне тела функции.
Функции внутри функций
Мощная особенность JavaScript заключается в том, что вы можете создавать функции внутри других функций и даже возвращать их!
function createFunction() {
function f(a, b) {
const sum = a + b;
return sum;
}
return f;
}
const f = createFunction();
console.log(f(3, 4)); // 7
В этом примере createFunction() возвращает новую функцию. Затем эту функцию можно использовать как обычно.
Функция подъема
В JavaScript есть функция, называемая подъемом, когда функцию иногда можно использовать до ее инициализации. Вы можете сделать это, только если вы объявляете функции с синтаксисом function.
function createFunction() {
return f;
function f(a, b) {
const sum = a + b;
return sum;
}
}
const f = createFunction();
console.log(f(3, 4)); // 7
В этом примере функция возвращается до ее инициализации. Хотя это допустимый синтаксис, иногда его считают плохой практикой, поскольку он может снизить читаемость.
Закрытия
Важной темой в JavaScript является концепция замыканий. Когда функция создается, она имеет доступ к ссылке на все объявленные вокруг нее переменные, также известные как ее лексическое окружение. Сочетание функции и ее окружения называется замыканием. Это мощная и часто используемая функция языка.
function createAdder(a) {
function f(b) {
const sum = a + b;
return sum;
}
return f;
}
const f = createAdder(3);
console.log(f(4)); // 7
В этом примере createAdder передает первый параметр a, и внутренняя функция имеет к нему доступ. Таким образом, createAdder служит фабрикой новых функций, причем каждая возвращаемая функция имеет разное поведение.
Синтаксис стрелки
Другой распространенный способ объявления функций — это синтаксис со стрелкой. На самом деле, во многих проектах это предпочтительный синтаксис.
Базовый синтаксис
const f = (a, b) => {
const sum = a + b;
return sum;
};
console.log(f(3, 4)); // 7
В этом примере f — это имя функции. (a, b) аргументы. Вы можете написать любую логику в теле и, наконец, вернуть result. Вам разрешено ничего не возвращать, вместо этого будет неявно возвращено undefined.
Пропустить возврат
Если вы можете написать код в одну строку, вы можете опустить ключевое слово return. Это может привести к очень короткому коду.
const f = (a, b) => a + b; console.log(f(3, 4)); // 7
Отличия
Между синтаксисом стрелок и синтаксисом функций есть 3 основных различия.
- Более минималистичный синтаксис. Это особенно актуально для анонимных функций и однострочных функций. По этой причине этот способ обычно предпочтительнее при передаче коротких анонимных функций другим функциям.
- Нет автоматического подъема. Вы можете использовать функцию только после того, как она была объявлена. Обычно это считается хорошей вещью для удобочитаемости.
- Не может быть привязан к
this,superиargumentsили использоваться в качестве конструктора. Все они сложные темы сами по себе, но основной вывод должен заключаться в том, что стрелочные функции проще по своему набору функций. Подробнее об этих различиях можно прочитать здесь.
Выбор синтаксиса стрелки или синтаксиса функции в первую очередь зависит от предпочтений и стилистических стандартов вашего проекта.
Остальные аргументы
Вы можете использовать синтаксис rest для доступа ко всем переданным аргументам в виде массива. Это не обязательно для этой задачи, но это будет критической концепцией для многих задач. Подробнее о синтаксисе ... можно прочитать здесь.
Базовый синтаксис
Синтаксис:
function f(...args) {
const sum = args[0] + args[1];
return sum;
}
console.log(f(3, 4)); // 7
В этом примере переменная args равна [3, 4].
Почему
Может быть не сразу очевидно, почему вы должны использовать этот синтаксис, потому что вы всегда можете просто передать массив и получить тот же результат.
Основной вариант использования — создание универсальных фабричных функций, которые принимают любую функцию в качестве входных данных и возвращают новую версию функции с некоторой конкретной модификацией.
Кстати, функция, которая принимает функцию и/или возвращает функцию, называется функцией высшего порядка, и они очень распространены в JavaScript.
Например, вы можете создать фабрику регистрируемых функций:
function log(inputFunction) {
return function(...args) {
console.log("Input", args);
const result = inputFunction(...args);
console.log("Output", result);
return result;
}
}
const f = log((a, b) => a + b);
f(1, 2); // Logs: Input [1, 2] Output 3
Заключение
JavaScript предоставляет несколько способов определения функций. Важно выбрать синтаксис, который наилучшим образом соответствует вашим потребностям. Базовый синтаксис, функциональные выражения и стрелочные функции являются одними из наиболее часто используемых.
