Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Глобальні змінні». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Глобальна змінна** - це змінна, доступна в усьому коді програми, у всіх функціях і модулях. **Ключове:** глобальні змінні призводять до конфліктів імен, ускладнюють налагодження і тестування, засмічують простір імен та поводяться непередбачувано в асинхронному коді.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Що таке глобальна змінна **Глобальна змінна** - це змінна, доступна **в усьому коді програми**, у **всіх функціях і модулях**. У браузері вона стає **властивістю об'єкта** `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` переповнений | | Неізольовані тести | Функції залежать від зовнішнього стану | | Помилки в асинхронному коді | Глобальні значення змінюються непередбачувано |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.