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 letund const, das für die Variablendeklaration verwendet werden kann. Die Frage ist, was unterscheidet sie von dem guten alten, vardas 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, letund 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 varherrschten Erklärungen. Es gibt jedoch Probleme im Zusammenhang mit Variablen, mit denen deklariert varwurde. 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. varDeklarationen haben einen globalen Gültigkeitsbereich oder einen funktionalen / lokalen Gültigkeitsbereich.
Der Bereich ist global, wenn eine varVariable außerhalb einer Funktion deklariert wird. Dies bedeutet, dass jede Variable, die varaußerhalb eines Funktionsblocks deklariert ist, für die Verwendung im gesamten Fenster verfügbar ist.
varist 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 greeterist der Gültigkeitsbereich global, da er außerhalb einer Funktion existiert, während der helloFunktionsumfang festgelegt ist. Wir können also nicht helloauß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 hellonicht 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 varVariablen 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 > 3return true ist, greeterwird neu definiert "say Hello instead". Dies ist zwar kein Problem, wenn Sie wissentlich greeterneu definiert werden möchten , es wird jedoch zu einem Problem, wenn Sie nicht erkennen, dass eine Variable greeterbereits zuvor definiert wurde.
Wenn Sie greeterin 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 letund constsind notwendig.
Lassen
letwird jetzt für die Variablendeklaration bevorzugt. Es ist keine Überraschung, da es sich um eine Verbesserung der varErklä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 helloaußerhalb seines Blocks (der geschweiften Klammern, in denen er definiert wurde) einen Fehler zurückgibt. Dies liegt daran, dass letVariablen einen Blockbereich haben.
let kann aktualisiert, aber nicht neu deklariert werden.
Ebenso varkann eine mit deklarierte Variable letinnerhalb ihres Gültigkeitsbereichs aktualisiert werden. Im Gegensatz dazu varkann eine letVariable 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 leteine bessere Wahl als var. Bei der Verwendung letmü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, varnicht auf.
Heben von lassen
Ebenso varwerden letErklärungen nach oben gehoben. Anders als bei varder Initialisierung als undefinedwird das letSchlüsselwort nicht initialisiert. Wenn Sie also versuchen, eine letVariable vor der Deklaration zu verwenden, erhalten Sie eine Reference Error.
Const
Variablen, die mit constkonstanten Werten deklariert wurden . constErklärungen haben einige Ähnlichkeiten mit letErklä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:
vardeclarations are globally scoped or function scoped whileletandconstare block scoped.varvariables can be updated and re-declared within its scope;letvariables can be updated but not re-declared;constvariables can neither be updated nor re-declared.- They are all hoisted to the top of their scope. But while
varvariables are initialized withundefined,letandconstvariables are not initialized. - While
varandletcan be declared without being initialized,constmust be initialized during declaration.
Got any question or additions? Please let me know.
Thank you for reading :)