Пошук уроків, статей та іншого контенту
Дізнайтеся, чим локальні змінні відрізняються від глобальних і де вони доступні. Розберіть, чому надмірне використання глобального стану ускладнює підтримку програми.
Область видимості визначає, де саме в програмі можна звернутися до змінної.
У JavaScript змінна може бути:
локальною — доступною лише в певній функції або блоці;
глобальною — доступною з різних частин програми.
Розуміння області видимості допомагає уникати помилок і робити код передбачуванішим.
Локальна змінна створюється всередині функції та доступна лише в ній.
function greetUser() {
const message = "Привіт!";
console.log(message);
}
greetUser();
// Помилка: змінна message недоступна поза функцією
console.log(message);Змінна message існує всередині функції greetUser. Після завершення функції звернутися до неї ззовні неможливо.
Такі змінні називають локальними, тому що вони належать локальній області видимості функції.
Різні функції можуть мати локальні змінні з однаковими іменами. Це не створює конфлікту, тому що кожна змінна існує у своїй області видимості.
function showAdmin() {
const role = "адміністратор";
console.log(role);
}
function showUser() {
const role = "користувач";
console.log(role);
}
showAdmin(); // адміністратор
showUser(); // користувачУ кожній функції role — це окрема змінна.
Глобальна змінна створюється поза функціями та доступна в багатьох місцях програми.
const appName = "Мій застосунок";
function showAppName() {
console.log(appName);
}
function printAppInfo() {
console.log(`Назва: ${appName}`);
}
showAppName();
printAppInfo();Функції можуть читати глобальну змінну appName, тому що вона оголошена у зовнішній області видимості.
Функція може використовувати змінні, оголошені зовні. Але зовнішній код не має доступу до локальних змінних функції.
const currency = "грн";
function showPrice(price) {
const formattedPrice = `${price} ${currency}`;
console.log(formattedPrice);
}
showPrice(250); // 250 грн
// formattedPrice тут недоступнаJavaScript шукає змінну спочатку в поточній області видимості. Якщо не знаходить, перевіряє зовнішню область, потім наступну і так далі.
Цей процес називається ланцюжком областей видимості.
Якщо всередині функції оголосити змінну з таким самим іменем, вона приховає глобальну змінну.
const message = "Повідомлення з глобальної області";
function showMessage() {
const message = "Повідомлення з функції";
console.log(message);
}
showMessage(); // Повідомлення з функції
console.log(message); // Повідомлення з глобальної областіУсередині функції використовується локальна message. Зовні залишається доступною глобальна message.
Таку ситуацію називають затіненням змінної. Її краще не використовувати без потреби, оскільки однакові імена можуть ускладнити читання коду.
Функція може не лише читати глобальну змінну, а й змінювати її.
let score = 0;
function addPoint() {
score += 1;
}
addPoint();
addPoint();
console.log(score); // 2Функція addPoint змінює значення, яке зберігається поза функцією.
Такий підхід працює, але його потрібно використовувати обережно. Будь-яка частина програми може змінити score, тому згодом буває складно визначити, де саме значення стало неправильним.
Замість використання глобальних змінних краще передавати потрібні дані у функцію через параметри.
function addPoints(currentScore, points) {
return currentScore + points;
}
let score = 0;
score = addPoints(score, 10);
score = addPoints(score, 5);
console.log(score); // 15У цьому прикладі функція:
отримує дані через параметри;
виконує операцію;
повертає новий результат;
не залежить від прихованого глобального стану.
Таку функцію легше перевіряти, повторно використовувати та змінювати.
Локальні змінні часто використовують для проміжних обчислень, а результат повертають за допомогою return.
function calculateTotal(price, quantity) {
const total = price * quantity;
return total;
}
const orderTotal = calculateTotal(120, 3);
console.log(orderTotal); // 360Змінна total локальна. Вона потрібна лише для роботи функції, а зовні доступний результат, записаний у orderTotal.
Змінні, оголошені через let або const, доступні всередині блоку, де їх створили. Блоком можуть бути фігурні дужки {} у if, for, while або окремому блоці.
function checkAge(age) {
if (age >= 18) {
const message = "Доступ дозволено";
console.log(message);
}
// message тут недоступна
}
checkAge(20);Змінна message існує лише всередині блоку if.
let, const і varДля сучасного JavaScript зазвичай використовують const і let:
const — коли змінну не потрібно переприсвоювати;
let — коли значення змінюватиметься;
var — старий спосіб оголошення змінних, який має менш передбачувану область видимості.
function example() {
if (true) {
const firstName = "Олена";
let age = 25;
var city = "Львів";
console.log(firstName, age, city);
}
// const і let доступні лише всередині блоку if
// city доступна в усій функції
console.log(city);
}
example();У новому коді краще надавати перевагу const і let, оскільки вони мають блочну область видимості.
Глобальний стан — це дані, які зберігаються в глобальних змінних і можуть змінюватися з різних місць програми.
Наприклад:
let currentUser = null;
function login(user) {
currentUser = user;
}
function showCurrentUser() {
console.log(currentUser);
}
login("Олена");
showCurrentUser(); // ОленаНа початку така програма здається простою. Але з її розширенням можуть виникнути проблеми:
незрозуміло, яка функція змінила значення;
функції залежать від прихованих даних;
важче тестувати окремі функції;
одна зміна може несподівано вплинути на іншу частину програми;
повторне використання функцій стає складнішим.
Краще обмежувати область дії даних і явно передавати залежності через параметри.
function showUser(user) {
if (user) {
console.log(`Поточний користувач: ${user}`);
} else {
console.log("Користувач не ввійшов у систему");
}
}
showUser("Олена");
showUser(null);Тепер функція не залежить від глобальної змінної. Її поведінка визначається переданим аргументом.
Розглянемо функцію, яка формує інформацію про замовлення.
function createOrderSummary(productName, price, quantity) {
const total = price * quantity;
return {
productName,
quantity,
total
};
}
const order = createOrderSummary("Навушники", 1500, 2);
console.log(order.productName); // Навушники
console.log(order.quantity); // 2
console.log(order.total); // 3000Локальна змінна total не потрібна за межами функції. Функція повертає лише ті дані, які справді мають бути доступними програмі.
function createMessage() {
const message = "Готово";
}
createMessage();
// Помилка: message не визначена
console.log(message);Потрібно повернути значення з функції:
function createMessage() {
const message = "Готово";
return message;
}
const result = createMessage();
console.log(result); // ГотовоНе оголошуйте змінні без const, let або іншого ключового слова.
function setName() {
// Неправильно: змінна може стати глобальною
userName = "Олена";
}Правильніше оголосити змінну явно:
function createUserName() {
const userName = "Олена";
return userName;
}
console.log(createUserName());Не варто зберігати всі дані програми в глобальних змінних:
let name = "";
let age = 0;
let email = "";
function updateUser(newName, newAge, newEmail) {
name = newName;
age = newAge;
email = newEmail;
}Краще працювати з об'єктом і повертати результат:
function createUser(name, age, email) {
return {
name,
age,
email
};
}
const user = createUser("Олена", 25, "olena@example.com");
console.log(user);Однакові імена в різних областях видимості можуть заплутати:
const price = 100;
function calculateDiscount() {
const price = 80;
console.log(price);
}
calculateDiscount();Якщо змінні мають різний зміст, використовуйте точніші імена:
const originalPrice = 100;
function calculateDiscount() {
const discountedPrice = 80;
console.log(discountedPrice);
}
calculateDiscount();Локальна змінна доступна лише у своїй функції або блоці.
Глобальна змінна оголошується поза функціями та може бути доступною в різних частинах програми.
Функції можуть читати змінні із зовнішньої області видимості.
Локальні змінні з таким самим іменем приховують зовнішні змінні.
Для передавання даних у функції використовуйте параметри.
Для отримання результату з функції використовуйте return.
У сучасному JavaScript віддавайте перевагу const і let.
Надмірне використання глобальних змінних ускладнює тестування, налагодження та підтримку програми.
Що менше прихованих залежностей має функція, то простіше її зрозуміти та повторно використати.