Mit ES2015 (ES6) wurden viele glänzende neue Funktionen herausgebracht. Und jetzt, seit 2020, wird davon ausgegangen, dass sich viele JavaScript-Entwickler mit diesen Funktionen vertraut gemacht und damit begonnen haben.
Obwohl diese Annahme teilweise zutrifft, ist es dennoch möglich, dass einige dieser Funktionen einigen Entwicklern ein Rätsel bleiben.
Eine der Funktionen, die mit ES6 geliefert wurden, ist das Hinzufügen von let
und const
, das für die Variablendeklaration verwendet werden kann. Die Frage ist, was unterscheidet sie von dem guten alten, var
das wir benutzt haben? Wenn Ihnen dies immer noch nicht klar ist, ist dieser Artikel genau das Richtige für Sie.
In diesem Artikel diskutieren wir var
, let
und const
in Bezug auf Umfang, Verwendung und das Hochziehen. Beachten Sie beim Lesen die Unterschiede zwischen ihnen, auf die ich hinweisen werde.
Var
Vor dem Aufkommen von ES6 var
herrschten Erklärungen. Es gibt jedoch Probleme im Zusammenhang mit Variablen, mit denen deklariert var
wurde. Aus diesem Grund mussten neue Wege zur Deklaration von Variablen entstehen. Lassen Sie uns zunächst mehr verstehen var
, bevor wir diese Themen diskutieren.
Geltungsbereich von var
Umfang bedeutet im Wesentlichen, wo diese Variablen zur Verwendung verfügbar sind. var
Deklarationen haben einen globalen Gültigkeitsbereich oder einen funktionalen / lokalen Gültigkeitsbereich.
Der Bereich ist global, wenn eine var
Variable außerhalb einer Funktion deklariert wird. Dies bedeutet, dass jede Variable, die var
außerhalb eines Funktionsblocks deklariert ist, für die Verwendung im gesamten Fenster verfügbar ist.
var
ist funktionsbezogen, wenn es innerhalb einer Funktion deklariert wird. Dies bedeutet, dass es verfügbar ist und nur innerhalb dieser Funktion zugegriffen werden kann.
Weitere Informationen finden Sie im folgenden Beispiel.
var greeter = "hey hi"; function newFunction() { var hello = "hello"; }
Hier greeter
ist der Gültigkeitsbereich global, da er außerhalb einer Funktion existiert, während der hello
Funktionsumfang festgelegt ist. Wir können also nicht hello
außerhalb einer Funktion auf die Variable zugreifen . Also, wenn wir das tun:
var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined
Wir erhalten einen Fehler, der darauf zurückzuführen ist, dass wir hello
nicht außerhalb der Funktion verfügbar sind.
var-Variablen können neu deklariert und aktualisiert werden
Dies bedeutet, dass wir dies im selben Bereich tun können und keinen Fehler erhalten.
var greeter = "hey hi"; var greeter = "say Hello instead";
und das auch
var greeter = "hey hi"; greeter = "say Hello instead";
Heben von var
Das Heben ist ein JavaScript-Mechanismus, bei dem Variablen und Funktionsdeklarationen vor der Codeausführung an den Anfang ihres Gültigkeitsbereichs verschoben werden. Dies bedeutet, dass wenn wir dies tun:
console.log (greeter); var greeter = "say hello"
es wird wie folgt interpretiert:
var greeter; console.log(greeter); // greeter is undefined greeter = "say hello"
Daher werden var
Variablen an die Spitze ihres Bereichs gehoben und mit einem Wert von initialisiert undefined
.
Problem mit var
Es gibt eine Schwäche, die damit einhergeht var
. Ich werde das folgende Beispiel verwenden, um zu erklären:
var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead"
Also, da times > 3
return true ist, greeter
wird neu definiert "say Hello instead"
. Dies ist zwar kein Problem, wenn Sie wissentlich greeter
neu definiert werden möchten , es wird jedoch zu einem Problem, wenn Sie nicht erkennen, dass eine Variable greeter
bereits zuvor definiert wurde.
Wenn Sie greeter
in anderen Teilen Ihres Codes verwendet haben, sind Sie möglicherweise überrascht über die Ausgabe, die Sie möglicherweise erhalten. Dies wird wahrscheinlich viele Fehler in Ihrem Code verursachen. Deshalb let
und const
sind notwendig.
Lassen
let
wird jetzt für die Variablendeklaration bevorzugt. Es ist keine Überraschung, da es sich um eine Verbesserung der var
Erklärungen handelt. Es löst auch das Problem var
, das wir gerade behandelt haben. Lassen Sie uns überlegen, warum dies so ist.
let is block scoped
Ein Block ist ein Codeabschnitt, der durch {} begrenzt ist. Ein Block lebt in geschweiften Klammern. Alles in geschweiften Klammern ist ein Block.
Eine in einem Block mit deklarierte Variable let
ist also nur für die Verwendung in diesem Block verfügbar. Lassen Sie mich dies anhand eines Beispiels erklären:
let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined
Wir sehen, dass die Verwendung hello
außerhalb seines Blocks (der geschweiften Klammern, in denen er definiert wurde) einen Fehler zurückgibt. Dies liegt daran, dass let
Variablen einen Blockbereich haben.
let kann aktualisiert, aber nicht neu deklariert werden.
Ebenso var
kann eine mit deklarierte Variable let
innerhalb ihres Gültigkeitsbereichs aktualisiert werden. Im Gegensatz dazu var
kann eine let
Variable in ihrem Bereich nicht erneut deklariert werden. Also, während dies funktionieren wird:
let greeting = "say Hi"; greeting = "say Hello instead";
Dies gibt einen Fehler zurück:
let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared
Wenn jedoch dieselbe Variable in verschiedenen Bereichen definiert ist, tritt kein Fehler auf:
let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi"
Warum gibt es keinen Fehler? Dies liegt daran, dass beide Instanzen als unterschiedliche Variablen behandelt werden, da sie unterschiedliche Bereiche haben.
Diese Tatsache trifft let
eine bessere Wahl als var
. Bei der Verwendung let
müssen Sie sich nicht darum kümmern, ob Sie zuvor einen Namen für eine Variable verwendet haben, da eine Variable nur innerhalb ihres Gültigkeitsbereichs existiert.
Da eine Variable innerhalb eines Bereichs nicht mehr als einmal deklariert werden kann, tritt das zuvor beschriebene Problem, das bei auftritt, var
nicht auf.
Heben von lassen
Ebenso var
werden let
Erklärungen nach oben gehoben. Anders als bei var
der Initialisierung als undefined
wird das let
Schlüsselwort nicht initialisiert. Wenn Sie also versuchen, eine let
Variable vor der Deklaration zu verwenden, erhalten Sie eine Reference Error
.
Const
Variablen, die mit const
konstanten Werten deklariert wurden . const
Erklärungen haben einige Ähnlichkeiten mit let
Erklärungen.
const declarations are block scoped
Like let
declarations, const
declarations can only be accessed within the block they were declared.
const cannot be updated or re-declared
This means that the value of a variable declared with const
remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const
, we can neither do this:
const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable.
nor this:
const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared
Every const
declaration, therefore, must be initialized at the time of declaration.
This behavior is somehow different when it comes to objects declared with const
. While a const
object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const
object as this:
const greeting = { message: "say Hi", times: 4 }
while we cannot do this:
const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable.
we can do this:
greeting.message = "say Hello instead";
This will update the value of greeting.message
without returning errors.
Hoisting of const
Just like let
, const
declarations are hoisted to the top but are not initialized.
So just in case you missed the differences, here they are:
var
declarations are globally scoped or function scoped whilelet
andconst
are block scoped.var
variables can be updated and re-declared within its scope;let
variables can be updated but not re-declared;const
variables can neither be updated nor re-declared.- They are all hoisted to the top of their scope. But while
var
variables are initialized withundefined
,let
andconst
variables are not initialized. - While
var
andlet
can be declared without being initialized,const
must be initialized during declaration.
Got any question or additions? Please let me know.
Thank you for reading :)