Heben in JavaScript

Hoisting ist ein Verhalten, bei dem Variablen- und Funktionsdeklarationen an den Anfang ihres enthaltenden Bereichs (entweder des globalen Bereichs oder des Funktionsbereichs) zuvor verschoben (oder „angehoben“) werden Der Code wird ausgeführt. Das bedeutet, dass Sie Variablen und Funktionen verwenden können, bevor sie tatsächlich im Code deklariert werden.

Heben in Variablen

var

• Mit var deklarierte Variablen werden an die Spitze ihres Gültigkeitsbereichs gehoben, ihre Werte werden jedoch erst an der Stelle im Code initialisiert, an der die Zuweisung erfolgt.

console.log(x); // undefined
var x = 5;
console.log(x); // 5

let und const

• Mit let und const deklarierte Variablen werden ebenfalls angehoben, befinden sich jedoch in einer „zeitlichen Totzone“, bis ihre Deklarationen erreicht werden. Der Zugriff auf sie vor ihrer Deklaration führt zu einem ReferenceError.

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;

// block scope
{
  let x = 5;
}

console.log(x); // ReferenceError: x is not defined

Heben in Funktionen

Traditionelle Funktion

• Funktionsdeklarationen werden vollständig angehoben, was bedeutet, dass sowohl die Deklaration als auch der Funktionskörper an den oberen Rand des Gültigkeitsbereichs verschoben werden. Dadurch können Sie eine Funktion aufrufen, bevor sie im Code deklariert wird.

sayHello(); // "Hello!"
function sayHello() {
  console.log("Hello!");
}

• Im Gegensatz dazu werden Funktionsausdrücke (bei denen eine Funktion einer Variablen zugewiesen wird) nur als Variablen gehisst, sodass ein Aufruf vor der Initialisierung der Variablen zu undefiniert oder einem TypeError führt.

greet(); // TypeError: greet is not a function
var greet = function () {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

Pfeilfunktion

• Im Gegensatz dazu werden Funktionsausdrücke (bei denen eine Funktion einer Variablen zugewiesen wird) nur als Variablen gehisst, sodass ein Aufruf vor der Initialisierung der Variablen zu undefiniert oder einem TypeError führt.

greet(); // TypeError: greet is not a function
var greet = () => {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

Temporale Totzone (TDZ)

Die temporale Totzone (TDZ) existiert für Variablen, die mit let und const deklariert wurden, da JavaScript so konzipiert ist, dass Sie nicht auf diese Variablen zugreifen, bevor sie deklariert und initialisiert werden.

Warum verhalten sich var und let, const beim Heben unterschiedlich?

• Das liegt an der historischen Entwicklung von JavaScript.
• Ursprünglich wurde JavaScript für Benutzer entwickelt, die keine Entwickler sind, und die Hauptverwendung von JavaScript bestand darin, kleine interaktive Elemente zur Webseite hinzuzufügen.
• Var unterstützt also nur den Funktionsumfang. Auch zu diesem Zeitpunkt gab es keinen Blockbereich.
• Aber in der späteren Entwicklung von JavaScript wurde es komplizierter, mit var zu arbeiten und Fehler zu beheben.
• Um JavaScript mit anderen modernen Sprachen konkurrenzfähig zu machen, wurden weitere Funktionen wie let, const, Pfeilfunktionen, ES6-Methoden usw. hinzugefügt.

Warum var nicht wie let und const aktualisiert wird

• Das liegt an der Abwärtskompatibilität.
• Zu dieser Zeit wurde JavaScript von vielen Unternehmen häufig verwendet, sodass Aktualisierungen oder Änderungen an vorhandenen Funktionen dazu führen würden, dass die Codebasis beschädigt wird.
• Daher wurden moderne Features individuell hinzugefügt.

Häufige Fragen im Vorstellungsgespräch

• Was ist Hochziehen in JavaScript?
• Was wird in JavaScript gehisst und was nicht?
• Was ist der Unterschied zwischen var, let und const in Bezug auf das Heben?
• Was ist die zeitliche Totzone (TDZ) in JavaScript?
• Können Sie das Heben mit Funktionsdeklarationen im Vergleich zu Funktionsausdrücken erklären?
• Was ist Heben in ES6-Modulen?
• Warum sollten wir uns nicht auf das Heben in realem Code verlassen?

Zusammenfassung

• Hoisting ist das Standardverhalten in JavaScript, bei dem Variablen- und Funktionsdeklarationen während der Kompilierungsphase an den Anfang ihrer jeweiligen Bereiche verschoben werden.
• Das Hochziehen funktioniert nur für Variablen, die mit var und herkömmlichen Funktionen deklariert wurden, nicht für Let-, Const- und Arrow-Funktionen.
• Nur die Funktionsdeklaration wird angehoben, sodass herkömmliche Funktionen funktionieren. Wenn die Funktion jedoch einer Variablen zugewiesen wird, kann sie erst aufgerufen werden, wenn sie definiert ist.
• Der Grund, warum var- und traditionelle Funktionen hochgezogen werden, let-, const- und Pfeilfunktionen jedoch nicht, liegt darin, dass JavaScript in der Anfangsphase hauptsächlich für kleine UI-Interaktionen verwendet wurde.
• Aber später, als JavaScript in großem Umfang zum Erstellen von Anwendungen in Unternehmen verwendet wurde, wurde es schwieriger, Fehler nur im globalen Umfang zu beheben.
• Daher wurden in zukünftigen Updates weitere Sicherheitsbedenken berücksichtigt.
• Außerdem hätte die Aktualisierung bestehender Funktionen zu einer Beschädigung der Codebasis geführt, sodass neue Funktionen separat hinzugefügt wurden.