Czym jest scope w JavaScript?

Scope (zasięg) to pojęcie w języku JavaScript, które określa, gdzie dana zmienna jest widoczna i dostępna w kodzie. Możemy sobie wyobrazić scope jako fizyczną przestrzeń, w której dana zmienna jest dostępna.

Na przykład, jeśli zmienna jest zdefiniowana wewnątrz funkcji, to jej scope obejmuje tylko wnętrze tej funkcji, czyli zmienna ta jest widoczna i dostępna tylko wewnątrz tej funkcji.

Przykład: Scope w JavaScript

Aby lepiej zrozumieć pojęcie scope, zobaczmy poniższy przykład kodu:

const name = "Piotr"; // zmienna name jest zdefiniowana na poziomie globalnym

function sayHello() {
  const message = "Hello " + name; // zmienna message jest zdefiniowana wewnątrz funkcji sayHello

  console.log(message); // wypisanie zmiennej message
}

sayHello(); // wywołanie funkcji sayHello

console.log(message); // błąd - zmienna message nie jest zdefiniowana na poziomie globalnym

W powyższym przykładzie, zmienna name jest zdefiniowana na poziomie globalnym, czyli jest dostępna i widoczna w całym kodzie. Natomiast zmienna message jest zdefiniowana wewnątrz funkcji sayHello, co oznacza, że jej scope obejmuje tylko wnętrze tej funkcji. Dlatego, gdy próbujemy wypisać zmienną message na poziomie globalnym, otrzymujemy błąd, ponieważ zmienna ta nie jest zdefiniowana w tym miejscu.

Rodzaje scope: globalny i lokalny

Istnieją dwa główne rodzaje scope w języku JavaScript: globalny i lokalny. Globalny scope oznacza, że dana zmienna jest dostępna i widoczna w całym kodzie, niezależnie od tego, w jakim miejscu została zdefiniowana. Natomiast lokalny scope oznacza, że dana zmienna jest dostępna i widoczna tylko wewnątrz danego bloku kodu, np. wewnątrz funkcji lub pętli.

Aby lepiej zrozumieć różnicę między tymi rodzajami scope, zobaczmy poniższy przykład kodu:

const name = "Piotr"; // zmienna name jest zdefiniowana na poziomie globalnym

function sayHello() {
  const message = "Hello " + name; // zmienna message jest zdefiniowana wewnątrz funkcji sayHello

  console.log(message); // wypisanie zmiennej message
  console.log(name); // wypisanie zmiennej name
}

sayHello(); // wywołanie funkcji sayHello

console.log(message); // błąd - zmienna message nie jest zdefiniowana na poziomie globalnym
console.log(name); // wypisanie zmiennej name

W powyższym przykładzie, zmienna name jest zdefiniowana na poziomie globalnym i ma globalny scope, dlatego jest dostępna i widoczna wewnątrz funkcji sayHello oraz na poziomie globalnym. Natomiast zmienna message jest zdefiniowana wewnątrz funkcji sayHello i ma lokalny scope, dlatego jest dostępna i widoczna tylko wewnątrz tej funkcji. Dlatego, gdy próbujemy wypisać zmienną message na poziomie globalnym, otrzymujemy błąd, ponieważ zmienna ta nie jest zdefiniowana w tym miejscu.

Czym jest call-time scope?

Warto również wspomnieć, że w języku JavaScript istnieje coś takiego jak zasięg wywołania (ang. call-time scope). Oznacza to, że zmienna może być dostępna i widoczna tylko wewnątrz konkretnego wywołania danej funkcji, nawet jeśli jest zdefiniowana wewnątrz tej funkcji.

Zobaczmy poniższy przykład:

function sayHello(name) {
  const message = "Hello " + name; // zmienna message jest zdefiniowana wewnątrz funkcji sayHello

  console.log(message); // wypisanie zmiennej message
}

sayHello("Piotr"); // wywołanie funkcji sayHello z argumentem "Piotr"
sayHello("Anna"); // wywołanie funkcji sayHello z argumentem "Anna"

console.log(message); // błąd - zmienna message nie jest zdefiniowana na poziomie globalnym

W powyższym przykładzie, zmienna message jest zdefiniowana wewnątrz funkcji sayHello, ale jest dostępna tylko wewnątrz danego wywołania tej funkcji. Dlatego, gdy wywołujemy funkcję sayHello z argumentem „Piotr”, zmienna message będzie zawierać wartość „Hello Piotr”, a gdy wywołujemy funkcję z argumentem „Anna”, zmienna message będzie zawierać wartość „Hello Anna”.

Podsumowując, scope w języku JavaScript określa, gdzie dana zmienna jest dostępna i widoczna w kodzie. Możemy rozróżniać dwa główne rodzaje scope: globalny i lokalny. Ponadto, w języku JavaScript istnieje również tzw. zasięg wywołania, który oznacza, że zmienna jest dostępna tylko wewnątrz konkretnego wywołania danej funkcji. Znajomość scope jest więc bardzo ważna.

Wróć do spisu treści