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
En const
-variabel kan inte tilldelas om:
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>
JavaScript const
-variabler måste tilldelas ett värde när de deklareras:
const PI = 3.14159265359;
const PI;
PI = 3.14159265359;
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
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
Du kan ändra elementen i en konstant array:
// 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:
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>
Du kan ändra egenskaperna för ett konstant objekt:
// 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:
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>
Scope | Redeclare | Reassign | Hoisted | Binds this | |
var | No | Yes | Yes | Yes | Yes |
let | Yes | No | Yes | No | No |
const | Yes | No | No | No | No |
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.
var
behöver inte deklareras.
var
är hissad.
var
binder till detta.
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 |
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:
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.
Det är tillåtet att omdeklarera en JavaScript-variabel var
var som helst i ett program:
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:
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:
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:
const x = 2; // Allowed
{ const x = 3; // Allowed
}
{
const x = 4; // Allowed
}
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:
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
:
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>