Eine Anleitung zum Heben von JavaScript-Variablen mit let und const

Neuen JavaScript-Entwicklern fällt es oft schwer, das einzigartige Verhalten des Variablen- / Funktions-Hebens zu verstehen.

Da wir später über var-, let- und const-Deklarationen sprechen werden, ist es wichtig, das variable Heben zu verstehen und nicht das funktionale Heben. Tauchen wir ein!

Was ist variables Heben?

Die JavaScript-Engine behandelt alle Variablendeklarationen mit "var" so, als ob sie am Anfang eines Funktionsbereichs (wenn innerhalb einer Funktion deklariert) oder eines globalen Bereichs (wenn außerhalb einer Funktion deklariert) deklariert wären, unabhängig davon, wo die eigentliche Deklaration erfolgt. Dies ist im Wesentlichen "Heben".

Variablen könnten also tatsächlich vor ihrer Deklaration verfügbar sein.

Lassen Sie es uns in Aktion sehen.

// OUTPUT: undefiniert
console.log (Form);
var shape = "square";
// OUTPUT: "square"
console.log (Form);

Wenn Sie aus C-basierten Sprachen stammen, wird beim Aufrufen des ersten console.log ein Fehler ausgegeben, da die variable Form zu diesem Zeitpunkt noch nicht definiert wurde. Der JavaScript-Interpreter blickt jedoch nach vorne und "hebt" alle Variablendeklarationen nach oben, und die Initialisierung bleibt an derselben Stelle.

Folgendes passiert hinter den Kulissen:

// Deklaration wird oben hochgezogen
var Form;
// OUTPUT: undefiniert
console.log (Form);
Form = "Quadrat";
// OUTPUT: "square"
console.log (Form);

Hier ist ein weiteres Beispiel in einem Funktionsumfang, um die Dinge klarer zu machen:

Funktion getShape (Bedingung) {
    // shape existiert hier mit einem Wert von undefined
    // OUTPUT: undefiniert
    console.log (Form);
    if (Bedingung) {
        var shape = "square";
        // ein anderer Code
        Form zurückgeben;
    } else {
        // shape existiert hier mit einem Wert von undefined
        falsch zurückgeben;
    }
}

Im obigen Beispiel sehen Sie, wie die Shape-Deklaration oben in der Funktion getShape () angezeigt wird. Dies liegt daran, dass if / else-Blöcke keinen lokalen Bereich erstellen, wie er in anderen Sprachen angezeigt wird. Ein lokaler Bereich ist im Wesentlichen der Funktionsbereich in JavaScript. Daher ist die Form außerhalb des if-Blocks und innerhalb der Funktion mit einem undefinierten Wert überall zugänglich.

Dieses Standardverhalten von JavaScript weist eine Reihe von Vor- und Nachteilen auf. Wenn Sie diese nicht vollständig verstehen, kann dies zu subtilen, aber gefährlichen Fehlern in unserem Code führen.

Geben Sie Erklärungen auf Blockebene ein!

ES6 führte Scoping-Optionen auf Blockebene ein, um Entwicklern mehr Kontrolle und Flexibilität über den Lebenszyklus einer Variablen zu bieten.

Deklarationen auf Blockebene werden in Block- / Lexikonbereichen erstellt, die in einem Block "{}" erstellt werden.

Erklärungen abgeben

Diese Syntax ähnelt var. Ersetzen Sie var einfach durch let, um eine Variable zu deklarieren, deren Gültigkeitsbereich nur dieser Codeblock ist.

Platzieren Sie Ihre Let-Deklarationen oben in einem Block, damit sie im gesamten Block verfügbar sind.

Zum Beispiel:

Funktion getShape (Bedingung) {
// Form existiert hier nicht
// console.log (Form); => ReferenceError: Form ist nicht definiert
if (Bedingung) {
        lass shape = "square";
        // ein anderer Code
        Form zurückgeben;
    } else {
        // Auch hier gibt es keine Form
        falsch zurückgeben;
    }
}

