Geekly articles weekly

Wann man var, let und const in Javascript verwendet [Übersetzung aus dem Artikel von Tyler McGinnis]

Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels "var vs let vs const in JavaScript" von Tyler McGinnis.

Bild

In diesem Artikel lernen Sie zwei neue Möglichkeiten zum Erstellen von Variablen in Javascript (ES6) kennen: let und const. In diesem Artikel werden die Unterschiede zwischen var , let und const sowie verwandte Themen wie "Funktionsumfang versus Blockumfang", "Erhöhen" von Variablen und Unveränderlichkeit untersucht.

Wenn Sie ein Video bevorzugen, schauen Sie sich dieses an (Original in Englisch):


ES2015 (oder ES6) führte uns in zwei neue Möglichkeiten ein, Variablen zu erstellen: let und const . Bevor wir uns jedoch mit den Unterschieden zwischen var , let und const befassen, sollten Sie zunächst einige Themen kennen. Dies sind die Deklaration von Variablen und deren Initialisierung, Umfang (ein besonderer Umfang der Funktion) und "Erhöhen".

Variablen deklarieren und initialisieren


Eine Variablendeklaration führt einen neuen Bezeichner ein.

var declaration

Oben erstellen wir einen neuen Bezeichner, den wir "Deklaration" genannt haben. In Javascript werden Variablen beim Erstellen mit einem undefinierten Wert initialisiert. Dies bedeutet, dass wir undefiniert werden , wenn wir versuchen, unsere Deklarationsvariable auszugeben.

 var declaration console.log(declaration)

Also haben wir die Deklarationsvariable abgeleitet und wurden undefiniert .

Im Vergleich zum Deklarieren einer Variablen ist das Initialisieren einer Variablen das erste Mal, dass Sie den Wert dieser Variablen festlegen.

 var declaration console.log(declaration) // undefined declaration = '  '

Und so haben wir hier die Deklarationsvariable initialisiert, indem wir eine Zeichenfolge darauf geschrieben haben.

Dies führt uns zum nächsten Konzept, dem Umfang.

Geltungsbereich


Ein Bereich beschreibt, wo auf die Variablen und Funktionen in unserem Programm zugegriffen werden kann. In Javascript gibt es zwei Arten von Bereichen - den globalen Bereich und den Bereich einer Funktion . Nach der offiziellen Spezifikation,
"Wenn eine Variablendeklaration innerhalb einer Funktionsdeklaration auftritt, wird die Variable im lokalen Bereich dieser Funktion definiert ..."
Dies bedeutet, dass, wenn Sie eine Variable mit var erstellen, der Bereich dieser Variablen die Funktion ist, in der sie erstellt wurde, und nur innerhalb dieser Funktion oder einer anderen verschachtelten Funktion verfügbar ist.

 function getDate () { var date = new Date() return date } getDate() console.log(date) // NOT OK: Reference Error

