JavaScript-konst

Indholdsfortegnelse

Vis indholdsfortegnelse

Søgeordet const blev introduceret i ES6 (2015)

Variabler defineret med const kan ikke Gendeklareres

Variabler defineret med const kan ikke gentildeles

Variabler defineret med const har Block Scope

Kan ikke gentildeles

En const-variabel kan ikke gentildeles:

Eksempel

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

Prøv det selv →

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

Skal tildeles

JavaScript const-variabler skal tildeles en værdi, når de erklæres:

Korrekt

const PI = 3.14159265359;

Ukorrekt

const PI;
PI = 3.14159265359;

Hvornår skal man bruge JavaScript const?

Deklarer altid en variabel med const, når du ved, at værdien bør ikke ændres.

Brug const, når du erklærer:

Et nyt Array
Et nyt objekt
En ny funktion
Et nyt RegExp

Konstante objekter og arrays

Søgeordet const er lidt misvisende.

Den definerer ikke en konstant værdi. Den definerer en konstant reference til en værdi.

På grund af dette kan du IKKE:

Gentildel en konstant værdi
Gentildel en konstant matrix
Gentildel et konstant objekt

Men du KAN:

Skift elementerne i konstant array
Ændre egenskaberne for konstant objekt

Konstante arrays

Du kan ændre elementerne i en konstant matrix:

Eksempel

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

Prøv det selv →

<!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 IKKE gentildele arrayet:

Eksempel

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

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

Prøv det selv →

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

Konstante objekter

Du kan ændre egenskaberne for et konstant objekt:

Eksempel

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

Prøv det selv →

<!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 IKKE gentildele objektet:

Eksempel

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

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

Prøv det selv →

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

Forskellen mellem var, let og 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

Hvad er godt?

let og const har blokeringsområde.

let og const kan ikke genopgives.

let og const skal deklareres før brug.

let og const binder ikke til dette.

let og const er ikke hejst.

Hvad er ikke godt?

var skal ikke deklareres.

var er hejst.

var binder sig til dette.

Browser support

Søgeordene let og const er understøttes ikke i Internet Explorer 11 eller tidligere.

Følgende tabel definerer de første browserversioner med fuld understøttelse:


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

Blok omfang

At erklære en variabel med const svarer til let når det kommer til Blokeringsomfang.

X erklæret i blokken i dette eksempel er ikke det samme som x erklæret uden for blokken:

Eksempel

const x = 10;
// Here x is 10

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

// Here x is 10

Prøv det selv →

<!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ære mere om blokomfang i kapitlet JavaScript-omfang.

Generklærer

Genangivelse af en var JavaScript-variabel er tilladt hvor som helst i et program:

Eksempel

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

Genangivelse af en eksisterende var eller let variabel til const, i samme omfang, er ikke tilladt:

Eksempel

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
}

Gentildeling af en eksisterende const-variabel i samme omfang er ikke tilladt:

Eksempel

 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
}

Generklæring af en variabel med const, i et andet omfang eller i en anden blok, er tilladt:

Eksempel

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

Hejsning

Variabler defineret med var er hejst til toppen og kan initialiseres til enhver tid.

Betydning: Du kan bruge variablen, før den erklæres:

Eksempel

Det er i orden:

 carName = "Volvo";
  var carName;

Prøv det selv →

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

Hvis du vil lære mere om hejsning, så læs kapitlet JavaScript-hejsning. <p>Variabler defineret med const er også hejst til toppen, men ikke initialiseret.

Betydning: Brug af en const-variabel, før den erklæres, vil resultere i en ReferenceError:

Eksempel

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

Prøv det selv →

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