Інкапсуляція за допомогою IIFE: Як самозапускаючі функції JavaScript допомагають підтримувати код чистим

IIFE (Immediately Invoked Function Expression) — це функція JavaScript, яка виконується одразу після її визначення.

Зазвичай її використовують для створення нової області видимості, щоб уникнути забруднення глобальної області змінними.

Синтаксис IIFE виглядає так:

(function() {  
 // код виконується одразу  
})();

Або можна використати стрілкову функцію для створення IIFE:

(() => {  
 // код виконується одразу  
})();

Ключові моменти:

Самовиконувана: Функція виконується одразу після її визначення.

Анонімна: Функція не має імені.

Інкапсуляція: Допомагає уникнути конфліктів змінних, створюючи локальну область видимості.

(function() {  
 var message = "Привіт, Світ!";  
 console.log(message); // Виведе: Привіт, Світ!  
})();  

// message недоступне тут  
// console.log(message); // ReferenceError: message is not defined

Навіщо використовувати IIFE?

Уникнення глобальних змінних:

Це допомагає уникнути забруднення глобальної області видимості зайвими змінними.

(function() {  
 var privateVar = "Я приватний";  
 console.log(privateVar); // Виведе: Я приватний  
})();  
// privateVar недоступне поза функцією  
console.log(privateVar); // ReferenceError: privateVar is not defined

Модульний патерн:

IIFE часто використовуються в модульному патерні для інкапсуляції коду та надання лише необхідного API.

Приклад модульного патерну за допомогою IIFE:

var counterModule = (function() {  
 let counter = 0; // приватна змінна  

 return {  
 increment: function() {  
 counter++;  
 console.log(counter);  
 },  
 decrement: function() {  
 counter--;  
 console.log(counter);  
 }  
 };  
})();  

counterModule.increment(); // Виведе: 1  
counterModule.increment(); // Виведе: 2  
counterModule.decrement(); // Виведе: 1

Створення приватних змінних: IIFE чудово підходять для створення приватних змінних, до яких неможливо звернутись ззовні. Це допомагає з інкапсуляцією даних, забезпечуючи захист внутрішнього стану.

var createPerson = (function() {  
 var name = "Джон"; // Приватна змінна  

 return {  
 getName: function() {  
 return name; // доступ до приватної змінної  
 },  
 setName: function(newName) {  
 name = newName; // зміна приватної змінної  
 }  
 };  
})();  

console.log(createPerson.getName()); // Виведе: Джон  
createPerson.setName("Джейн");  
console.log(createPerson.getName()); // Виведе: Джейн

Ізоляція коду в циклах: IIFE корисні, коли потрібно ізолювати змінні в циклах (наприклад, у циклах for або forEach), особливо коли ви хочете зберегти змінну циклу в асинхронних зворотних викликах.

for (var i = 0; i < 3; i++) {  
 (function(i) {  
 setTimeout(function() {  
 console.log(i); // Виведе: 0, 1, 2  
 }, 1000);  
 })(i);  
}

Варіанти синтаксису IIFE

IIFE можна писати в кількох варіантах залежно від ваших вподобань або потреб.

1. Базовий вираз функції:

(function() {  
 console.log("Привіт з IIFE!");  
})();

2. Стрілкова функція IIFE:

З ES6 ви можете використовувати стрілкові функції для визначення IIFE:

(() => {  
 console.log("Привіт з IIFE стрілкової функції!");  
})();

1. Іменована IIFE:

Хоча це рідше зустрічається, можна дати функції ім’я всередині IIFE. Проте вона все одно буде негайно викликана.

(function myFunction() {  
 console.log("Привіт з іменованої IIFE!");  
})();

1. IIFE з параметрами:

Ви можете передавати аргументи в IIFE, як і в звичайні функції:

(function(a, b) {  
 console.log(a + b); // Виведе: 5  
})(2, 3);

**IIFE з модулями ES6**:

З модулями ES6 патерн IIFE вже не використовується так часто, але колись це був поширений спосіб досягати поведінки, подібної до модулів у JavaScript до введення синтаксису `import/export`:

const myModule = (function() {
let privateVar = 0;

return {
increment: function() {
privateVar++;
return privateVar;
}
};
})();

console.log(myModule.increment()); // Виведе: 1
```

Висновок

IIFE — це потужний патерн JavaScript для:

• Інкапсуляції та приватності
• Уникнення забруднення глобальної області видимості
• Створення модулів
• Керування областю видимості в циклах та асинхронному коді

Хоча модульний патерн і можливості ES6, такі як let, const та import/export, надали більш сучасні альтернативи, IIFE залишаються важливою концепцією в JavaScript, особливо для роботи зі спадщиною коду та розумінням того, як працює область видимості в JavaScript.

Перекладено з: Encapsulation with IIFE: How JavaScript’s Self-Invoking Functions Keep Code Clean