Что такое ИИФЭ?

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

Синтаксис выглядит следующим образом:

(() => {
  console.log("Hello, I am a self-invoking arrow function!");
})();

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

Хорошо, но когда я должен использовать это?

Есть несколько причин, по которым вам как разработчику Javascript необходимо знать о IIFE. Вот первая четверка:

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

const myModule = (() => {
  const privateValue = 'secret';
  
  const publicMethod = () => {
    console.log(`The private value is ${privateValue}`);
  };

  return {
    publicMethod: publicMethod
  };
})();

myModule.publicMethod(); // Output: The private value is secret
console.log(myModule.privateValue); // Output: undefined

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

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

4. Кэширование значений. Если у вас есть значение, которое дорого вычислить или получить, вы можете использовать IIFE для кэширования значения и использовать его несколько раз без повторного вычисления или извлечения.

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

const getData = (() => {
  let cache = {};

  const getDataFromServer = async (url) => {
    // Make an AJAX request to the server to get the data
    const response = await fetch(url);
    const data = await response.json();
    
    // Cache the data for future requests
    cache[url] = data;
    return data;
  };

  return async (url) => {
    if (cache[url]) {
      // If the data is already in the cache, return it
      console.log("Returning cached data");
      return Promise.resolve(cache[url]);
    } else {
      // If the data is not in the cache, get it from the server and cache it
      console.log("Fetching data from server");
      return getDataFromServer(url);
    }
  };
})();

// Use the getData function to fetch data from a URL
getData("https://jsonplaceholder.typicode.com/posts/1")
  .then(data => console.log(data));

// The second time we call the function with the same URL, it will return the cached data
getData("https://jsonplaceholder.typicode.com/posts/1")
  .then(data => console.log(data));

В этом примере мы используем IIFE для создания функции с именем getData, которая реализует простой механизм кэширования для получения данных с сервера. Функция использует замыкание для хранения закрытого объекта cache, который используется для кэширования данных для будущих запросов.

Когда функция getData вызывается с URL-адресом, она проверяет, находятся ли данные уже в кеше. Если это так, он немедленно возвращает кэшированные данные. Если нет, он делает AJAX-запрос к серверу для получения данных, а затем кэширует их для будущих запросов.

Используя IIFE для создания функции getData, мы можем гарантировать, что объект cache доступен только внутри функции и не может быть изменен или доступен для внешнего кода. Это может помочь повысить надежность и производительность нашего приложения, избегая ненужных запросов к серверу и уменьшая сетевой трафик.

Что мне нужно знать о IIFE с ES6?

IIFE были частью JavaScript с самого начала и могут использоваться во всех версиях языка.

Тем не менее, ES6 представил новый способ создания блоков кода с их собственной областью действия, называемый «область видимости блока». Область видимости блока может быть достигнута с помощью ключевых слов let и const, которые позволяют вам определять переменные с областью действия блока, а не области действия функции.

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

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

Нашли ли вы инновационный вариант использования IIFE? Если это так, я хотел бы услышать об этом!