5.1 Globalny zakres zmiennych
Zakresy zmiennych (scopes) określają dostępność zmiennych i funkcji w różnych częściach programu. W JavaScript istnieją trzy główne typy zakresów: globalny, lokalny i blokowy. Zrozumienie tych zakresów jest ważne dla efektywnego zarządzania danymi i zapobiegania błędom w kodzie.
Globalny zakres obejmuje wszystkie zmienne i funkcje deklarowane poza funkcjami lub blokami kodu. Te zmienne i funkcje są dostępne z każdego miejsca w kodzie.
Przykład 1: Deklaracja zmiennych globalnych
var globalVar = 'I am a global variable';
function showGlobalVar() {
console.log(globalVar); // Dostęp do zmiennej globalnej
}
showGlobalVar(); // Wyświetli: I am a global variable
console.log(globalVar); // Dostęp do zmiennej globalnej
Przykład 2: Funkcje globalne
W tym przykładzie zmienna globalVar i funkcja globalFunction() są zadeklarowane w globalnym zakresie i są dostępne z każdego miejsca w kodzie.
function globalFunction() {
return 'I am a global function';
}
console.log(globalFunction()); // Wyświetli: I am a global function
5.2 Lokalny zakres zmiennych
Lokalny zakres obejmuje zmienne i funkcje deklarowane wewnątrz funkcji. Te zmienne i funkcje są dostępne tylko w tej funkcji i nie są dostępne poza nią.
Przykład 3: Deklaracja zmiennych lokalnych
W tym przykładzie zmienna localVar jest deklarowana wewnątrz funkcji localScopeExample() i nie jest dostępna poza tą funkcją:
function localScopeExample() {
var localVar = 'I am a local variable';
console.log(localVar); // Dostęp do zmiennej lokalnej
}
localScopeExample(); // Wyświetli: I am a local variable
console.log(localVar); // Błąd: localVar is not defined
Przykład 4: Funkcje lokalne
W tym przykładzie funkcja innerFunction() jest deklarowana wewnątrz funkcji outerFunction() i nie jest dostępna poza outerFunction():
function outerFunction() {
function innerFunction() {
return 'I am a local function';
}
console.log(innerFunction()); // Dostęp do funkcji lokalnej
}
outerFunction(); // Wyświetli: I am a local function
console.log(innerFunction()); // Błąd: innerFunction is not defined
5.3 Blokowy zakres zmiennych
Blokowy zakres obejmuje zmienne deklarowane za pomocą let i const wewnątrz bloku kodu ograniczonego klamrami {}. Te zmienne są dostępne tylko wewnątrz tego bloku i nie są dostępne poza nim.
Przykład 5: Deklaracja zmiennych z let
W tym przykładzie zmienna blockVar jest deklarowana wewnątrz bloku if i nie jest dostępna poza nim:
if (true) {
let blockVar = 'I am a block-scoped variable';
console.log(blockVar); // Dostęp do zmiennej blokowej
}
console.log(blockVar); // Błąd: blockVar is not defined
Przykład 6: Deklaracja zmiennych z const
W tym przykładzie zmienna i jest deklarowana wewnątrz bloku for i nie jest dostępna poza nim:
for (const i = 0; i < 3; i++) {
console.log(i); // Dostęp do zmiennej blokowej
}
console.log(i); // Błąd: i is not defined
Właściwości blokowego zakresu
Przykład 7: Zagnieżdżone bloki
W tym przykładzie zmienna innerVar jest dostępna tylko wewnątrz wewnętrznego bloku, a zmienna outerVar jest dostępna zarówno wewnątrz zewnętrznego, jak i wewnętrznego bloku:
if (true) {
let outerVar = 'I am in the outer block';
if (true) {
let innerVar = 'I am in the inner block';
console.log(outerVar); // Dostęp do zmiennej zewnętrznego bloku
console.log(innerVar); // Dostęp do zmiennej wewnętrznego bloku
}
console.log(outerVar); // Dostęp do zmiennej zewnętrznego bloku
console.log(innerVar); // Błąd: innerVar is not defined
}
5.4 Interakcja różnych zakresów
Przykład 8: Interakcja pomiędzy globalnym a lokalnym zakresem
W tym przykładzie funkcja scopeExample() ma dostęp do globalnej zmiennej globalVar oraz swojej lokalnej zmiennej localVar:
var globalVar = 'I am a global variable';
function scopeExample() {
var localVar = 'I am a local variable';
console.log(globalVar); // Dostęp do globalnej zmiennej
console.log(localVar); // Dostęp do lokalnej zmiennej
}
scopeExample(); // Wyświetli: I am a global variable
// I am a local variable
console.log(globalVar); // Dostęp do globalnej zmiennej
console.log(localVar); // Błąd: localVar is not defined
Przykład 9: Zakresy z funkcją strzałkową
W tym przykładzie funkcja strzałkowa arrowFunction() ma dostęp do globalnej zmiennej globalVar oraz swojej lokalnej zmiennej localVar:
let globalVar = 'I am a global variable';
const arrowFunction = () => {
let localVar = 'I am a local variable in arrow function';
console.log(globalVar); // Dostęp do globalnej zmiennej
console.log(localVar); // Dostęp do lokalnej zmiennej
};
arrowFunction(); // Wyświetli: I am a global variable
// I am a local variable in arrow function
console.log(globalVar); // Dostęp do globalnej zmiennej
console.log(localVar); // Błąd: localVar is not defined
GO TO FULL VERSION