Пристальный взгляд на немедленно вызываемые функциональные выражения (IIFE) в JavaScript

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

Хотя мы обычно определяем такие функции:

let x = () => {
    console.log("hello");
}
let y = function() {
    console.log("world");

}

function z() {
    console.log("!");
}

x(); y(); z();

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

(function() {
    console.log("hello world!")
})()

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

(() => {
    console.log("hello world!")
})()

Несмотря на то, что указанные выше IIFE не имеют имен, вы можете дать им имена. Однако это не имеет смысла, поскольку вы не можете позвонить им где-нибудь еще. Как только функция создана и вызвана в этом формате, ее нельзя использовать где-либо еще. Это означает, что в приведенном ниже примере попытка вызвать myFunction() в другом месте не сработает:

(function myFunction() {
    console.log("hello world!")
})()

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

(async () => {
    console.log("hello world!")
})()

Предоставление аргументов IIFE в Javascript

Мы можем передавать переменные прямо в IIFE, используя ожидаемый формат. Например, ниже мы аргументируем наш IIFE, который равен x. Мы можем передать значение x, используя последний набор скобок:

let getNumber = 10;
(function(x) {
    console.log(x + 10)
})(getNumber) // console logs 20

Защитная точка с запятой в IIFE

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

;(() => {
    return 10;
})

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

let b = 5
let c = 10
let a = b + c
(function () {
    return 10
})();

Если кто-то забыл поставить точку с запятой или если вы импортировали IIFE в строку, где предыдущая не содержала точку с запятой, вы можете столкнуться с некоторыми странными ошибками. В приведенном выше примере вы получите сообщение об ошибке Uncaught TypeError: c is not a function. Это связано с тем, что код интерпретирует это как попытку запустить функцию c. По сути, код видит это:

c(() => {
    return 10
})()

Поэтому защитная точка с запятой в начале IIFE — это простой способ избежать этого сценария.

Заключение

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

Также опубликовано здесь