Var ,let,const unterschiede
In diesem Beitrag lernen Sie zwei neue Möglichkeiten zum Erstellen von Variablen in JavaScript (ES6)
let
und const
. Auf dem Weg dorthin werden wir auf die Unterschiede sehen zwischen
var
, let
und const
sowie Abdeckung Themen wie Funktion vs Block Umfang,
variable Hub- und Unveränderlichkeit.
ES2015 (oder ES6) zwei neue Möglichkeiten , Variablen zu erstellen,
let
und
const
. Bevor wir uns jedoch mit den Unterschieden zwischen
var
,
let
und const
befassen, müssen Sie einige Voraussetzungen kennen.
Es handelt sich um Variablendeklarationen in Bezug auf Initialisierung, Umfang (insbesondere Funktionsumfang) und Heben.
Variablendeklaration vs. Initialisierung
Eine Variablendeklaration führt einen neuen Bezeichner ein.
var declaration
Oben erstellen wir einen neuen Bezeichner namens Deklaration. In JavaScript werden Variablen mit dem Wert initialisiert, mit dem
undefined
sie erstellt wurden. Das heißt, wenn wir versuchen, die
declaration
Variable zu protokollieren , erhalten wir
undefined
.
var declaration console.log(declaration) // undefined
Wenn wir also die Deklarationsvariable protokollieren, werden wir undefiniert. Im Vertrag zur Variablendeklaration erfolgt die Variableninitialisierung, wenn Sie einer Variablen zum ersten Mal einen Wert zuweisen.
var declaration console.log(declaration) // undefined declaration = 'This is an initialization'
Hier initialisieren wir die
declaration
Variable, indem wir sie einem String zuweisen.
Dies führt uns zu unserem zweiten Konzept, Scope.
Umfang
Bereich definiert, wo Variablen und Funktionen in Ihrem Programm zugänglich sind. In JavaScript gibt es zwei Arten von Gültigkeitsbereichen: den globalen Gültigkeitsbereich und den Funktionsbereich . Nach der offiziellen Spezifikation,
"Wenn die Variablenanweisung in einer FunctionDeclaration vorkommt, werden die Variablen mit funktionslokalem Gültigkeitsbereich in dieser Funktion definiert."
Wenn Sie eine Variable mit erstellen
var
, ist diese Variable auf die Funktion beschränkt,
in der sie erstellt wurde, und kann nur innerhalb dieser Funktion oder aller verschachtelten Funktionen aufgerufen werden.
function getDate () { var date = new Date() return date } getDate() console.log(date) // ? Reference Error
Oben versuchen wir, auf eine Variable außerhalb der deklarierten Funktion zuzugreifen. Da
date
die
getData
Funktion einen „Gültigkeitsbereich“ hat , ist sie nur in sich
getDate
selbst oder in verschachtelten Funktionen
getDate
(siehe unten) verfügbar .
function getDate () { var date = new Date() function formatDate () { return date.toDateString().slice(4) // ? } return formatDate() } getDate() console.log(date) // ? Reference Error
Schauen wir uns nun ein erweitertes Beispiel an. Nehmen wir an, wir hatten eine Reihe von
prices
und wir brauchten eine Funktion, die diese Reihe sowie a aufnahm
discount
und uns eine neue Reihe von ermäßigten Preisen zurückgab. Das Endziel könnte ungefähr so aussehen.
discountPrices([100, 200, 300], .5) // [50, 100, 150]
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 }
Scheint einfach genug, aber was hat das mit dem Blockumfang zu tun? Schauen Sie sich diese
for
Schleife an. Sind die darin deklarierten Variablen außerhalb zugänglich? Es stellt sich heraus, sie sind.
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, denken Sie möglicherweise nicht darüber nach.
Wenn Sie jedoch aus einer anderen Programmiersprache zu JavaScript kommen, insbesondere aus einer Programmiersprache,
deren Gültigkeitsbereich blockiert ist, sind Sie wahrscheinlich ein wenig besorgt darüber, was hier vor sich geht.
Es ist nicht wirklich kaputt, es ist nur irgendwie komisch. Es gibt nicht wirklich einen Grund , noch Zugang zu haben
i
,
discountedPrice
und
finalPrice
außerhalb der
for
Schleife. Es nützt uns nicht wirklich und kann uns in manchen Fällen sogar Schaden zufügen.
Da jedoch mit deklarierte Variablen
var
funktionsabhängig sind, tun Sie dies.
Nachdem wir uns nun mit Variablendeklarationen, Initialisierungen und dem Gültigkeitsbereich befasst haben, müssen wir vor dem Eintauchen
let
und Hochfahren noch etwas herausspülen
const
.
Heben
Denken Sie daran, dass wir vorhin gesagt haben: "In JavaScript werden Variablen mit dem Wert initialisiert, mit dem
undefined
sie erstellt wurden." Es stellt sich heraus, dass das alles ist, was "Heben" ist.
Der JavaScript-Interpreter weist Variablendeklarationen
undefined
während der sogenannten Erstellungsphase einen Standardwert zu .
Eine ausführlichere Anleitung zur Erstellungsphase, zum Hochziehen und zu den Bereichen finden Sie unter „Der ultimative Leitfaden zum Hochziehen, zu den Bereichen und zum Schließen in JavaScript“.
Schauen wir uns das vorherige Beispiel an und sehen, wie sich das Heben 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 allen Variablendeklarationen ein Standardwert von zugewiesen wurde
undefined
. Wenn Sie also versuchen, auf eine dieser Variablen zuzugreifen,
bevor sie tatsächlich deklariert wurde, erhalten Sie nur
undefined
.
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, wo Sie alles , was es wissen , ist , darüber zu wissen
var
, lassen Sie uns endlich über die ganze Sinn sprechen , warum Sie hier sind , was ist der Unterschied zwischen
var
,
let
und
const
?
var VS lasse VS const
Vergleichen wir zuerst
var
und
let
. Der Hauptunterschied zwischen
var
und
let
besteht darin, dass
let
Block-Scoped verwendet wird, anstatt funktionsspezifisch zu sein. Dies bedeutet, dass eine mit dem
let
Schlüsselwort erstellte Variable in dem „Block“ verfügbar ist, in dem sie erstellt wurde,
sowie in verschachtelten Blöcken. Wenn ich "block" sage, meine ich alles, was von einer geschweiften Klammer umgeben ist,
{}
wie in einer
for
Schleife oder einer
if
Anweisung.
Lassen Sie uns
discountPrices
ein letztes Mal auf unsere Funktion zurückblicken .
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 in der Lage waren, zu protokollieren
i
,
discountedPrice
und
finalPrice
außerhalb der
for
Schleife, da sie mit
var
und
var
mit Funktionsumfang deklariert wurden. Was passiert nun, wenn wir diese
var
Deklarationen so ändern , dass sie verwendet werden,
let
und versuchen, sie auszuführen?
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) // ? ReferenceError: i is not defined
Wir bekommen
ReferenceError: i is not defined
. Dies sagt uns, dass Variablen, die mit
let
deklariert wurden, block- und nicht funktionsbezogen sind. So versuchen, Zugang
i
(oder
discountedPrice
oder
finalPrice
) , die außerhalb des „Block“ sie in deklariert wurden , wird uns ein Referenzfehler ,
wie wir gerade noch Säge geben.
var VS let var: function scoped let: block scoped
Der nächste Unterschied hat mit dem Heben zu tun. Früher haben wir gesagt , dass die Definition von Hebes ist
„Das JavaScript - Interpreter einen Standardwertes von Variablendeklarationen zuweisen
undefined
während , was die‚Schöpfung‘Phase genannt wird .“ Wir haben sogar diese ,
indem Sie eine Variable in Aktion sehen , bevor er erklärt wurde (Sie erhalten
undefined
)
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 mir keinen Anwendungsfall vorstellen, in dem Sie tatsächlich auf eine Variable zugreifen möchten,
bevor sie deklariert wurde. Es scheint, als wäre das Auslösen eines ReferenceError ein besserer Standard als das Zurückgeben
undefined
. Genau das
let
tut es. Wenn Sie versuchen, auf eine Variable zuzugreifen, die mit
let
deklariert wurde, bevor sie deklariert wurde, erhalten Sie
undefined
(wie bei den mit deklarierten Variablen
var
) einen ReferenceError.
function discountPrices (prices, discount) { console.log(discounted) // ? 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: function scoped undefined when accessing a variable before it's declared let: block scoped ReferenceError when accessing a variable before it's declared
lass VS const
Nun, da Sie den Unterschied zwischen
var
und verstehen
let
, was ist damit
const
? Stellt sich heraus,
const
ist fast genau das gleiche wie
let
. Der einzige Unterschied besteht jedoch darin, dass Sie einen Wert, den Sie einer Variablen mit
const
zugewiesen haben, keinem neuen Wert zuweisen können.
let name = 'Tyler' const handle = 'tylermcginnis' name = 'Tyler McGinnis' // ? handle = '@tylermcginnis' // ? TypeError: Assignment to constant variable.
Der obige Vorteil ist, dass mit deklarierte Variablen
let
neu zugewiesen werden können, mit deklarierte Variablen
const
jedoch nicht.
Cool, also können Sie eine Variable jederzeit mit deklarieren, wenn sie unveränderlich sein soll
const
. Nicht ganz. Nur weil eine Variable mit deklariert wird,
const
heißt das nicht, dass sie unveränderlich ist, sondern nur,
dass der Wert nicht neu zugewiesen werden kann. Hier ist ein gutes Beispiel.
const person = { name: 'Kim Kardashian' } person.name = 'Kim Kardashian West' // ? person = {} // ? Assignment to constant variable.
Beachten Sie, dass das Ändern einer Eigenschaft für ein Objekt keine Neuzuweisung darstellt. Auch wenn ein Objekt mit deklariert
const
wird, bedeutet dies nicht, dass Sie keine seiner Eigenschaften ändern können.
Es bedeutet nur, dass Sie es keinem neuen Wert zuweisen können.
Nun ist die wichtigste Frage , die wir noch nicht beantwortet haben , sollten Sie verwenden
var
,
let
oder
const
? Die beliebteste Meinung und die Meinung, die ich abonniere, ist, dass Sie immer verwenden sollten, es
const
sei denn, Sie wissen, dass sich die Variable ändern wird. Der Grund dafür ist
const
, dass Sie durch die Verwendung von sowohl Ihrem zukünftigen Selbst als auch anderen zukünftigen Entwicklern,
die Ihren Code lesen müssen, signalisieren, dass sich diese Variable nicht ändern sollte. Wenn es sich ändern muss (wie in einer
for
Schleife), sollten Sie verwenden
let
.
Zwischen Variablen, die sich ändern, und Variablen, die sich nicht ändern, bleibt also nicht viel übrig. Das heißt, Sie sollten nie
var
wieder verwenden müssen.
Nun ist die unpopuläre Meinung, obwohl sie immer noch Gültigkeit hat, dass Sie sie niemals verwenden sollten,
const
denn obwohl Sie versuchen zu signalisieren, dass die Variable unveränderlich ist, wie wir oben gesehen haben,
ist dies nicht ganz der Fall. Entwickler, die diese Meinung unterschreiben, verwenden
let
sie immer, es sei denn, sie haben Variablen, die tatsächlich Konstanten sind wie
_LOCATION_ = ...
.
var
Um es noch einmal zusammenzufassen , es ist funktionsspezifisch und wenn Sie versuchen, eine Variable zu verwenden, die
var
vor der eigentlichen Deklaration deklariert wurde , erhalten Sie einfach
undefined
.
const
und
let
sind scoped blockiert und wenn Sie versuchen , Variablen zu verwenden erklärt mit
let
oder
const
vor der Deklaration es eine Reference bekommen. Schließlich besteht der Unterschied zwischen
let
und
const
darin, dass Sie einen Wert
const
, dem Sie ihn einmal zugewiesen haben , nicht mehr neu zuweisen können, sondern mit
let
.
var VS let VS const var: function scoped undefined when accessing a variable before it's declared let: block scoped ReferenceError when accessing a variable before it's declared const: block scoped ReferenceError when accessing a variable before it's declared can't be reassigned