Beachten Sie, dass die Form nur innerhalb des if-Blocks vorhanden ist und beim Zugriff außerhalb des if-Blocks einen Fehler auslöst, anstatt wie in unserem vorherigen Fall mit var-Deklarationen undefiniert auszugeben.

ANMERKUNG: Wenn in einem Bereich mit var bereits ein Bezeichner definiert wurde, wird bei Verwendung desselben Bezeichners in einer let-Deklaration innerhalb desselben Bereichs ein Fehler ausgegeben.
Es wird auch kein Fehler ausgegeben, wenn eine let-Deklaration eine Variable mit demselben Namen wie die Variable im äußeren Gültigkeitsbereich erstellt. (Dieser Fall gilt auch für const-Deklarationen, über die wir gleich sprechen werden.)

Zum Beispiel:

var shape = "square";

Form lassen = "Rechteck";
// SyntaxError: Der Bezeichner 'shape' wurde bereits deklariert

und:

var shape = "square";
if (Bedingung) {
    // wirft keinen Fehler
    Form lassen = "Rechteck";
    // mehr Code
}
// Kein Fehler

const-Deklarationen

Die Deklarationssyntax ist ähnlich wie bei let & var, der Lebenszyklus ist derselbe wie bei let. Aber du musst einige Regeln befolgen.

Bindungen, die mit const deklariert wurden, werden als Konstanten behandelt. Daher können ihnen nach ihrer Definition keine neuen Werte zugewiesen werden. Aus diesem Grund muss jede const-Deklaration zum Zeitpunkt der Deklaration initialisiert werden.

Zum Beispiel:

// gültig
const shape = "triangle";
// Syntaxfehler: fehlende Initialisierung
konstante Farbe;
// TypeError: Zuordnung zur konstanten Variablen
Form = "Quadrat"

Die Eigenschaften eines Objekts können jedoch geändert werden!

const shape = {
    Name: "Dreieck",
    Seiten: 3
}
// FUNKTIONIERT
shape.name = "square";
Formseiten = 4;
// SyntaxError: Ungültiger Initialisierer der Shorthand-Eigenschaft
shape = {
    Name: "Sechseck",
    Seiten: 6
}

Im obigen Beispiel können wir sehen, dass nur die Eigenschaften des Formobjekts geändert werden können, da wir nur ändern, was die Form enthält und nicht, an was sie gebunden ist.

Zusammenfassend lässt sich sagen, dass const die Änderung der Bindung als Ganzes verhindert und nicht den Wert, an den sie gebunden ist.

Hinweis: Eigenschaften können geändert werden. Verwenden Sie für echte Unveränderlichkeit Immutable.js oder Mori.

Die zeitliche tote Zone

Wir wissen jetzt, dass der Zugriff auf let- oder const-Variablen, bevor sie deklariert werden, einen ReferenceError auslöst. Dieser Zeitraum zwischen dem Eintreten in den Geltungsbereich und der Angabe, wo auf sie nicht zugegriffen werden kann, wird als zeitliche Totzone bezeichnet.

Beachten Sie, dass "Temporale Totzone" in der ECMAScript-Spezifikation nicht ausdrücklich erwähnt wird. Es ist nur ein beliebter Begriff bei Programmierern.

Ich persönlich empfehle Ihnen, immer const zu verwenden, da dies zu weniger Fehlern führt. Ich bin noch keiner Situation begegnet, in der ich var verwenden musste.

Verwenden Sie let in der Regel nur für Schleifenzähler oder nur, wenn Sie wirklich eine Neuzuweisung benötigen. Verwenden Sie an allen anderen Stellen const. Persönlich habe ich Schleifen für filter (), map () & reduction () über Bord geworfen. Du solltest auch.

Lesen Sie hierzu unbedingt Teil 2 zum Thema Function Hoisting und wichtige Interviewfragen zum Thema Heben in JS.

Klicken Sie hier, um meinen Artikel über einige der nützlichen neuen Funktionen in ES6 zu lesen, die sich auf Funktionen beziehen.

Bis zum nächsten Mal. Frieden! ️️