Oben haben wir versucht, von außerhalb der Funktion, in der sie deklariert wurde, auf die Variable zuzugreifen. Da der Gültigkeitsbereich der Datumsvariablen die Funktion getDate ist, ist sie nur innerhalb dieser Funktion oder in einer anderen in getDate verschachtelten Funktion verfügbar (siehe Abbildung unten).

 function getDate () { var date = new Date() function formatDate () { return date.toDateString().slice(4) // OK } return formatDate() } getDate() console.log(date) // NOT OK: Reference Error

Schauen wir uns nun ein fortgeschritteneres Beispiel an. Nehmen wir an, wir haben eine Reihe von Preisen und benötigen eine Funktion, die diese Reihe sowie eine Rabattvariable verwendet und uns eine neue Reihe von Preisen mit Rabatten zurückgibt. Das Endziel könnte ungefähr so ​​aussehen:

 discountPrices([100, 200, 300], .5)

Und die Implementierung könnte ungefähr so ​​aussehen:

 function discountPrices (prices, discount) { var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } return discounted }

Es sieht einfach aus, aber was hat das mit dem Umfang des Blocks zu tun? Schauen Sie sich diese for- Schleife an. Sind darin deklarierte Variablen außerhalb zugänglich? Es stellt sich heraus, verfügbar.

 function discountPrices (prices, discount) { var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i) // 3 console.log(discountedPrice) // 150 console.log(finalPrice) // 150 return discounted }

Wenn JavaScript die einzige Programmiersprache ist, die Sie kennen, müssen Sie sich möglicherweise nicht so viele Sorgen machen. Wenn Sie jedoch von einer anderen Programmiersprache zu JavaScript gekommen sind, insbesondere von einer Programmiersprache, die den Gültigkeitsbereich blockiert, sind Sie wahrscheinlich ein wenig besorgt darüber, was hier passiert.

Es ist nicht kaputt, es funktioniert nur ein wenig seltsam. Es gibt wirklich keinen Grund, außerhalb der for- Schleife auf i , discountPrice und finalPrice zuzugreifen. Es nützt uns nichts und kann uns in manchen Situationen sogar schaden. Da Variablen jedoch mit var deklariert werden, fallen sie in den Funktionsumfang und Sie können darauf zugreifen.

Jetzt haben wir die Deklaration und Initialisierung von Variablen sowie den Umfang besprochen. Eine weitere Sache, mit der wir uns befassen müssen, bevor wir uns mit den Unterschieden zwischen let und const befassen, ist das „Erhöhen“.

"Heben"


Denken Sie daran, dass zuvor gesagt wurde: „In Javascript werden Variablen beim Erstellen mit dem undefinierten Wert initialisiert.“ Es stellt sich heraus, dass dies "Hebung" bedeutet. Der JavaScript-Interpreter setzt die deklarierten Variablen während einer Phase namens "Erstellung" auf undefiniert .

Lesen Sie diesen Artikel, um eine detailliertere Übersicht über die Erstellungsphase „Erhöhen“ und Bereiche zu erhalten: „Der ultimative Leitfaden zum Heben, Umfang und Schließen in JavaScript“ .

Schauen wir uns das vorherige Beispiel an und sehen, wie sich „Uplift“ darauf auswirkt.

 function discountPrices (prices, discount) { var discounted = undefined var i = undefined var discountedPrice = undefined var finalPrice = undefined discounted = [] for (var i = 0; i < prices.length; i++) { discountedPrice = prices[i] * (1 - discount) finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i) // 3 console.log(discountedPrice) // 150 console.log(finalPrice) // 150 return discounted }

Beachten Sie, dass alle deklarierten Variablen auf undefiniert gesetzt wurden . Wenn Sie versuchen, auf eines davon zuzugreifen, bevor es tatsächlich angekündigt wird, werden Sie einfach undefiniert .

 function discountPrices (prices, discount) { console.log(discounted) // undefined var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i) // 3 console.log(discountedPrice) // 150 console.log(finalPrice) // 150 return discounted }

Jetzt wissen Sie alles, was Sie über var brauchen. Lassen Sie uns nun endlich über das Hauptziel sprechen, für das wir hier sind: Was ist der Unterschied zwischen var , let und const ?

var, let oder const


Vergleichen wir zunächst var und let . Der Hauptunterschied zwischen var und let besteht darin, dass Sie neben dem globalen Bereich und dem Bereich der Funktion auch Variablen im Bereich des Blocks definieren können. Dies bedeutet, dass die mit dem Schlüsselwort let erstellte Variable sowohl in dem Block, in dem sie erstellt wurde, als auch in verschachtelten Blöcken verfügbar ist. Als ich "block" sagte, meinte ich etwas, das von geschweiften Klammern {} umgeben ist, wie eine for-Schleife oder eine if-Anweisung .

Kehren wir also zum letzten Mal zu unserer Funktion discountPrices zurück.

 function discountPrices (prices, discount) { var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i) // 3 console.log(discountedPrice) // 150 console.log(finalPrice) // 150 return discounted }

Denken Sie daran, dass wir das Recht haben, i , discountPrice und finalPrice außerhalb der for- Schleife auszugeben, da sie mit var deklariert wurden und Variablen, die mit dem Schlüsselwort var deklariert wurden, auf den Funktionsumfang beschränkt sind. Aber was passiert jetzt, wenn wir var ändern, um unseren Code laufen zu lassen und zu versuchen?

 function discountPrices (prices, discount) { let discounted = [] for (let i = 0; i < prices.length; i++) { let discountedPrice = prices[i] * (1 - discount) let finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i) // 3 console.log(discountedPrice) // 150 console.log(finalPrice) // 150 return discounted } discountPrices([100, 200, 300], .5) // NOT OK: ReferenceError: i is not defined

Wir haben ReferenceError: i ist nicht definiert . Was uns sagt, dass die mit let deklarierte Variable auf den Umfang des Blocks beschränkt ist, nicht auf die Funktion. Versuchen Sie, i (oder discountedPrice oder finalPrice ) außerhalb des "Blocks" aufzurufen, in dem sie deklariert wurden. Dies führt zu einem Anruffehler, wie wir gerade gesehen haben.

 var VS let var:     let:

Die folgenden Unterschiede beziehen sich auf die „Hebung“. Wir haben bereits gesagt, dass die Definition von "Uplift" lautet: "Der JavaScript-Interpreter setzt die deklarierten Variablen während der Phase" Creation "auf undefined ." Wir haben dies auch in Aktion gesehen, indem wir die Variable vor ihrer Deklaration aufgerufen haben (Sie wurden undefiniert ).

 function discountPrices (prices, discount) { console.log(discounted) // undefined var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i) // 3 console.log(discountedPrice) // 150 console.log(finalPrice) // 150 return discounted }

Ich kann mich nicht an einen einzelnen Anwendungsfall erinnern, in dem Sie wirklich auf eine Variable zugreifen möchten, bevor Sie sie deklarieren. Es scheint, dass es besser wäre, einen ReferenceError zu erhalten, als undefiniert zu werden .

In der Tat ist es das , was wir tun. Wenn Sie versuchen, auf eine Variable vor ihrer Deklaration mit let zuzugreifen, anstatt undefiniert zu werden (wie beim Deklarieren mit var ), erhalten Sie einen ReferenceError .

 function discountPrices (prices, discount) { console.log(discounted) // NOT OK: ReferenceError let discounted = [] for (let i = 0; i < prices.length; i++) { let discountedPrice = prices[i] * (1 - discount) let finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i) // 3 console.log(discountedPrice) // 150 console.log(finalPrice) // 150 return discounted } 

 var VS let var:        undefined         . let:       ReferenceError        .

let oder const


Jetzt verstehst du den Unterschied zwischen var und let. Was ist mit const? Es stellt sich heraus, dass const fast dasselbe ist wie let. Es gibt jedoch einen Unterschied: Wenn Sie einmal einen Wert mit const zugewiesen haben, können Sie ihn nicht in einen anderen ändern.

 let name = 'Tyler' const handle = 'tylermcginnis' name = 'Tyler McGinnis' // OK handle = '@tylermcginnis' // NOT OK: TypeError: Assignment to constant variable.

Die Schlussfolgerung aus dem Obigen ist, dass mit let deklarierte Variablen überschrieben werden können und mit const deklarierte Variablen nicht.

Großartig, jetzt, da Sie möchten, dass Ihre Variable unveränderlich ist, können Sie sie mit const deklarieren. Oder nicht wirklich. Nur weil eine Variable mit const deklariert wurde, bedeutet dies nicht, dass sie unveränderlich ist. Das bedeutet nur, dass sie nicht überschrieben werden kann. Unten ist ein gutes Beispiel.

 const person = { name: 'Kim Kardashian' } person.name = 'Kim Kardashian West' // OK person = {} // NOT OK: Assignment to constant variable.

Beachten Sie, dass das Ändern der Eigenschaft eines Objekts kein Überschreiben ist. Selbst wenn das Objekt mit const deklariert wird, bedeutet dies nicht, dass Sie keine seiner Eigenschaften ändern können. Dies bedeutet nur, dass Sie dieses Objekt nicht überschreiben können.

Nun die wichtigste Frage, die noch nicht beantwortet wurde: Was soll ich var , let oder const verwenden ? Die beliebteste Meinung, an die ich mich halte, ist, immer const zu verwenden, bis Sie wissen, ob sich die Variable ändern wird. Der Grund dafür ist, dass Sie mit const Ihnen und zukünftigen Entwicklern, die Ihren Code lesen sollten, klar machen, dass diese Variable nicht geändert werden sollte. Wenn Sie es ändern müssen (zum Beispiel in einer for- Schleife), verwenden Sie einfach let .

Es gibt nicht mehr viele Fälle zwischen Variablen, die sich ändern, und Variablen, die sich nicht ändern. Dies bedeutet, dass Sie var nie wieder verwenden müssen.

Nun ist die unpopuläre Meinung, obwohl sie immer noch gerechtfertigt ist, dass Sie niemals const verwenden sollten , obwohl Sie versuchen zu zeigen, dass diese Variable unveränderlich ist, wie wir oben gesehen haben, ist dies nicht ganz richtig. Entwickler, die diese Meinung vertreten, verwenden let immer , solange es keine Variablen gibt, die tatsächlich Konstanten sind, wie z. B. _LOCATION_ = ....

Lassen Sie uns eine Zusammenfassung des oben Gesagten machen. Var ist durch den Umfang der Funktion begrenzt. Wenn Sie versuchen, vor der Deklaration auf eine solche Variable zuzugreifen, werden Sie undefiniert . const und let sind durch den Umfang des Blocks begrenzt. Wenn Sie versuchen, auf diese Variablen zuzugreifen, bevor Sie sie deklarieren, erhalten Sie einen ReferenceError . Und der Unterschied zwischen const und let besteht darin, dass der Wert, der const zugewiesen wurde, im Gegensatz zu let nicht überschrieben werden kann.

 var VS let VS const var:        undefined         . let:       ReferenceError        . const:       ReferenceError        .

Dieser Artikel wurde ursprünglich auf tylermcginnis.com als Teil des Modern JavaScript- Kurses veröffentlicht.

Vielen Dank, dass Sie diese Übersetzung gelesen haben. Ich hoffe, Sie haben etwas Neues und Nützliches für sich kennengelernt. Ich freue mich über das Feedback!

Source: https://habr.com/ru/post/de438880/

More articles:


All Articles