JavaScript Let

Tartalomjegyzék

Tartalomjegyzék megjelenítése

A let kulcsszót ben vezették be ES6 (2015)

A let paraméterrel meghatározott változókat nem lehet újradeklarálni

A let paraméterrel meghatározott változókat használat előtt deklarálni kell

A let paraméterrel definiált változók Block Scope

Nem deklarálható újra

A let paraméterrel meghatározott változók nem deklarálhatók újra.

A let paraméterrel deklarált változókat nem lehet véletlenül újradeklarálni.

A let segítségével nem teheti meg ezt:

let x = "John Doe";

let x = 0;

A var segítségével:

var x = "John Doe";

var x = 0;

Blokk hatóköre

Az ES6 (2015) előtt a JavaScriptnek globális hatóköre és funkciós hatóköre volt.

Az ES6 két fontos új JavaScript-kulcsszót vezetett be: let és const.

Ez a két kulcsszó Block Scope-t biztosít a JavaScriptben.

A { } blokkon belül deklarált változókhoz nem lehet hozzáférni a blokkon kívülről:

Példa

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

A var kulcsszóval deklarált változóknak NEM lehet blokk hatóköre.

A { } blokkon belül deklarált változók innen érhetők el blokkon kívül.

Példa

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

Változók újradeklarálása

A változók var kulcsszóval történő újrabeállítása problémákat vethet fel.

A blokkon belüli változó újradeklarációja a változót is újradeklarálja blokkon kívül:

Példa

var x = 10;
// Here x is 10

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

// Here x is 2

Próbálja ki Ön is →

<!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>

Egy változó újrabeállítása a let kulcsszó használatával megoldhatja ezt a problémát.

A blokkon belüli változó újradeklarálása nem jelenti a külső változó újradeklarálását a háztömb:

Példa

let x = 10;
// Here x is 10

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

// Here x is 10

Próbálja ki Ön is →

<!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>

Különbség a var, let és const között

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

Mi a jó?

let és const letiltási hatókörrel rendelkezik.

let és const nem újrabejelenthető.

let és const használat előtt nyilatkoztatni kell.

let és const nem kötődik ehhez.

let és const nem emelik fel.

Mi nem jó?

A var értéket nem kell deklarálni.

A var fel van emelve.

A var ehhez kötődik.

Böngésző támogatás

A let és a const kulcsszavak az Internet Explorer 11 vagy korábbi verziója nem támogatja.

Az alábbi táblázat az első böngészőverziókat határozza meg teljes támogatással:


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

Újranyilatkoztatás

Egy JavaScript-változó újradeklarálása a var paraméterrel megengedett a programban bárhol:

Példa

var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

Próbálja ki Ön is →

<!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>

A let használatával NEM megengedett egy változó újradeklarálása ugyanabban a blokkban:

Példa

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
}

Egy változó újradeklarálása a let paraméterrel egy másik blokkban megengedett:

Példa

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

Próbálja ki Ön is →

<!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>

Hadd emelje

A var paraméterrel definiált változók felkerülnek és bármikor inicializálható. <p>Jelentés: Használhatja a változót, mielőtt deklarálná:

Példa

Rendben van:

 carName = "Volvo";
  var carName;

Próbálja ki Ön is →

<!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>

Ha többet szeretne megtudni az emelésről, tanulmányozza a JavaScript emelés című fejezetet. <p>A let paraméterrel meghatározott változók szintén a tetejére kerülnek blokkból, de nincs inicializálva.

Jelentés: A let változó deklarálása előtt egy ReferenceError:

Példa

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

Próbálja ki Ön is →

<!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>