JS Scoping, Hoisting und var/let/const

JavaScript (ähnlich wie in PHP) ist eine dynamisch typisierte Skriptsprache, was bedeutet, dass eine Variable keinen fixen Typ hat.

myvar = 1;
myvar = “Ich bin ein Text”;
myvar = ["Chevrolet", "Ford", "Audi"];

In statisch typisierten Programmiersprachen wie z.B. Java ist es nicht erlaubt z.B. einen Integer Wert in eine String Variable zu schreiben.

Scope

Lokale Variablen

// code here can NOT use carName

function myFunction() {
  var carName = "Ford";
  // code here CAN use carName
}

Globale Variablen

var carName = "Volvo";

// code here can use carName

function myFunction() {
  // code here can also use carName
}

Hoisting

Hoisting ist das „automatische verschieben von Variablen-Definitionen an den Anfang des aktuellen Scopes“.

D.h. die folgenden 2 Skripte verursachen 1:1 das gleiche Ergebnis:

x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;                     // Display x in the element

var x; // Declare x

var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;                     // Display x in the element

Dies betrifft aber NUR Variablen, die mit „var“ definiert wurden.
„let“ und „const“ haben kein Hoisting-Verhalten.

Hier ist aber eine wichtige Unterscheidung zu machen! Hoisting betrifft NUR die Variablen-Defintion, nicht die Initialisierung mit einem Wert.

D.h. die folgenden 2 Skripte verursachen ein unterschiedliches Ergebnis:

var x = 5; // Initialize x
var y = 7; // Initialize y

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;           // Display x and y

var x = 5; // Initialize x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;           // Display x and y

var y = 7; // Initialize y

Im 2 Beispiel erhalten wir zwar keinen Fehler da die Definition von „var y“ nach oben gehoisted wird jedoch die Wert-Zuweisung auf 7 geschieht erst am Ende.

D.h. das 2 Beispiel ist im Prinzip folgender Code:

var x = 5; // Initialize x
var y;     // Declare y

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;           // Display x and y

y = 7;    // Assign 7 to y

var vs let & const

Mit ES6 (ECMAScript 2015) wurden 2 neue Möglichkeiten eingefügt wie man Variablen definiert:

let ist eine veränderbare Variable, const ist eine nicht veränderbare Variable.

D.h. eine mit let definierte Variable kann jederzeit wieder neue Werte erhalten, jedoch eine mit const definierte Variable kann nur 1 mal einen Wert zugewiesen bekommen. Falls man nach der ersten Zuweisung noch einmal den Wert einer const definierten Variable ändern will erhält man einen Fehler.

Jedoch der Hauptunterschied von var zu let & const ist der, dass sowohl let als auch const definierte Variablen nur in dem jeweilig Scope verfügbar sind und nicht nach außen hin weiter gesetzt werden.

Hier ein paar Beispiele mit dem „alten“ var System und dem neuen let/const System.

var x = 10;
// Here x is 10
{
  var x = 2;
  // Here x is 2
}
// Here x is 2

var x = 10;
// Here x is 10
{
  let x = 2;
  // Here x is 2
}
// Here x is 10

Falls aber eine Variable „global“ mit let definiert wird ist diese auch in allen Funktion-Scopes erhältlich, also sozusagen eine „globale“ Variable:

let x = 10;

function myFunc(){
  console.log(x);
}

myFunc();

// Outputs 10

Jedoch darf in der Funktion myFunc nicht noch einmal ein let x ausgeführt werden:

let x = 10;

function myFunc(){
  console.log(x);
  let x = 2;
  console.log(x);
}

myFunc();
console.log(x);

VM611:4 Uncaught ReferenceError: Cannot access 'x' before initialization
    at myFunc (<anonymous>:4:15)
    at <anonymous>:9:1

Es darf nur „normal“ auf die x Variable zugegriffen werden:

let x = 10;

function myFunc(){
  console.log(x);
  x = 2;
  console.log(x);
}

myFunc();
console.log(x);

// Outputs
10
2
2

D.h. der Scope einer Variable wird in dem Moment definiert, wo let oder const ausgeführt wird, nicht in welchem Scope auf die Variable zugegriffen wird bzw. neue Werte in die Variable geschrieben werden.

Sources:
https://www.w3schools.com/js/js_scope.asp
https://www.w3schools.com/js/js_hoisting.asp