Unterschied zwischen let und var in JavaScript

Dieser Tutorial-Artikel erklärt die tatsächliche Funktionsweise der beiden Schlüsselwörter var und let in JavaScript sowie ihre wichtigsten Unterschiede.

Wie andere Programmiersprachen verfügt JavaScript über Variablen zum Speichern von Werten und Daten. Und in JavaScript verwenden wir sowohl die Schlüsselwörter let als auch var, um Variablen zu deklarieren.

Einige Leute denken, dass diese beiden Schlüsselwörter austauschbar verwendet werden können, aber das stimmt nicht. Die Hauptunterschiede zwischen den beiden können zu schwerwiegenden Fehlern in unserer Programmierung führen.

Vor dem ES6-Update auf JavaScript gab es nur eine Möglichkeit, Variablen und Konstanten in JavaScript zu deklarieren. Aber seit dem ES6-Update haben wir jetzt die Schlüsselwörter let und const, die zum Deklarieren von Variablen und Konstanten verwendet werden.

Einer der Hauptgründe für das Hinzufügen der Schlüsselwörter let und const zu JavaScript war, dass die mit dem Schlüsselwort var deklarierte Variable nicht der Block war, in dem sie deklariert wurde. Stattdessen war sein Umfang auf die Funktion beschränkt, was einige Programmierprobleme verursachte, auf die wir im letzten Teil des Artikels eingehen werden.

Sehen wir uns dieses Codesegment zum besseren Verständnis an.

function example() {
  for (let i = 0; i < 10; i++) console.log(i);

  console.log(i);
}
example();

In diesem Codesegment haben wir die Variable i in der for-Schleife deklariert und eine console.log verwendet, um die Werte der Variablen abzurufen. Wir haben die Klammern {} nach der for-Schleife nicht verwendet, daher ist der Block für die for-Schleife nur die allernächste Zeile.

Wir haben jedoch eine zusätzliche console.log verwendet, um den Wert von i anzuzeigen. Aber die zweite console.log kann den Wert der Variable i nicht abrufen und zeigt den folgenden Fehler:

ReferenceError: i is not defined

Dieser Fehler trat auf, weil der Geltungsbereich der Variable i nur für den for-Schleifenblock galt und außerhalb des Blocks nicht zugegriffen werden konnte. Auf diese Weise können wir die Variable also nicht außerhalb des Blocks verwenden, da die mit dem Schlüsselwort let deklarierte Variable nur auf den Block beschränkt ist.

Um den Unterschied zwischen let und var zu sehen, schauen Sie sich das folgende Codesegment an:

function example() {
  for (var i = 0; i < 10; i++) console.log(i);

  console.log(i);
}
example();

Im obigen Code können wir beobachten, dass wir das Schlüsselwort var anstelle des Schlüsselworts let verwendet haben.

Während im vorherigen Beispiel die beiden gleichen console.log bleiben, wird in diesem Fall auch die zweite console.log ausgegeben. Schauen wir uns also die Ausgabe an:

0
1
2
3
4
5
6
7
8
9
10

Das erste console.log gab die Werte von 0 bis 9 aus, ebenso die Bedingung i<10.

Aber wir können 10 als eine Ausgabe sehen, die sicherlich nicht aus der ersten console.log stammt. Daher ist diese 10 die zweite console.log-Ausgabe.

Das Problem hierbei ist, dass die Variable i innerhalb ihres Blocks verwendet werden sollte, aber da sie von console.log außerhalb des Blocks aufgerufen wurde, bedeutet dies, dass sie ihren Gültigkeitsbereich überschritten hat.

Es beweist, dass die Schlüsselwörter let und var verwendet werden, um Variablen zu deklarieren, aber das Schlüsselwort var deklariert Variablen, die in Bezug auf ihren Geltungsbereich auf den Block beschränkt sind. Der Gültigkeitsbereich des Schlüsselworts var ist jedoch auf die Funktion beschränkt.

Wenn wir eine Variable außerhalb der Funktion deklarieren, gibt es zwischen let und var einen weiteren großen Unterschied. Wenn wir das Schlüsselwort let ausserhalb der Funktion verwenden, wird eine lokale Variable erstellt, auf die von aussen nicht zugegriffen werden kann.

Aber falls wir das Schlüsselwort var verwenden, wird es zu einer globalen Variablen. Schauen wir uns das folgende Codesegment an:

var color = 'blue';
let model = '2021';

Hier wurden in diesem Codesegment zwei Variablen deklariert, eine mit dem Schlüsselwort let und die andere mit dem Schlüsselwort var. Die mit dem Schlüsselwort var deklarierte Variable ist also eine globale Variable und wird im Browser an das Fensterobjekt angehängt.

In Browsern haben wir ein Fensterobjekt, das viele Eigenschaften und Methoden hat und sehr komplex ist. Die Entwickler von Front-End-Apps kennen das window objekt weitgehend, da sie viel damit arbeiten.

Jedes Mal, wenn wir das Schlüsselwort var ausserhalb einer Funktion verwenden, wird die Variable zu einer globalen Variable und wird selbst an das window objekt angehängt und kann vom Fensterobjekt aus aufgerufen werden. In diesem Fall würde darauf zugegriffen, da window.color den Wert in der color-Variablen anzeigt, die blue ist.

Wir verwenden Bibliotheken von Drittanbietern und deklarieren Variablen außerhalb der Funktion mit dem Schlüsselwort var. Wenn die Bibliothek des Drittanbieters eine Variable mit demselben Namen wie unsere Variable hätte, würde diese Variable unsere Variable überschreiben.

Dies ist ein weiterer Grund für uns, dem window objekt nichts hinzuzufügen; Wir meinen, in solchen Fällen das Schlüsselwort var zu vermeiden.