Розуміння закриттів JavaScript: Посібник для початківців

Закриття (Closures) — це основна концепція в JavaScript, яка дозволяє писати кращий, більш ефективний та модульний код. Вони забезпечують можливість створення приватних змінних, підтримки стану та складної функціональності, що часто зустрічається в сучасних фреймворках і бібліотеках.

Що таке закриття (Closure)?

Закриття (closure) — це функція, визначена всередині іншої функції. Внутрішня функція має доступ до змінних та області видимості зовнішньої функції. Закриття дозволяють використовувати приватні змінні та підтримувати стан, і вони часто використовуються в таких фреймворках JavaScript, як React, Vue та Angular.

Ключові концепції закриттів (Closures)

1.

Доступ до зовнішньої області видимості: Закриття (Closure) надає внутрішній функції доступ до змінних зовнішньої функції, навіть після того, як зовнішня функція вже виконана.

function outerFunction() {   
 let outerVariable = "Я з зовнішньої області!";   
 function innerFunction() {   
 console.log(outerVariable);  
 }  
 return innerFunction;  
 }  
 const closureFunction = outerFunction();  

 closureFunction();  
 // Виведення: "Я з зовнішньої області!"

2. Постійність змінних: Змінні у зовнішній функції зберігаються стільки, скільки існує функція закриття (Closure).

function counter() {  
 let count = 0;  
 return function () {  
 count++;  
 console.log(count);  
 }  
 }  
 const increment = counter();  
 increment();  
 // Виведення: 1  
 increment();  
 // Виведення: 2

3.

Приватні змінні: Закриття (Closure) можна використовувати для емулювання приватних змінних, забезпечуючи інкапсуляцію та захист стану.

function createPrivateCounter() {  
 let privateCount = 0;  
 return {  
 increment: function () {  
 privateCount++;  
 console.log(privateCount);  
 },  
 decrement: function () {  
 privateCount--;  
 console.log(privateCount);  
 }  
 };  
 }  
 const counter = createPrivateCounter();  
 counter.increment();  
 // Виведення: 1   
counter.increment();  
 // Виведення: 2  
 counter.decrement();  
 // Виведення: 1

Ілюстрація використання зворотних викликів і прослуховувачів подій (Event Listeners) через закриття (Closures)

Закриття (Closures) часто використовуються в асинхронному програмуванні, таких як зворотні виклики (callbacks) і прослуховувачі подій (Event Listeners), щоб зберегти стан.

Приклад: Лічильник натискань кнопки

function createClickCounter() {  
 let count = 0;  
return function () {  
 count++;  
 console.log(`Button clicked ${count} times.`);  
 };  
}  
const button = document.querySelector('#myButton');  
const handleClick = createClickCounter();  
button.addEventListener('click', handleClick);

Попередній перегляд виведення:

• Кожне натискання кнопки збільшує лічильник і виводить оновлене значення.

Цей приклад демонструє, як закриття (Closures) допомагають зберігати стійкий стан при кількох викликах обробників подій (Event Handlers).

Ілюстрація функціонального програмування з використанням закриттів (Closures)

Закриття (Closures) дозволяють застосовувати техніки функціонального програмування, такі як каррінг (currying), де функція повертає іншу функцію для часткового застосування аргументів.

Приклад: Каррінг

function multiply(a) {  
 return function (b) {  
 return a * b;  
 };  
}  
const double = multiply(2);  
console.log(double(5)); // Виведення: 10  
const triple = multiply(3);  
console.log(triple(4)); // Виведення: 12

Ілюстрація:

• Повторне використання: Створюючи функції, як double і triple, ми можемо застосовувати конкретні множення в різних контекстах.
• Часткове застосування: Функція multiply приймає перший параметр (a) і повертає іншу функцію, яка чекає на другий параметр (b).
  Це особливо корисно при роботі з повторюваною логікою, що робить код компактним і модульним.

Приклад із реального життя: Розрахунок податків

function createTaxCalculator(taxRate) {  
 return function (amount) {  
 return amount + amount * taxRate;  
 };  
}  
const calculateVAT = createTaxCalculator(0.2); // 20% ПДВ  
console.log(calculateVAT(100)); // Виведення: 120  
const calculateGST = createTaxCalculator(0.18); // 18% GST  
console.log(calculateGST(100)); // Виведення: 118

Попередній перегляд виведення:

• Для товару вартістю 100 одиниць, розрахунок ПДВ додає 20%, результат — 120 одиниць.
• Розрахунок GST додає 18%, результат — 118 одиниць.

Ілюстрація:

• Користувацька логіка: Різні ставки податків інкапсульовані в специфічних функціях, таких як calculateVAT та calculateGST.
• Спрощення: Зменшує повторення, абстрагуючи логіку розрахунку податків в багаторазові закриття (Closures).

Переваги використання закриттів (Closures)

1.

Переваги закриттів (Closures)

1. Інкапсуляція: Допомагає створювати приватні змінні, покращуючи модульність і безпеку коду.
2. Підтримка стану: Дозволяє функціям зберігати і маніпулювати станом при кількох викликах.
3. Зворотні виклики (Callbacks) і прослуховувачі подій (Event Listeners): Часто використовуються в асинхронному програмуванні та обробці подій.
4. Функціональне програмування: Дозволяє створювати функції вищого порядку і каррінг (currying).

Висновок

Закриття (Closures) — це потужна функція JavaScript, яка надає гнучкість, безпеку та розширену функціональність. Розуміння та освоєння закриттів відкриває глибший рівень програмування на JavaScript і готує вас до ефективної роботи з сучасними бібліотеками та фреймворками.

Сподіваюся, це допоможе.

Перекладено з: Understanding JavaScript Closures: A Beginner’s Guide Introduction