JavaScript Låt


Innehållsförteckning

    Visa innehållsförteckning

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

Kan inte återdeklareras

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;

Block Omfattning

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:

Exempel

{ 
  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.

Exempel

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

Återdeklarera variabler

Att omdeklarera en variabel med nyckelordet var kan skapa problem.

Om en variabel deklareras inuti ett block omdeklareras också variabeln utanför blocket:

Exempel

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:

Exempel

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>



Skillnaden mellan var, let och const

ScopeRedeclareReassignHoistedBinds this
varNoYesYesYesYes
letYesNoYesNoNo
constYesNoNoNoNo

Vad är bra?

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.

Vad är inte bra?

var behöver inte deklareras.

var är hissad.

var binder till detta.


Webbläsarstöd

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


Omdeklarerar

Det är tillåtet att omdeklarera en JavaScript-variabel med var var som helst i ett program:

Exempel

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:

Exempel

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:

Exempel

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>

Låt hissning

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:

Exempel

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:

Exempel

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>