JavaScript konst

Obsah

Zobrazit obsah

Klíčové slovo const bylo zavedeno v ES6 (2015)

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

Proměnné definované pomocí const nelze změnit přiřazení

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

Nelze znovu přiřadit

Proměnnou const nelze znovu přiřadit:

Příklad

const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

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

<script>
try {
  const PI = 3.141592653589793;
  PI = 3.14;
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

Musí být přiřazeno

Proměnným const JavaScriptu musí být při deklaraci přiřazena hodnota:

Opravit

const PI = 3.14159265359;

Nesprávný

const PI;
PI = 3.14159265359;

Kdy použít JavaScript const?

Vždy deklarujte proměnnou pomocí const, když víte, že hodnota by se neměla měnit.

Když deklarujete, použijte const:

Nové pole
Nový objekt
Nová funkce
Nový RegExp

Konstantní objekty a pole

Klíčové slovo const je trochu zavádějící.

Nedefinuje konstantní hodnotu. Definuje konstantní odkaz na hodnotu.

Z tohoto důvodu NEMŮŽETE:

Znovu přiřaďte konstantní hodnotu
Změňte přiřazení konstantního pole
Znovu přiřadit konstantní objekt

Ale MŮŽETE:

Změňte prvky konstantního pole
Změňte vlastnosti konstantního objektu

Konstantní pole

Prvky konstantního pole můžete změnit:

Příklad

// You can create a constant array:
const cars = ["Saab", "Volvo", "BMW"];

// You can change an element:
cars[0] = "Toyota";

// You can add an element:
cars.push("Audi");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>Declaring a constant array does NOT make the elements unchangeable:</p>

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

<script>
// Create an Array:
const cars = ["Saab", "Volvo", "BMW"];

// Change an element:
cars[0] = "Toyota";

// Add an element:
cars.push("Audi");

// Display the Array:
document.getElementById("demo").innerHTML = cars; 
</script>

</body>
</html>

Ale NELZE znovu přiřadit pole:

Příklad

const cars = ["Saab", "Volvo", "BMW"];

cars = ["Toyota", "Volvo", "Audi"];    // ERROR

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>You can NOT reassign a constant array:</p>

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

<script>
try {
  const cars = ["Saab", "Volvo", "BMW"];
  cars = ["Toyota", "Volvo", "Audi"];
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

Konstantní objekty

Vlastnosti konstantního objektu můžete změnit:

Příklad

// You can create a const object:
const car = {type:"Fiat", model:"500", color:"white"};

// You can change a property:
car.color = "red";

// You can add a property:
car.owner = "Johnson";

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>Declaring a constant object does NOT make the objects properties unchangeable:</p>

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

<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};

// Change a property:
car.color = "red";

// Add a property:
car.owner = "Johnson";

// Display the property:
document.getElementById("demo").innerHTML = "Car owner is " + car.owner; 
</script>

</body>
</html>

Objekt však NEMŮŽETE znovu přiřadit:

Příklad

const car = {type:"Fiat", model:"500", color:"white"};

car = {type:"Volvo", model:"EX60", color:"red"};    // 
  ERROR

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>You can NOT reassign a constant object:</p>

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

<script>
try {
  const car = {type:"Fiat", model:"500", color:"white"};
  car = {type:"Volvo", model:"EX60", color:"red"};
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</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

Rozsah bloku

Deklarování proměnné pomocí const je podobné jako let pokud jde o Rozsah blokování.

X deklarované v bloku v tomto příkladu není stejné jako x deklarované mimo blok:

Příklad

const x = 10;
// Here x is 10

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

// Here x is 10

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScropt const variables has block scope</h2>

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

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

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

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

</body>
</html>

Více o rozsahu bloku se dozvíte v kapitole Rozsah JavaScriptu.

Opětovná deklarace

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

Příklad

var x = 2;     // Allowed
var x = 3;     // Allowed
  x = 4;         // Allowed

Opětovné deklarování stávajícího var nebo let proměnná na const ve stejném rozsahu není povolena:

Příklad

var x = 2;     // Allowed
const x = 2;   // Not allowed

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

{
const x = 2;   // Allowed
const x = 2;   // Not allowed
}

Opětovné přiřazení existující proměnné const ve stejném rozsahu není povoleno:

Příklad

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

Opětovné deklarování proměnné pomocí const v jiném rozsahu nebo v jiném bloku je povoleno:

Příklad

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

Zvedací zařízení

Proměnné definované pomocí var jsou vyzvednuty nahoru a lze je kdykoli inicializovat.

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í const jsou také vyzdviženy nahoru, ale neinicializováno.

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

Příklad

alert (carName);
const carName = "Volvo";

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

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

<script>

try {
  alert(carName);
  const carName = "Volvo";
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}

</script>
</body>
</html>