JavaScript Let

Obsah

Zobrazit obsah

Bylo zavedeno klíčové slovo let ES6 (2015)

Proměnné definované pomocí let nelze znovu deklarovat

Proměnné definované pomocí let musí být před použitím deklarovány

Proměnné definované pomocí let mají Rozsah bloku

Nelze znovu deklarovat

Proměnné definované pomocí let nelze znovu deklarovat.

Nemůžete náhodně znovu deklarovat proměnnou deklarovanou pomocí let.

Pomocí let to nemůžete udělat:

let x = "John Doe";

let x = 0;

Pomocí var můžete:

var x = "John Doe";

var x = 0;

Rozsah bloku

Před ES6 (2015) měl JavaScript Globální rozsah a Rozsah funkcí.

ES6 zavedl dvě důležitá nová klíčová slova JavaScript: let a const.

Tato dvě klíčová slova poskytují v JavaScriptu Rozsah bloku.

K proměnným deklarovaným uvnitř bloku { } nelze přistupovat mimo blok:

Příklad

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

Proměnné deklarované pomocí klíčového slova var NEMOHOU mít rozsah bloku.

K proměnným deklarovaným uvnitř bloku { } lze přistupovat z mimo blok.

Příklad

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

Opětovná deklarace proměnných

Opětovné deklarování proměnné pomocí klíčového slova var může způsobit problémy.

Opětovná deklarace proměnné uvnitř bloku také znovu deklaruje proměnnou mimo blok:

Příklad

var x = 10;
// Here x is 10

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

// Here x is 2

Zkuste to sami →

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

Tento problém může vyřešit opětovná deklarace proměnné pomocí klíčového slova let.

Opětovná deklarace proměnné uvnitř bloku nezpůsobí opětovné deklarování proměnné vně blok:

Příklad

let x = 10;
// Here x is 10

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

// Here x is 10

Zkuste to sami →

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

Rozdíl mezi var, let a konst

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

Co je dobré?

let a const mají rozsah bloku.

let a const nelze znovu deklarovat.

let a const musí být před použitím deklarováno.

let a const neváže na toto.

let a const nejsou zvednuty.

Co není dobré?

var nemusí být deklarován.

var je zvednut.

var se k tomu váže.

Podpora prohlížeče

Klíčová slova let a const jsou není podporováno v aplikaci Internet Explorer 11 nebo starší.

Následující tabulka definuje první verze prohlížečů s plnou podporou:


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

Opětovná deklarace

Opětovné deklarování proměnné JavaScriptu pomocí var je povoleno kdekoli v programu:

Příklad

var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

Zkuste to sami →

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

S let NENÍ povoleno opětovné deklarování proměnné ve stejném bloku:

Příklad

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
}

Opětovné deklarování proměnné pomocí let v jiném bloku JE povoleno:

Příklad

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

Zkuste to sami →

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

Nechte zdvihání

Proměnné definované pomocí var jsou vyzvednuty nahoru a lze je kdykoli inicializovat. <p>Význam: Proměnnou můžete použít před jejím deklarováním:

Příklad

Toto je v pořádku:

 carName = "Volvo";
  var carName;

Zkuste to sami →

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

Pokud se chcete o zvedání dozvědět více, prostudujte si kapitolu JavaScript zvedání. <p>Proměnné definované pomocí let jsou také vyzdviženy na začátek bloku, ale neinicializováno.

Význam: Použití proměnné let před jejím deklarováním povede k ReferenceError:

Příklad

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

Zkuste to sami →

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