Наверняка вы знакомы с функциями в 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);
// что-то выполняем
})();
Комментарии (0)