Do jakich konsekwencji może prowadzić deklaracja zmiennej za pomocą var wewnątrz funkcji?

Deklaracja zmiennej za pomocą var wewnątrz funkcji ma zakres funkcji. Oznacza to, że taka zmienna jest dostępna w całej funkcji, ignorując zakresy blokowe (np. wewnątrz if lub for).

Skutki:

• Nadpisywanie zmiennych: Zmienna zadeklarowana za pomocą var w bloku może nadpisać zmienną o tej samej nazwie zadeklarowaną wcześniej w tej samej funkcji, ale poza tym blokiem.
• Hoisting: Deklaracja zmiennej za pomocą var jest podnoszona na początek funkcji. Oznacza to, że można używać zmiennej przed jej deklaracją, ale jej wartość w tym momencie będzie undefined.
• Nieprzewidywalne zachowanie w pętlach: W pętlach for z operacjami asynchronicznymi (np. setTimeout) zmienna zadeklarowana za pomocą var będzie miała ostatnią wartość z pętli dla wszystkich asynchronicznych callbacków, a nie wartość w momencie iteracji.

Przykład podnoszenia i nadpisywania:

function przykladScopeVar() {
  console.log(a); // undefined (z powodu hoistingu)
  var a = 10;
  if (true) {
    var a = 20; // Nadpisuje zewnętrzną zmienną 'a'
    console.log(a); // 20
  }
  console.log(a); // 20 (wartość z bloku if)
}

przykladScopeVar();

Przykład z pętlą i operacjami asynchronicznymi:

function przykladPętliVar() {
  for (var i = 0; i < 3; i++) {
    setTimeout(function() {
      console.log(i); // Wypisze 3, 3, 3 (i ma ostatnią wartość pętli)
    }, 100);
  }
}

przykladPętliVar();

Ze względu na te cechy, zaleca się używanie let lub const, które mają zakres blokowy, aby unikać nieprzewidzianych sytuacji.