Глобальні змінні

JavaScriptJunior~2 хв читання

Що таке глобальна змінна

Глобальна змінна - це змінна, доступна в усьому коді програми, у всіх функціях і модулях.

У браузері вона стає властивістю об'єкта window, у Node.js: властивістю об'єкта global.

javascript

var count = 0; // глобальна змінна
function increment() {
  count++;
}

Чому не варто використовувати глобальні змінні

Ось основні причини:

1. Конфлікти імен (name collisions)

Якщо проєкт великий (або код об'єднується з бібліотеками), то кілька частин програми можуть використовувати одну й ту саму змінну.

javascript

var data = "User data";
// десь в іншій частині коду
var data = "Product data"; // Перезапише попереднє значення

У результаті: неочікувана поведінка і важкі для налагодження помилки.

2. Складність налагодження і передбачуваності

Глобальні змінні можуть змінюватися в будь-якому місці програми, тому важко зрозуміти, де саме їхнє значення було змінено.

javascript

let counter = 0;

function a() { counter++; }
function b() { counter = 10; }
function c() { counter--; }

c(); a(); b();
console.log(counter); // що тут станеться?

Програму стає важко тестувати і супроводжувати.

3. Глобальні змінні "засмічують" простір імен

Усі глобальні змінні зберігаються в одному місці (window, global), і що їх більше, то вищий шанс непередбачуваних перетинів.

javascript

window.alert = 42; // тепер alert більше не працює

4. Погано для тестування і модульності

Якщо функція спирається на глобальні дані, її не можна протестувати ізольовано.

javascript

let rate = 0.1;
function calculateTax(amount) {
  return amount * rate; // прив'язка до глобальної змінної
}

Краще передавати залежність явно:

javascript

function calculateTax(amount, rate) {
  return amount * rate;
}

5. Неочевидна поведінка в асинхронному коді

В асинхронних сценаріях (setTimeout, проміси тощо) глобальні змінні можуть бути змінені до того, як їхнє значення буде використано.

javascript

let user = "Alice";

setTimeout(() => {
  console.log(user); // очікуємо "Alice"
}, 1000);

user = "Bob"; // глобальна змінна змінилася до виклику

Результат: "Bob".

Як правильно

Замість глобальних змінних	Використовуй
`var` у корені файлу	`let` / `const` всередині функції, блоку
Спільні дані між модулями	Експорт/імпорт (`import/export`)
Конфігурацію	Передавання через параметри або контекст
Стан	Локальні об'єкти, класи, React state, Redux тощо

Винятки: коли можна

Глобальні змінні допустимі в обмежених і контрольованих випадках:

Налаштування конфігурації (наприклад, APP_VERSION)
Корисні утиліти в модульному середовищі (globalThis.MyApp = {})
Коли це свідоме проєктне рішення, і доступ до них суворо контролюється

Коротко запам'ятати

Причина	Чому погано
Конфлікти імен	Дві частини програми можуть використовувати одне ім'я
Складне налагодження	Непередбачувана зміна з різних місць
Брудний простір імен	`window`/`global` переповнений
Неізольовані тести	Функції залежать від зовнішнього стану
Помилки в асинхронному коді	Глобальні значення змінюються непередбачувано

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.