Наверняка вы знакомы с функциями в JavaScript. Однако, кроме обычных функций, существуют так называемые "немедленно-вызываемые" функции. Немедленно-вызываемое выражение функции НВВФ (IIFE - Immediately Invoked Function Expression) — это особый тип функции, которая вызывается неявно.

Даже если вы не вызовете такую функцию в своем коде, она будет работать сама по себе - код в теле отработает сразу, как только браузер её считает. Пример подобной функции:

(function () {
  console.log('Привет, мир!')
})();

НВВФ также может быть определена в виде стрелочной функции:

(() => {
  console.log('Привет, мир!')
})();

Возникает вопрос - а какая польза от такого типа функций? Ведь то же самое можно сделать с помощью обычной функции:

function func(){
  console.log('Привет, мир!')
};
func();

Однако загвоздка в том, что при определении глобальной переменной в JavaScript, к ней можно получить доступ и изменить её в любом месте нашем коде. Например:

var a = 3;

function changeNum(){
  a = 4;
  console.log(a)  // => 4
}

changeNum();

console.log(a)  // => 4

В приведенном выше коде значение переменной a изменено с 3 на 4. Но что, если мы не хотим менять значение глобальной переменной a. Первое, что приходит на ум - это инициализировать новую переменную a внутри области видимости функции changeNum():

var a = 3;

function changeNum(){
  let a = 4;
  console.log(a)  // => 4
}

changeNum();

console.log(a)  // => 3

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

Однако есть и другой способ! Допустим, вы не хотите повторно использовать функцию changeNum(), а также не хотите создавать беспорядок с глобальными переменными. В этом случае вы можете использовать НВВФ, и вот как это сделать:

var a = 3;

((a) => {
  a = 4;  // меняем копию 'a'
  console.log(a);  // => 4
})(a);  // передаем копию переменной в качестве аргумента

console.log(a);  // => 3

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

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

Напоследок, НВВФ также может быть асинхронной:

(async () => {
  const get = await fetch(url);
  //  что-то выполняем
})();