Блог / Фреймворки / JavaScript: Трюки та патерни

JavaScript: Трюки та патерни

1️⃣ Оптимізоване використання замикань (Closures)

Замикання – це не просто концепція, а потужний інструмент для створення приватних змінних та оптимізації коду

???? Поганий підхід:

function counter() {
let count = 0;
return function() {
return count++;
};
}
const increment = counter();
console.log(increment()); // 0
console.log(increment()); // 1

???? Оптимізований підхід (з доступом до значення)

const createCounter = (initial = 0) => {
let count = initial;
return {
increment: () => ++count,
decrement: () => --count,
getCount: () => count
};
};
const counter = createCounter(10);
console.log(counter.increment()); // 11
console.log(counter.getCount()); // 11

2️⃣ Правильна робота з this

JavaScript може здивувати поведінкою this, особливо в різних контекстах.

???? Помилка з this у setTimeout

const obj = {
name: "JS",
sayHi() {
setTimeout(function() {
console.log(`Привіт, ${this.name}`); // ❌ this === window (undefined в strict mode)
}, 1000);
}
};
obj.sayHi();

???? Правильний варіант (стрілкова функція зберігає this)

const obj = {
name: "JS",
sayHi() {
setTimeout(() => {
console.log(`Привіт, ${this.name}`); // ✅ this === obj
}, 1000);
}
};
obj.sayHi();

3️⃣ Патерн “Фабрика” (Factory Pattern) замість класів

Використання фабрик дозволяє створювати об’єкти без new, що спрощує тестування.

???? Класичний підхід через class

class User {
constructor(name) {
this.name = name;
}
sayHello() {
return `Привіт, ${this.name}`;
}
}
const user = new User("Андрій");
console.log(user.sayHello());

???? Фабричний підхід

const createUser = (name) => ({
name,
sayHello: () => `Привіт, ${name}`
});
const user = createUser("Андрій");
console.log(user.sayHello());

Фабрики корисні для композиції та уникнення проблем з this у класах

Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на:
скайп: olegg.pann
telegram, viber - +380937663911
додавайтесь у телеграм-канал: t.me/webyk
email: oleggpann@gmail.com
ми у fb: www.facebook.com/webprograming24
Обов`язково оперативно відповімо на усі запитіння