Создание функций в JavaScript

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

Есть несколько способов создания функций в JavaScript. Здесь вы узнаете о различных способах создания функций и о том, как их использовать.

Объявления функций: прямой путь

Один из способов создания функций в JavaScript — это объявления функций. Объявление функции — это функция в JavaScript, которая следует приведенному ниже синтаксису.

функцияимя_функции(параметры) {
// здесь идет код...
возвращаться"Это объявление функции";
}

Компоненты приведенного выше блока кода включают:

• функция ключевое слово: это ключевое слово объявляет функцию.
• имя_функции: Это имя функции. На практике он должен быть как можно более описательным и осмысленным, указывая на то, что делает функция.
instagram viewer
• параметры: Представляет параметры функции. Параметры — это необязательный список переменных, которые вы можете передать функции при ее вызове.
• Тело функции: содержит код, который функция будет запускать при ее вызове. Он окружен фигурными скобками {} и может содержать любой действительный код JavaScript.
• возвращаться оператор: этот оператор останавливает выполнение функции и возвращает указанное значение. В приведенном выше случае вызов функции вернет строку «Это объявление функции».

Например, объявление функции ниже принимает в качестве параметров три числа и возвращает их сумму.

функцияaddThreeNumbers(а, б, в) {
возвращаться а + б + в;
}

Чтобы вызвать объявление функции в JavaScript, напишите имя функции, за которым следует набор круглых скобок. (). Если функция принимает какие-либо параметры, передайте их в качестве аргументов в круглых скобках.

Например:

добавитьТриЧисла(1, 2, 3) // 6

Блок кода выше вызывает addThreeNumber функции и передает 1, 2 и 3 в качестве аргументов функции. Если вы запустите этот код, он вернет значение 6.

Подъемники JavaScript объявления функций, что означает, что вы можете вызывать их до того, как определите их.

Например:

Поднят (); // Функция поднята
функцияПоднят() {
консоль.бревно(«Функция поднята»);
возвращатьсяистинный;
}

Как показано в блоке кода выше, вызов Поднят перед определением это не вызовет ошибку.

Выражения функций: функции как значения

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

Они также известны как анонимные функции, поскольку у них нет имен, и вы можете вызывать их только из той переменной, которой вы их присвоили.

Ниже приведен синтаксис выражения функции:

константа имя_функции = функция () {
возвращаться«Функциональное выражение»;
};

Чтобы вызвать выражение функции в JavaScript, напишите имя переменной, которое вы присвоили функции, за которым следует набор круглых скобок. (). Если функция принимает какие-либо параметры, передайте их в качестве аргументов в круглых скобках.

Например:

ИмяФункции(); // Функциональное выражение

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

Например:

button.addEventListener("щелкнуть", функция (событие) {
консоль.бревно("Вы нажали кнопку!");
});

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

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

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

Например:

Поднят (); // ReferenceError: невозможно получить доступ к 'isHoisted' до инициализации
константа Поднят = функция () {
консоль.бревно(«Функция поднята»);
};

Функции стрелки: компактный и ограниченный

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

В отличие от других методов создания функций, стрелочные функции не требуют функция ключевое слово. Выражение стрелочной функции состоит из трех частей:

• Пара скобок (()), содержащий параметры. Скобки можно опустить, если функция имеет только один параметр.
• Стрелка (=>), который состоит из знака равенства (=) и знак больше (>).
• Пара фигурных скобок, содержащих тело функции. Вы можете опустить фигурные скобки, если функция состоит из одного выражения.

Например:

// Один параметр, неявный возврат
константа имя_функции = параметр =>консоль.бревно(«Функция стрелки с одним параметром»)
// Несколько параметров, явный возврат
константа имя_функции = (параметр_1, параметр_2) => {
возвращаться«Функция стрелки с несколькими параметрами»
};

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

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

Например:

константа фу = {
 имя: "Дэйв",
 приветствовать: функция () {
 установить время ожидания (() => {
консоль.бревно(`Здравствуйте, меня зовут ${этот.имя}`);
 }, 1000);
 },
};
foo.приветствовать(); // Записывает "Привет, меня зовут Дэйв" через 1 секунду

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

Как следует из названия, немедленно вызываемая функция (IIFE) — это функция, которая запускается, как только она определена.

Вот структура IIFE:

(функция () {
// код здесь
})();
(() => {
// код здесь
})();
(функция (параметр_1, параметр_2) {
консоль.log (параметр_1 * параметр_2);
})(2, 3);

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

Вы можете использовать IIFE для создания областей, сокрытия деталей реализации и обмена данными между несколькими сценариями. Когда-то они использовались как модульная система в JavaScript.

Создание функции разными способами

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

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