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 xvar x; // Declare x
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x; // Display x in the elementDies 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 yvar x = 5; // Initialize x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
var y = 7; // Initialize yIm 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 yvar 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 2var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10Falls 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 10Jedoch 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:1Es 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
2D.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
