Немедленно вызываемые функциональные выражения, также известные как IIFE (произносится как iify), представляют собой функции, которые вызываются или запускаются, как только они определены. После их вызова они больше не вызываются.

Разработчикам часто трудно понять эту концепцию. Сегодня в этом посте мы попробуем разобраться в нем упрощенно.

Итак, давайте начнем эту поездку. Давайте сначала разберемся, что означает IIFE — янемедленно явызвал Function Eвыражение.

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

// Section One 
function myName(name) {
return name;
}

Это простая функция с именем myName().

Теперь следующий термин, который мы должны отметить, — это Function Expression. Давайте посмотрим, как приведенную выше функцию можно преобразовать в функциональное выражение.

// Section Two
let myName = function (name) {
return name;
};

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

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

Section 3
("ABC")

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

Хорошо, вам должно быть интересно, что сейчас мы видим только несколько случайных блоков, но где именно находится наш IIFE. Почти готово 😏

Теперь давайте перепишем раздел 3, в котором вместо строки мы будем передавать нашу анонимную функцию из раздела 2.

(function (name) {
return name;
});

Теперь приведенный выше блок кода также является функциональным выражением.

Но как нам вызвать это функциональное выражение? Просто, точно так же, как мы вызываем любую обычную функцию, используя ().

(function (name) {
return name;
})();

А это, друзья мои, выражение немедленно вызываемой функции (IIFE).

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

let myName = (function () {
return 'ABC';
})();
console.log(myName);   // ABC

IIFE также может быть параметризован. Как и в случае с обычной функцией, мы передаем параметр при вызове функции. Точно так же при вызове IIFE (т.е. в скобках ()) мы можем отправить необходимые параметры, которые будут доступны внутри IIFE.

let myName = (function (name) {
return name;
})('XYZ');
console.log(myName);            // XYZ

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

(function getCounter(number) {
console.log(number);
number++;
number < 3 ? getCounter(number) : null;
})(0);

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

Есть одна очень важная вещь, которую вы всегда должны помнить.

Все функции и переменные, определенные в IIFE, относятся только к этому конкретному IIFE, а не за его пределами. Любой доступ к переменной/функциям области за пределами IIFE приведет к ошибке ссылки.

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

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

Вы можете ссылаться на этот снимок как на быстрое освежение.

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

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

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

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.