Czym jest zakres w JavaScript?

Zakres (Scope) w JavaScript to kontekst, w którym zdefiniowane i dostępne są zmienne i funkcje.

Mówiąc prościej, określa, gdzie można odwołać się do zmiennej lub funkcji w kodzie.

Istnieje kilka typów zakresów:

• Zakres globalny (Global Scope): Zmienne zadeklarowane poza funkcjami znajdują się w zakresie globalnym. Są dostępne z dowolnego miejsca w kodzie.

  // Zmienna globalna
  let globalVar = "Widoczny wszędzie";
  
  function showGlobal() {
    console.log(globalVar); // Dostępne w funkcji
  }
  
  showGlobal();
  

• Zakres lokalny (Local/Function Scope): Zmienne zadeklarowane wewnątrz funkcji są w zakresie lokalnym tej funkcji. Są dostępne tylko w tej funkcji i funkcjach zagnieżdżonych, ale nie na zewnątrz.

  function showLocal() {
    // Zmienna lokalna
    let localVar = "Widoczny tylko tutaj";
    console.log(localVar);
  }
  
  showLocal();
  // console.log(localVar); // Błąd: localVar nie jest zdefiniowana
  

• Zakres blokowy (Block Scope): Wprowadzony w ES6 (ES2015) z let i const. Zmienne zadeklarowane za pomocą let lub const wewnątrz nawiasów klamrowych ({}), np. w blokach kodu, pętlach czy warunkach, mają zakres blokowy. Zmienne zadeklarowane za pomocą var nie mają zakresu blokowego.

  if (true) {
    // Zmienna z zakresem blokowym
    let blockVar = "Widoczny tylko w tym bloku";
    console.log(blockVar);
  }
  
  // console.log(blockVar); // Błąd: blockVar nie jest zdefiniowana
  
  for (let i = 0; i < 2; i++) {
    // Zmienna z zakresem blokowym w pętli
    console.log(i);
  }
  
  // console.log(i); // Błąd: i nie jest zdefiniowane (jeśli użyto let)
  

Ważne jest również zrozumienie koncepcji łańcucha zakresów (Scope Chain). Gdy JavaScript próbuje znaleźć wartość zmiennej, najpierw sprawdza w bieżącym zakresie. Jeśli nie znajdzie, przechodzi do zakresu zewnętrznego (rodzica) i tak dalej, aż do zakresu globalnego. Jeśli zmienna nie zostanie znaleziona, generowany jest błąd ReferenceError.