JavaScript Hoisting erklärt

Das heutige Kurzvideo dient als Antwort auf eine auf Twitter gestellte Frage, die sich um das Thema JavaScript "Hoisting" dreht. Was ist das? Wie funktioniert es? Was muss ich darüber wissen? All das wird in diesem Basis-Kurs für Anfänger besprochen.

Kompletter Screencast

"Hoisting" erklärt

Schaue dir den folgenden Code an:

 
var myvar = 'my value'; 
alert(myvar); // my value

Okay, natürlich wird der Alert "my value" anzeigen. Das ist offensichtlich; aber bleib' noch ein bisschen dran. Lass' uns als Nächstes eine Funktion erstellen, die denselben Wert anzeigt.

 
var myvar = 'my value'; 
 
(function() { 
  alert(myvar); // my value 
})();

Okay, okay. Immer noch offensichtlich, ich weiß. Jetzt lass' uns mal ein bisschen Sand ins Getriebe schütten und in dieser anonymen Funktion eine lokale Variable mit demselben Namen erstellen.

 
  var myvar = 'my value'; 
 
(function() { 
  alert(myvar); // undefined 
  var myvar = 'local value'; 
})();

Hm? Warum zeigt der Alert jetzt undefined an? Obwohl wir eine neue Variable deklariert haben, befindet sie sich immer noch unter dem Alert; deswegen sollte das keinen Effekt haben, richtig? Falsch.

Variablendeklarationen werden "gehoisted", also wie eine Fahne nach oben gehisst.

Innerhalb ihres aktuellen Scopes wird die Variable im Hintergrund nach oben gezogen, unabhängig davon, wo sie deklariert worden ist. Jedoch wird nur die Deklaration gehoisted. Wenn die Variable auch noch initialisiert wurde, wird der aktuelle Wert an oberster Stelle des Scopes initial auf undefined gesetzt.

Okay, lass' uns den Unterschied zwischen den beiden Begriffen Deklaration und Initialisierung näher erläutern. Setze folgende Zeile voraus: var joe = 'Klempner';

Deklaration

 
var joe; // the declaration

Initialisierung

 
joe = 'plumber'; // the initialization

Jetzt, da wir die Begrifflichkeiten verstehen, können wir leichter begreifen, was unter der Haube passiert. Schaue dir diese erfundene Funktion an.

 
(function() { 
  var a = 'a'; 
  // lines of code 
  var b = 'b'; 
  // more lines of code 
  var c= 'c'; // antipattern 
  // final lines of scripting 
})();

Deklariere alle Variablen zu Beginn.

Denk daran, dass das oben gezeigte Beispiel keine gute Praxis ist. Nichtsdestotrotz werden all diese Variablendeklarationen im Hintergrund - egal wo sie im Scope der Funktion auftauchen - an oberste Stelle gehoisted, in etwa so:

 
(function() { 
  var a, b, c; // variables declared 
  a = 'a'; 
  // lines of code 
  b = 'b'; // initialized 
  // more lines of code 
  c= 'c'; // initialized 
  // final lines of scripting 
})();

Aha-Moment

Wenn wir uns jetzt noch einmal diesen verwirrenden undefined Code-Schnipsel von weiter oben anschauen:

 
 var myvar = 'my value'; 
 
(function() { 
  alert(myvar); // undefined 
  var myvar = 'local value'; 
})();

Sollte es jetzt einen Sinn ergeben, warum myvar undefined anzeigt. Wie wir gelernt haben, wurde die lokale Variable myvar automatisch an oberste Stelle des Scopes der Funktion  - über den Alert - gehoisted, sobald sie deklariert wurde. Das bedeutet, dass die Variable schon deklariert worden ist bevor der Alert angezeigt wurde; da Initialisierungen hingegen nicht gehoisted werden, ist der Wert der Variable: undefined.