Was ist der Unterschied zwischen var und let in Javascript

Dies könnte dir stundenlanges Debuggen eines dummen Fehlers einsparen! Lass uns den folgenden Code anschauen:

// define some fruits
var orange = 'orange';
var apple = 'red';
if (orange === 'orange') {
  var orange = 'blue';
  // the scope is global
  let apple = 'green';
  // the scope is inside the if-block
  console.log(orange) // blue
  console.log(apple); // green
}
console.log(orange); // blue
console.log(apple); // red

Beim Programmieren in JavaScript deklarierst du Variablen, die Daten enthalten, auf die du später zugreiffen willst. Du hast zwei Möglichkeiten, um dieses Ziel zu erreichen. Du kannst deine Variable mit var oder let definieren. Die Konsolenausgaben des obigen Codes stellen eine gute Einführung in die Unterschiede zwischen diesen beiden Keywords dar. Lass uns aber eintauchen, um ein tieferes Verständnis der Unterschiede zu erhalten und warum eines besser ist als das andere.

Eine Orange sollte niemals blau sein. Den deine es so ist, schmeiss sie weg.

Die Unterschiede zwischen den beiden sind gering, aber wichtig. Denn du die Unterschiede nicht verstehst, kann dies Minuten oder gar Stunden für das Debuggen eines ansonsten fehlerfreien Programms bedeuten. Weiter werden wir über den grundlegenden Unterschied zwischen den beiden Methoden lernen während wir den obigen Code auseinander nehmen.

Vermeiden Sie Globals wo möglich

Dies ist nur eine, allerdings wird dies von den meisten Programmierern sowie dem World Wide Web Consortium (W3C) als eine Best Practice angesehen. Warum? Nun, dies sagt das W3C über Globals:

Globale Variablen und Funktionsnamen sind eine unglaublich schlechte Idee. Grund ist, dass jede JavaScript Datei, die in eine Seite (oder Programm) eingebunden ist, im selben Scope läuft. Wenn du globale Variablen und Funktionen in deinem Code hast, Scripts die danach inkludiert werden und die gleichen Variablen und Funktionsnamen hat, werden deine Variablen und Funktionen überschreiben.

Ausserdem ist es einfach nicht stilvoll. Du willst stilvoll sein, oder?

Es gibt viele Möglichkeiten, die Verwendung globaler Variablen zu vermeiden. Einige der Ansätze, die du zur Vermeidung von Globals ergreifen kannst, erfordern eine nicht unerhebliche Menge an Nachdenken, andere jedoch nicht. Wir beginnen einfach.

Eine der einfachsten Methoden, um sich in die richtige Richtung zu bewegen, ist var nicht mehr zu verwenden. Ja, einfach fallen lassen. Wenn du mit dem Lesen fertig bist, wirst du gedrängt fühlen, alle verwendeten var mit let zu ersetzen. Aus Gründen, die wir weiter unten besprechen werden, kann es zu Fehlern und unerwartetem Verhalten kommen, aber schlussendlich wirst du mit deinem Code zufriedener sein.

var

Bevor wir etwas über let erfahren, schauen wir uns var an. Wenn Sie eine Variable mit var definieren, ist der Gültigkeitsbereich dieser Variablen der umgebende Ausführungskontext. Dieser Ausführungskontext kann entweder ein Funktionsraum oder der globale Raum sein.

{
var salutation = 'hi';
console.log(salutation); // hi
console.log(this.salutation); // hi
function runModule() {
  var salutation = 'hola';
  if (1 == 1) {
    console.log(salutation); // hola
  }
}

runModule();
console.log(salutation); // hi
if (1 == 1) {
  var salutation = 'cheers';
  console.log(salutation) // cheers
  if (2 == 2) {
    var salutation = 'cheers again'
    console.log(salutation) // cheers again
  }
  console.log(salutation) // cheers again
}
console.log(salutation); // cheers again
salutation = 'bye'
console.log(salutation); // bye
console.log(this.salutation); // bye
}

Der obige Code ist ein gutes Beispiel wie sich Variablen die mit var definiert wurden verhalten. Bemerke dass die salutation Variable die in der runModule() Methode deklariert wurde im Definitionsbereich der Methode bleibt. Dies ist super. Schau dir nun aber die salutation Variable, die im if Statement mit var deklariert wurde. Sie kolidiert mit der ersten salutation Variable, die zu Beginn des Code Blocks deklariert wurde. Warum? Weil beide variablen im globalen Definitionsbereich erstellt wurden und nicht in einem Funktionsblock eingeschlossen. Das var Keyword macht nichts um die beiden Deklarationen von einer Kollision zu bewahren. Du könntest einfach einen anderen Namen für die zweite Variable im if Block verwenden, aber manchmal muss man einfach einen Variabelnamen wiederverwenden. Gestatten: let

let

Hier ist warum das let Keyword einen besseren Weg ist um deine Variablen zu deklarieren: anders als var erstellte es keine Property im globalen Scope unabhängig wo du es definierst. Warte, es gibt mehr!

Wenn du eine Variable mit let erstellst, wird dessen Scope  der Block sein in dem du sie deklarierst. Der Block kann eine Funktion, if Statement, switch Statement, while Loop oder ein anderer Block sein der in JavaScript existiert. Das bedeutet, dass der Wert der Variable, die mit let definiert wurde nicht aus dem Block entweichen kann, in dem sie deklariert wurde. Dies ist wunderbar, denn es löst das Problem, das ich im Ende des var Abschnitts angesprochen habe. Lass uns nun dasselbe Beispiel von oben nochmals anschauen.

{
let salutation = 'hi';
console.log(salutation); // hi
console.log(this.saluation); // undefined

function runModule() {
  let salutation = 'hola';
  if (1 == 1) {
    console.log(salutation); // hola
  }
}

runModule();
console.log(salutation); // hi
if (1 == 1) {
  let salutation = 'cheers';
  console.log(salutation) // cheers
  if (2 == 2) {
    let salutation = 'cheers again'
    console.log(salutation) // cheers again
  }
  console.log(salutation) // cheers
}
console.log(salutation); // hi
salutation = 'bye'
console.log(salutation); // bye
console.log(this.salutation); // undefined
}

Siehst du den Unterschied? Mit let, die salutation Variable ist strikt an den Block gebunden in dem sie erstellt wurde. Wenn zwei Variablen mit den gleichen Namen deklariert werden und die zweite in einem Sub-Scope der ersten, die zweite Variable wird den Wert der ersten nicht überschreiben; dies ist offensichtlich im zweiten und dritten if Statement. Wie bereits bemerkt, die salutation Variable, deklariert mit let, kreiert keine Property im globalen Objekt. Dies ist warum console.log(this.salutation) ‚undefined‘ ausgiebt.

Eines solltest du selber ausprobieren: Redeklariere eine Variable mit var und beobachte dass nichts kaputt geht; mach anschliessend dasselbe mit let und ein Syntaxerror wird ausgegeben wie es auch sein soll. Letzteres ist das gewünschte Verhalten falls du eine vernünftige Person bist, die es nicht geniesst nach einem Bug im Heuhaufen zu suchen.

Let the var be gone

Hier hast du es. Fahren Sie fort und befreie dich und deinen Javascript-Code von dem Keyword var. Es gibt noch mehr Nuancen, also vergewissere dich, dass du dir Mozzillas Dokumentation anschaust.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: