JavaScript Let

ECMAScript 2015

ECMAScript 2015 introduced two important new JavaScript keywords:let und const.

These two keywords in JavaScript provide block scope (Block Scope) variables (and constants).

Before ES2015, JavaScript had only two types of scope:globaler KontextundFunktionskontext.

globaler Kontext

GlobalVariables declared (outside a function) haveglobaler Kontext.

Beispiel

var carName = "porsche";
// The code here can use carName
function myFunction() {
  // The code here can also use carName
}

Selbst ausprobieren

GlobalVariables can be accessed at any location in the JavaScript program.

Funktionskontext

LocalVariables declared (inside a function) haveFunktionskontext.

Beispiel

// The code here cannot use carName
function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}
// The code here cannot use carName

Selbst ausprobieren

LocalVariables can only be accessed within the function in which they are declared.

JavaScript Block Scope

durch var Variables declared with the keyword do not have blockScope.

In a block {} Variables declared internally can be accessed from outside the block.

Beispiel

{ 
  var x = 10; 
}
// Here x can be used

Before ES2015, JavaScript did not have block scope.

You can use let The keyword declares variables with block scope.

In a block {} Variables declared internally cannot be accessed from outside the block:

Beispiel

{ 
  let x = 10;
}
// Here x cannot be used

Re-declaring Variables

Using var The keyword re-declaring a variable can cause problems.

Declaring a variable again within a block also declares a variable outside the block:

Beispiel

var x = 10;
// Here x is 10
{ 
  var x = 6;
  // Here x is 6
}
// Here x is 6

Selbst ausprobieren

Using let The keyword re-declaring a variable can solve this problem.

Declaring a variable again within a block does not declare a variable outside the block:

Beispiel

var x = 10;
// Here x is 10
{ 
  let x = 6;
  // Here x is 6
}
// Here x is 10

Selbst ausprobieren

Browser Support

Internet Explorer 11 or earlier versions do not fully support let Keywords.

The following table defines the first completely supported let Browser Versions of Keywords:

Chrome 49 IE / Edge 12 Firefox 44 Safari 11 Opera 36
März 2016 Juli 2015 Januar 2015 September 2017 März 2016

Durchlaufkontext

Verwenden Sie im Durchlauf var:

Beispiel

var i = 7;
for (var i = 0; i < 10; i++) {
  // Einige Anweisungen
}
// Hier ist i 10

Selbst ausprobieren

Verwenden Sie im Durchlauf let:

Beispiel

let i = 7;
for (let i = 0; i < 10; i++) {
  // Einige Anweisungen
}
// Hier ist i 7

Selbst ausprobieren

Im ersten Beispiel wird die Variable, die im Durchlauf verwendet wird, mit var wurde die Variable außerhalb des Durchlaufs neu deklariert.

Im zweiten Beispiel wird die Variable, die im Durchlauf verwendet wird, mit let wurde keine Variable außerhalb des Durchlaufs neu deklariert.

Wenn Sie im Durchlauf mit let Wenn Sie die Variable i deklariert haben, ist die Variable i nur im Durchlauf sichtbar.

Funktionskontext

Wenn Sie Variablen im Funktionskontext deklarieren, verwenden Sie var und let sehr ähnlich.

Sie haben alleFunktionskontext:

function myFunction() {
  var carName = "porsche";   // Funktionskontext
}
function myFunction() {
  let carName = "porsche";   // Funktionskontext
}

globaler Kontext

Wenn eine Deklaration außerhalb eines Blocks erfolgt, dann var und let sehr ähnlich.

Sie haben alleglobaler Kontext:

var x = 10;       // globaler Kontext
let y = 6;       // globaler Kontext

Globale Variablen in HTML

Im Falle von JavaScript ist der globale Kontext die JavaScript-Umgebung.

In HTML ist der globale Kontext das window-Objekt.

durch var Globale Variablen, die durch Schlüsselwörter definiert werden, gehören zum window-Objekt:

Beispiel

var carName = "porsche";
// Diese Codezeile kann window.carName verwenden

Selbst ausprobieren

durch let Globale Variablen, die durch Schlüsselwörter definiert werden, gehören nicht zum window-Objekt:

Beispiel

let carName = "porsche";
// Diese Codezeile kann window.carName nicht verwenden

Selbst ausprobieren

Neuadeklaration

Erlaubt an jedem Ort im Programm zu verwenden var Neuadeklaration von JavaScript-Variablen:

Beispiel

var x = 10;
// 现在，x 为 10
var x = 6;
// 现在，x 为 6

Selbst ausprobieren

in derselben Ebene oder im gleichen Block durch let die Neudeklaration einer var Variablen sind nicht erlaubt:

Beispiel

var x = 10;       // 允许
let x = 6;       // 不允许
{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

in derselben Ebene oder im gleichen Block durch let die Neudeklaration einer let Variablen sind nicht erlaubt:

Beispiel

let x = 10;       // Erlaubt
let x = 6;       // 不允许
{
  let x = 10;   // Erlaubt
  let x = 6;   // 不允许
}

in derselben Ebene oder im gleichen Block durch var die Neudeklaration einer let Variablen sind nicht erlaubt:

Beispiel

let x = 10;       // Erlaubt
var x = 6;       // Nicht erlaubt
{
  let x = 10;   // Erlaubt
  var x = 6;   // Nicht erlaubt
}

in verschiedenen Bereichen oder Blöcken durch let Die Neudeklaration von Variablen ist erlaubt:

Beispiel

let x = 6;       // Erlaubt
{
  let x = 7;   // Erlaubt
}
{
  let x = 8;   // Erlaubt
}

Selbst ausprobieren

Hoisting

durch var deklarierte Variablen werdenHoistingnach oben gehoben werden. Wenn Sie nicht wissen, was Hoisting ist, lernen Sie unser Kapitel über Hoisting.

Sie können Variablen verwenden, bevor sie deklariert werden:

Beispiel

// Hier können Sie carName verwenden
var carName;

Selbst ausprobieren

durch let definierte Variablen werden nicht nach oben gehoben.

in der Deklaration let Das Verwenden der Variablen vor der Deklaration führt zu einem ReferenceError.

Variablen sind von Anfang an im "temporarily dead zone" des Blocks bis zur Deklaration

Beispiel

// Hier können Sie carName nicht verwenden
let carName;