Nyckelordet let
introducerades i ES6 (2015)
Variabler definierade med let
kan inte Återdeklareras
Variabler definierade med let
måste deklareras före användning
Variabler definierade med let
har Block Scope
Variabler definierade med let
kan inte omdeklareras.
Du kan inte av misstag omdeklarera en variabel deklarerad med let
.
Med let
kan du inte göra detta:
let x = "John Doe";
let x = 0;
Med var
kan du:
var x = "John Doe";
var x = 0;
Före ES6 (2015) hade JavaScript Global Scope och Function Scope.
ES6 introducerade två viktiga nya JavaScript-sökord: let
och const
.
Dessa två sökord ger Block Scope i JavaScript.
Variabler som deklareras i ett { }-block kan inte kommas åt från utanför blocket:
{
let x = 2;
}
// x can NOT be used here
Variabler som deklareras med nyckelordet var
kan INTE ha blockomfattning.
Variabler som deklareras i ett { }-block kan nås från utanför blocket.
{
var x = 2;
}
// x CAN be used here
Att omdeklarera en variabel med nyckelordet var
kan skapa problem.
Om en variabel deklareras inuti ett block omdeklareras också variabeln utanför blocket:
var x = 10;
// Here x is 10
{
var x = 2;
// Here x is 2
}
// Here x is 2
Prova själv →
<!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>
Att omdeklarera en variabel med nyckelordet let
kan lösa detta problem.
Att omdeklarera en variabel inuti ett block kommer inte att omdeklarera variabeln utanför kvarteret:
let x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
Prova själv →
<!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>
Scope | Redeclare | Reassign | Hoisted | Binds this | |
var | No | Yes | Yes | Yes | Yes |
let | Yes | No | Yes | No | No |
const | Yes | No | No | No | No |
let
och const
har blockeringsomfång.
let
och const
kan inte omdeklareras.
let
och const
måste deklareras före användning.
let
och const
binder inte till detta
.
let
och const
är ej hissade.
var
behöver inte deklareras.
var
är hissad.
var
binder till detta.
Nyckelorden let
och const
är stöds inte i Internet Explorer 11 eller tidigare.
Följande tabell definierar de första webbläsarversionerna med fullt stöd:
Chrome 49 | Edge 12 | Firefox 36 | Safari 11 | Opera 36 |
Mar, 2016 | Jul, 2015 | Jan, 2015 | Sep, 2017 | Mar, 2016 |
Det är tillåtet att omdeklarera en JavaScript-variabel med var
var som helst i ett program:
var x = 2;
// Now x is 2
var x = 3;
// Now x is 3
Prova själv →
<!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>
Med let
är det INTE tillåtet att omdeklarera en variabel i samma block:
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
}
Omdeklaration av en variabel med let
, i ett annat block, ÄR tillåtet:
let x = 2; // Allowed
{
let x = 3; // Allowed
}
{
let x = 4; // Allowed
}
Prova själv →
<!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>
Variabler som definieras med var
hissas upp till toppen och kan initieras när som helst. <p>Betydning: Du kan använda variabeln innan den deklareras:
Det här är ok:
carName = "Volvo";
var carName;
Prova själv →
<!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>
Om du vill lära dig mer om hissning, studera kapitlet JavaScript-hissning. <p>Variabler definierade med let
hissas också till toppen av blocket, men inte initialiserad.
Betydelse: Att använda en let
-variabel innan den deklareras kommer att resultera i en Referensfel
:
carName = "Saab";
let carName = "Volvo";
Prova själv →
<!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>