JavaScript Let

Inhaltsverzeichnis

Inhaltsverzeichnis anzeigen

Das Schlüsselwort let wurde eingeführt ES6 (2015)

Mit let definierte Variablen können nicht neu deklariert werden

Mit let definierte Variablen müssen vor der Verwendung deklariert werden

Mit let definierte Variablen haben einen Blockbereich

Kann nicht erneut deklariert werden

Mit let definierte Variablen können nicht erneut deklariert werden.

Sie können eine mit let deklarierte Variable nicht versehentlich neu deklarieren.

Mit let können Sie Folgendes nicht tun:

let x = "John Doe";

let x = 0;

Mit var können Sie:

var x = "John Doe";

var x = 0;

Blockumfang

Vor ES6 (2015) hatte JavaScript einen Global Scope und einen Function Scope.

ES6 führte zwei wichtige neue JavaScript-Schlüsselwörter ein: let und const.

Diese beiden Schlüsselwörter stellen den Blockbereich in JavaScript bereit.

Auf innerhalb eines { }-Blocks deklarierte Variablen kann nicht zugegriffen werden von außerhalb des Blocks:

Beispiel

{ 
  let x = 2;
  }
// x can NOT be used here

Variablen, die mit dem Schlüsselwort var deklariert wurden, dürfen KEINEN Blockbereich haben.

Auf Variablen, die innerhalb eines {}-Blocks deklariert sind, kann über zugegriffen werden außerhalb des Blocks.

Beispiel

{ 
  var x = 2; 
  }
// x CAN be used here

Variablen neu deklarieren

Das erneute Deklarieren einer Variablen mit dem Schlüsselwort var kann zu Problemen führen.

Durch die Neudeklaration einer Variablen innerhalb eines Blocks wird auch die Variable neu deklariert außerhalb des Blocks:

Beispiel

var x = 10;
// Here x is 10

{ 
var x = 2;
// Here x is 2
}

// Here x is 2

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using var</h2>

<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10

{  
var x = 2;
// Here x is 2
}

// Here x is 2
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Das Neudeklarieren einer Variablen mit dem Schlüsselwort let kann dieses Problem lösen.

Durch die Neudeklaration einer Variablen innerhalb eines Blocks wird die Variable außerhalb nicht neu deklariert der Block:

Beispiel

let x = 10;
// Here x is 10

{
let x = 2;
// Here x is 2
}

// Here x is 10

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using let</h2>

<p id="demo"></p>

<script>
let  x = 10;
// Here x is 10

{  
  let x = 2;
  // Here x is 2
}

// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Unterschied zwischen var, let und const

	Scope	Redeclare	Reassign	Hoisted	Binds this
var	No	Yes	Yes	Yes	Yes
let	Yes	No	Yes	No	No
const	Yes	No	No	No	No

Was ist gut?

let und const haben Blockbereich.

let und const kann nicht neu deklariert werden.

let und const müssen vor der Verwendung deklariert werden.

let und const bindet nicht an dies.

let und const werden nicht angehoben.

Was ist nicht gut?

var muss nicht deklariert werden.

var wird gehisst.

var bindet daran.

Browser-Unterstützung

Die Schlüsselwörter let und const sind Wird in Internet Explorer 11 oder früher nicht unterstützt.

Die folgende Tabelle definiert die ersten Browserversionen mit vollständiger Unterstützung:


Chrome 49	Edge 12	Firefox 36	Safari 11	Opera 36
Mar, 2016	Jul, 2015	Jan, 2015	Sep, 2017	Mar, 2016

Neu deklarieren

Das erneute Deklarieren einer JavaScript-Variablen mit var ist zulässig irgendwo in einem Programm:

Beispiel

var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p>Redeclaring a JavaScript variable with <b>var</b> is allowed anywhere in a program:</p>

<p id="demo"></p>

<script>
var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Mit let ist die erneute Deklaration einer Variablen im selben Block NICHT zulässig:

Beispiel

var x = 2;   // Allowed
let x = 3;   // Not allowed

{
let x = 2;   // Allowed
let x = 3;   // Not allowed
}

{
let x = 2;   // Allowed
var x = 3;   // Not allowed
}

Das erneute Deklarieren einer Variablen mit let in einem anderen Block ist zulässig:

Beispiel

let x = 2;   // Allowed
{
let x = 3;   // Allowed
  }
  
  {
let x = 4;    // Allowed
  }

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p>Redeclaring a variable with <b>let</b>, in another scope, or in another block, is allowed:</p>

<p id="demo"></p>

<script>
let x = 2;   // Allowed

{
  let x = 3;   // Allowed
}

{
  let x = 4;   // Allowed
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Heben lassen

Mit var definierte Variablen werden nach oben angehoben und kann jederzeit initialisiert werden. <p>Bedeutung: Sie können die Variable verwenden, bevor sie deklariert wird:

Beispiel

Das ist in Ordnung:

 carName = "Volvo";
  var carName;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>

<p>With <b>var</b>, you can use a variable before it is declared:</p>

<p id="demo"></p>

<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>

</body>
</html>

Wenn Sie mehr über das Heben erfahren möchten, lesen Sie das Kapitel JavaScript-Heben. <p>Mit let definierte Variablen werden ebenfalls nach oben gehoben des Blocks, aber nicht initialisiert.

Bedeutung: Die Verwendung einer let-Variable vor ihrer Deklaration führt zu einem ReferenceError:

Beispiel

carName = "Saab";
let carName = "Volvo";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>

<script>
try {
  carName = "Saab";
  let carName = "Volvo";
}
catch(err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>