JavaScript-konst

Innehållsförteckning

Visa innehållsförteckning

Nyckelordet const introducerades i ES6 (2015)

Variabler definierade med const kan inte Återdeklareras

Variabler definierade med const kan inte tilldelas om

Variabler definierade med const har Block Scope

Kan inte omtilldelas

En const-variabel kan inte tilldelas om:

Exempel

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

Prova själv →

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

Måste tilldelas

JavaScript const-variabler måste tilldelas ett värde när de deklareras:

Korrekt

const PI = 3.14159265359;

Felaktig

const PI;
PI = 3.14159265359;

När ska jag använda JavaScript const?

Deklarera alltid en variabel med const när du vet att värdet ska inte ändras.

Använd const när du deklarerar:

En ny Array
Ett nytt objekt
En ny funktion
Ett nytt RegExp

Konstanta objekt och matriser

Nyckelordet const är lite missvisande.

Den definierar inte ett konstant värde. Den definierar en konstant referens till ett värde.

På grund av detta kan du INTE:

Tilldela om ett konstant värde
Tilldela om en konstant array
Tilldela om ett konstant objekt

Men du kan:

Ändra elementen i konstant array
Ändra egenskaperna för konstant objekt

Konstanta matriser

Du kan ändra elementen i en konstant array:

Exempel

// 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");

Prova själv →

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

Men du kan INTE omtilldela arrayen:

Exempel

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

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

Prova själv →

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

Konstanta objekt

Du kan ändra egenskaperna för ett konstant objekt:

Exempel

// 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";

Prova själv →

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

Men du kan INTE omfördela objektet:

Exempel

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

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

Prova själv →

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

Skillnaden mellan var, let och const

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

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

Block Omfattning

Att deklarera en variabel med const liknar let när det kommer till Blockeringsomfång.

X som deklareras i blocket, i det här exemplet, är inte detsamma som x som deklareras utanför blocket:

Exempel

const x = 10;
// Here x is 10

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

// Here x is 10

Prova själv →

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

Du kan lära dig mer om block scope i kapitlet JavaScript Scope.

Omdeklarerar

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

Exempel

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

Omdeklarera en befintlig var eller let variabel till const, i samma omfattning, är inte tillåten:

Exempel

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
}

Det är inte tillåtet att omtilldela en befintlig const-variabel i samma omfattning:

Exempel

 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
}

Det är tillåtet att omdeklarera en variabel med const, i ett annat omfång eller i ett annat block:

Exempel

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

Hissning

Variabler som definieras med var hissas upp till toppen och kan initieras när som helst.

Betydelse: 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 const hissas också till toppen, men inte initierad.

Betydelse: Att använda en const-variabel innan den deklareras kommer att resultera i en Referensfel:

Exempel

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

Prova själv →

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