JavaScript - Funktionserhebung: Ein Anfängerleitfaden

Hallo da draußen, zukünftige JavaScript-Zauberer! Heute tauchen wir ein in ein faszinierendes Aspekt von JavaScript, der Neulinge oft überrascht: Funktionserhebung (Function Hoisting). Keine Sorge, wenn es sich etwas mysteriös anhört – bis zum Ende dieser Lektion werdet ihr Funktionen erheben wie ein Profi!

Was ist Funktionserhebung?

Bevor wir ins Detail gehen, lassen Sie uns mit einer einfachen Definition beginnen:

Funktionserhebung ist ein Verhalten in JavaScript, bei dem Funktionsdeklarationen an die Oberseite ihres Gültigkeitsbereichs verschoben werden, bevor der Code ausgeführt wird.

Nun, ich weiß, was ihr denkt: "Aber Lehrer, was bedeutet das überhaupt?" Lassen wir uns mit einigen Beispielen darstellen, ja?

Beispiel 1: Die magisch erscheinende Funktion

sayHello(); // Das funktioniert!

function sayHello() {
console.log("Hallo, Welt!");
}

Wenn du neu im Programmieren bist, könntest du jetzt verwirrt sein. "Wie können wir eine Funktion aufrufen, bevor sie definiert ist?" fragst du.Nun, meine lieben Schüler, das ist die Magie der Funktionserhebung!

In diesem Beispiel "erhebt" JavaScript die gesamte sayHello-Funktion an die Oberseite ihres Gültigkeitsbereichs. Dahinter ist es, als wäre der Code so geschrieben:

function sayHello() {
console.log("Hallo, Welt!");
}

sayHello(); // Jetzt macht das mehr Sinn, oder?

Beispiel 2: Die Geschichte von zwei Funktionen

Lassen wir es ein bisschen spannender machen mit einem anderen Beispiel:

greeting("John"); // Ausgabe: "Hallo, John!"
farewell("John"); // Fehler: farewell ist keine Funktion

function greeting(name) {
console.log("Hallo, " + name + "!");
}

var farewell = function(name) {
console.log("Auf Wiedersehen, " + name + "!");
};

In dieser Geschichte von zwei Funktionen sehen wir unterschiedliche Verhaltensweisen. Die greeting-Funktion funktioniert prima, wenn sie vor ihrer Deklaration aufgerufen wird, dank der Erhebung. Aber arme farewell wirft einen Fehler. Warum? Weil nur die Variablendeklaration var farewell erhoben wird, nicht die Funktionszuweisung.

Die Regeln der Funktionserhebung

Nun, da wir die Funktionserhebung in Aktion gesehen haben, lassen uns einige Grundregeln niederlegen:

1. Funktionsdeklarationen werden vollständig erhoben.
2. Variablendeklarationen werden erhoben, aber nicht ihre Zuweisungen.
3. Funktionsausdrücke (wenn du eine Funktion einer Variablen zuweist) werden nicht erhoben.

Lassen wir diese Regeln mit mehr Beispielen erkunden!

Beispiel 3: Deklaration vs. Ausdruck

// Das funktioniert
hello();

function hello() {
console.log("Hallo von einer Funktionsdeklaration!");
}

// Das funktioniert nicht
goodbye(); // Fehler: goodbye ist keine Funktion

var goodbye = function() {
console.log("Auf Wiedersehen von einem Funktionsausdruck!");
};

Hier ist hello eine Funktionsdeklaration, also wird sie vollständig erhoben. Aber goodbye ist ein Funktionsausdruck,also wird nur der Teil var goodbye erhoben, nicht die Funktion selbst.

JavaScript Variablerhebung

Nun, da wir die Funktionserhebung abgedeckt haben, schauen wir uns schnell die Variablerhebung an. Es ist ein verwandtes Konzept, das wichtig zu verstehen ist.

Beispiel 4: Das mysteriöse Undefined

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

In diesem Beispiel wird die Deklaration von x erhoben, aber nicht ihre Zuweisung. Daher gibt die erste console.log undefined aus, während die zweite die zugewiesene Wert anzeigt.

Beispiel 5: Let und Const - Die Neuen Kids auf dem Block

console.log(a); // Fehler: Kann 'a' nicht vor der Initialisierung zugreifen
let a = 10;

console.log(b); // Fehler: Kann 'b' nicht vor der Initialisierung zugreifen
const b = 20;

Mit der Einführung von let und const in ES6 gibt es eine neue Verhaltensweise. Diese Deklarationen werden erhoben, aber nicht initialisiert. Dies erstellt eine "temporäre Totzone", in der man auf die Variable vor ihrer Deklaration nicht zugreifen kann.

Praktische Auswirkungen und Best Practices

Nun, da wir verstehen, wie Erhebung funktioniert, was bedeutet das für uns als Entwickler?

1. Deklarieren Sie immer Ihre Variablen an der Oberseite ihres Gültigkeitsbereichs. Das macht Ihren Code klarer und verhindert unerwartetes Verhalten.

2. Verwenden Sie Funktionsdeklarationen für Funktionen, die Sie im gesamten Code verwenden möchten. Ihr Erhebungsverhalten kann vorteilhaft sein.

3. Seien Sie vorsichtig mit Funktionsausdrücken. Denken Sie daran, dass sie nicht wie Funktionsdeklarationen erhoben werden.

4. Initialisieren Sie bei Unsicherheit gemeinsam. Dies beseitigt jegliche Unklarheit über Variablenwerte.

5. Erwägen Sie die Verwendung von let und const anstelle von var. Sie bieten eine vorhersehbarere Gültigkeitsbereichsverhalten.

Hier ist eine Tabelle, die das Erhebungsverhalten verschiedener Deklarationen zusammenfasst:

Deklarationstyp	Erhoben?	Initialisiert?
Funktionsdeklaration	Ja	Ja
var	Ja	Undefined
let	Ja	Nein (TDZ)
const	Ja	Nein (TDZ)
Funktionsausdruck	Nein	Nein

Schlussfolgerung

Und da habt ihr es, meine aufstrebenden Programmierer! Wir haben die Geheimnisse der Funktionserhebung in JavaScript gelüftet. Denkt daran, dass das Verständnis dieser Konzepte nicht nur darum geht, die Regeln zu kennen – es geht darum, saubereren, vorhersehbaren Code zu schreiben.

Während ihr eure JavaScript-Reise fortsetzt, werdet ihr viele weitere faszinierende (und manchmal verwirrende) Features kennenlernen. Aber lasst euch nicht entmutigen! Jedes Mal, wenn ihr etwas Neues lernt, kommt ihr einem Schritt näher, um ein JavaScript-Ninja zu werden.

Weiter üben, weiter codieren und vor allem, weiter Fragen stellen. Schließlich gibt es nur dumme Fragen, die man nicht stellt!

Bis下次见面, viel Spaß beim Coden!

Credits: Image by storyset