5.1 Глобальна область видимості
Області видимості (scopes) визначають доступність змінних і функцій у різних частинах програми. У JavaScript існує три основних типи областей видимості: глобальна, локальна і блочна. Розуміння цих областей видимості важливе для ефективного управління даними та запобігання помилок у коді.
Глобальна область видимості включає всі змінні та функції, оголошені поза будь-якими функціями або блоками коду. Ці змінні та функції доступні з будь-якого місця у коді.
Приклад 1: Оголошення глобальних змінних
var globalVar = 'Я глобальна змінна';
function showGlobalVar() {
console.log(globalVar); // Доступ до глобальної змінної
}
showGlobalVar(); // Виведе: Я глобальна змінна
console.log(globalVar); // Доступ до глобальної змінної
Приклад 2: Глобальні функції
У цьому прикладі змінна globalVar і функція globalFunction() оголошені у глобальній області видимості та доступні з будь-якого місця у коді.
function globalFunction() {
return 'Я глобальна функція';
}
console.log(globalFunction()); // Виведе: Я глобальна функція
5.2 Локальна область видимості
Локальна область видимості включає змінні і функції, оголошені всередині функції. Ці змінні і функції доступні лише всередині цієї функції і недоступні за її межами.
Приклад 3: Оголошення локальних змінних
У цьому прикладі змінна localVar оголошена всередині функції localScopeExample() і недоступна за межами цієї функції:
function localScopeExample() {
var localVar = 'Я локальна змінна';
console.log(localVar); // Доступ до локальної змінної
}
localScopeExample(); // Виведе: Я локальна змінна
console.log(localVar); // Помилка: localVar is not defined
Приклад 4: Локальні функції
У цьому прикладі функція innerFunction() оголошена всередині функції outerFunction() і недоступна за межами outerFunction():
function outerFunction() {
function innerFunction() {
return 'Я локальна функція';
}
console.log(innerFunction()); // Доступ до локальної функції
}
outerFunction(); // Виведе: Я локальна функція
console.log(innerFunction()); // Помилка: innerFunction is not defined
5.3 Блочна область видимості
Блочна область видимості включає змінні, оголошені за допомогою let і const всередині блоку коду, обмеженого фігурними дужками {}. Ці змінні доступні тільки всередині цього блоку і недоступні за його межами.
Приклад 5: Оголошення змінних з let
У цьому прикладі змінна blockVar оголошена всередині блоку if і недоступна за його межами:
if (true) {
let blockVar = 'Я змінна блочної області видимості';
console.log(blockVar); // Доступ до блочної змінної
}
console.log(blockVar); // Помилка: blockVar is not defined
Приклад 6: Оголошення змінних з const
У цьому прикладі змінна i оголошена всередині блоку for і недоступна за його межами:
for (const i = 0; i < 3; i++) {
console.log(i); // Доступ до блочної змінної
}
console.log(i); // Помилка: i is not defined
Особливості блочної області видимості
Приклад 7: Вкладені блоки
У цьому прикладі змінна innerVar доступна лише всередині внутрішнього блоку, а змінна outerVar доступна як у зовнішньому, так і у внутрішньому блоках:
if (true) {
let outerVar = 'Я у зовнішньому блоці';
if (true) {
let innerVar = 'Я у внутрішньому блоці';
console.log(outerVar); // Доступ до змінної зовнішнього блоку
console.log(innerVar); // Доступ до змінної внутрішнього блоку
}
console.log(outerVar); // Доступ до змінної зовнішнього блоку
console.log(innerVar); // Помилка: innerVar is not defined
}
5.4 Взаємодія різних областей видимості
Приклад 8: Взаємодія глобальної та локальної областей видимості
У цьому прикладі функція scopeExample() має доступ до глобальної змінної globalVar та до своєї локальної змінної localVar:
var globalVar = 'Я глобальна змінна';
function scopeExample() {
var localVar = 'Я локальна змінна';
console.log(globalVar); // Доступ до глобальної змінної
console.log(localVar); // Доступ до локальної змінної
}
scopeExample(); // Виведе: Я глобальна змінна
// Я локальна змінна
console.log(globalVar); // Доступ до глобальної змінної
console.log(localVar); // Помилка: localVar is not defined
Приклад 9: Області видимості з функцією-стрілкою
У цьому прикладі функція-стрілка arrowFunction() має доступ до глобальної змінної globalVar і до своєї локальної змінної localVar:
let globalVar = 'Я глобальна змінна';
const arrowFunction = () => {
let localVar = 'Я локальна змінна у функції-стрілці';
console.log(globalVar); // Доступ до глобальної змінної
console.log(localVar); // Доступ до локальної змінної
};
arrowFunction(); // Виведе: Я глобальна змінна
// Я локальна змінна у функції-стрілці
console.log(globalVar); // Доступ до глобальної змінної
console.log(localVar); // Помилка: localVar is not defined
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