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, letund 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