Czemu var nie jest fajny?

Wszyscy dookoła trąbią: zapomnij o var, używaj const oraz let…

Ale czemu?

Bo var jest błędogenny. Z łatwością wprowadza zamieszanie w kodzie. let oraz const są bardziej wyraziste i zmniejszają prawdopodobieństwo wystąpienia błędów związanych z deklaracją zmiennych.

A czym one się różnią? Główną różnicą jest to, że var posiada funkcyjny zakres zmiennych (lub globalny dla zmiennych zadeklarowanych poza funkcją). Dla odmiany, const oraz let posiadają zakres blokowy (lub globalny dla zmiennych zadeklarowanych poza funkcją).

Z var mamy problem dotyczący hoistingu zmiennych (windowania / podnoszenia / przenoszenia deklaracji – jak zwał tak zwał). Możemy deklarować sobie zmienną var gdzieś na końcu kontekstu funkcji, a hoisting wyniesie inicjalizację zmiennej na samą górę. Prowadzi to do tego, że zmienna jest dostępna przed deklaracją. A to prosta droga do undefined (pisałam o undefined TUTAJ) lub innych niepożądanych zachowań aplikacji.

function myFunction() {
  //code...
  myVariable; //undefined
  //code...
  var myVariable = "Initial value";
  //code...
  myVariable; //"Initial value"
}
myFunction();

Dla odmiany, zmienne let/const nie są dostępne przed linią, w której są zadeklarowane. Przed deklaracją owe zmienne znajdują się w czasowo martwej strefie (temporal dead zone). A jak nie są dostępne, to i nie będzie undefined.

function myFunction() {
  //code...
  myVariable; //Throws "ReferenceError: myVariable is not defined"
  //code...
  let myVariable = "Initial value";
  //code...
  myVariable; //"Initial value"
}
myFunction();

Czy hoisting to jedyny problem vara? Oj nie. Warto też pamiętać, że var umożliwia redeklarację zmiennej. Oczywiście może to być źródłem niezłego bałaganu. let na to nie pozwoli. a const już w ogóle.

Generalnie const oraz let sprawnie zastępują var. W sumie, w poprawnie politycznym kodzie, powinieneś być w stanie każdego vara wymienić na const albo let (w tej kolejności, nie inaczej). Czy to oznacza, że nie ma już żadnego uzasadnionego przypadku użycia var? Niekoniecznie. Jeśli z jakiejś przyczyny chcesz dobrać się do zmiennej globalnej z obiektu globalnego window, to możesz użyć var. Tylko zmiennej globalne zadeklarowane za pomocą var są dopisywane do obiektu window.

let letVariable = 'letVariable';  // global
var varVariable = 'varVariable'; // global
console.log(window.letVariable); // undefined
console.log(window.varVariable); // 'varVariable'