constante de JavaScript

Tabla de contenido

Mostrar tabla de contenidos

La palabra clave const se introdujo en ES6 (2015)

Las variables definidas con const no se pueden volver a declarar

Las variables definidas con const no se pueden reasignar

Las variables definidas con const tienen Alcance del bloque

No se puede reasignar

Una variable const no se puede reasignar:

Ejemplo

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

Pruébelo usted mismo →

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

Debe ser asignado

A las variables JavaScript const se les debe asignar un valor cuando se declaran:

Correcto

const PI = 3.14159265359;

Incorrecto

const PI;
PI = 3.14159265359;

¿Cuándo utilizar JavaScript constante?

Declare siempre una variable con const cuando sepa que el valor no debe cambiarse.

Utilice const cuando declare:

Una nueva matriz
Un nuevo objeto
Una nueva función
Una nueva expresión regular

Objetos constantes y matrices

La palabra clave const es un poco engañosa.

No define un valor constante. Define una referencia constante a un valor.

Por esto NO puedes:

Reasignar un valor constante
Reasignar una matriz constante
Reasignar un objeto constante

Pero puedes:

Cambiar los elementos de la matriz constante.
Cambiar las propiedades del objeto constante.

Matrices constantes

Puedes cambiar los elementos de una matriz constante:

Ejemplo

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

Pruébelo usted mismo →

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

Pero NO puedes reasignar la matriz:

Ejemplo

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

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

Pruébelo usted mismo →

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

Objetos constantes

Puede cambiar las propiedades de un objeto constante:

Ejemplo

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

Pruébelo usted mismo →

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

Pero NO puedes reasignar el objeto:

Ejemplo

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

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

Pruébelo usted mismo →

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

Diferencia entre var, let y 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

¿Lo que es bueno?

let y const tener alcance de bloque.

let y const no se puede volver a declarar.

let y const debe declararse antes de su uso.

let y const no se vincula a este.

let y const no están izados.

¿Qué no es bueno?

No es necesario declarar var.

Se iza var.

var se vincula a esto.

Soporte del navegador

Las palabras clave let y const son no es compatible con Internet Explorer 11 o versiones anteriores.

La siguiente tabla define las primeras versiones del navegador con soporte completo:


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

Alcance del bloque

Declarar una variable con const es similar a let cuando se trata de Alcance del bloque.

La x declarada en el bloque, en este ejemplo, no es la misma que la x declarada fuera del bloque:

Ejemplo

const x = 10;
// Here x is 10

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

// Here x is 10

Pruébelo usted mismo →

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

Puede obtener más información sobre el alcance del bloque en el capítulo Alcance de JavaScript.

Redeclaración

Se permite redeclarar una variable JavaScript var en cualquier lugar de un programa:

Ejemplo

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

Redeclarar un var o let existente variable a const, en el mismo ámbito, no está permitida:

Ejemplo

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
}

No se permite reasignar una variable const existente, en el mismo ámbito:

Ejemplo

 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
}

Se permite redeclarar una variable con const, en otro alcance o en otro bloque:

Ejemplo

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

Izar

Las variables definidas con var se elevan a la parte superior y se puede inicializar en cualquier momento.

Significado: puede utilizar la variable antes de declararla:

Ejemplo

Esto esta bien:

 carName = "Volvo";
  var carName;

Pruébelo usted mismo →

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

Si desea obtener más información sobre elevación, estudie el capítulo JavaScript Hoisting. <p>Las variables definidas con const también se elevan a la parte superior, pero no inicializado.

Significado: El uso de una variable const antes de declararla dará como resultado una Error de referencia:

Ejemplo

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

Pruébelo usted mismo →

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