Const JavaScript

Índice

Mostrar índice

A palavra-chave const foi introduzida em ES6 (2015)

Variáveis definidas com const não podem ser redeclaradas

Variáveis definidas com const não podem ser reatribuídas

Variáveis definidas com const possuem Block Scope

Não pode ser reatribuído

Uma variável const não pode ser reatribuída:

Exemplo

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

Experimente você mesmo →

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

Deve ser atribuído

As variáveis JavaScript const devem receber um valor quando são declaradas:

Correto

const PI = 3.14159265359;

Incorreta

const PI;
PI = 3.14159265359;

Quando usar JavaScript const?

Sempre declare uma variável com const quando você souber disso o valor não deve ser alterado.

Use const ao declarar:

Uma nova matriz
Um novo objeto
Uma nova função
Um novo RegExp

Objetos e matrizes constantes

A palavra-chave const é um pouco enganosa.

Não define um valor constante. Ele define uma referência constante a um valor.

Por causa disso você NÃO pode:

Reatribuir um valor constante
Reatribuir uma matriz constante
Reatribuir um objeto constante

Mas você pode:

Alterar os elementos da matriz constante
Alterar as propriedades do objeto constante

Matrizes constantes

Você pode alterar os elementos de um array constante:

Exemplo

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

Experimente você mesmo →

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

Mas você NÃO pode reatribuir o array:

Exemplo

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

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

Experimente você mesmo →

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

Você pode alterar as propriedades de um objeto constante:

Exemplo

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

Experimente você mesmo →

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

Mas você NÃO pode reatribuir o objeto:

Exemplo

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

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

Experimente você mesmo →

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

Diferença entre var, let e 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

O que é bom?

let e const tem escopo de bloco.

let e const não pode ser redeclarado.

let e const deve ser declarado antes do uso.

let e const não se vincula a isto.

let e const não são içados.

O que não é bom?

var não precisa ser declarado.

var é içado.

var se liga a isso.

Suporte ao navegador

As palavras-chave let e const são não é compatível com o Internet Explorer 11 ou anterior.

A tabela a seguir define as primeiras versões de navegadores com suporte total:


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

Escopo do bloco

Declarar uma variável com const é semelhante a let quando se trata de escopo do bloco.

O x declarado no bloco, neste exemplo, não é igual ao x declarado fora do bloco:

Exemplo

const x = 10;
// Here x is 10

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

// Here x is 10

Experimente você mesmo →

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

Você pode aprender mais sobre o escopo do bloco no capítulo Escopo do JavaScript.

Redeclarando

A redeclaração de uma variável JavaScript var é permitida em qualquer lugar de um programa:

Exemplo

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

Redeclarando um var ou let existente variável para const, no mesmo escopo, não é permitida:

Exemplo

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
}

Não é permitido reatribuir uma variável const existente, no mesmo escopo:

Exemplo

 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
}

É permitido redeclarar uma variável com const, em outro escopo, ou em outro bloco:

Exemplo

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

Elevação

Variáveis definidas com var são içadas para o topo e pode ser inicializado a qualquer momento.

Significado: você pode usar a variável antes de ser declarada:

Exemplo

Tudo bem:

 carName = "Volvo";
  var carName;

Experimente você mesmo →

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

Se você quiser aprender mais sobre içamento, estude o capítulo içamento em JavaScript. <p>Variáveis definidas com const também são içadas para o topo, mas não inicializado.

Significado: usar uma variável const antes de ser declarada resultará em um Erro de referência:

Exemplo

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

Experimente você mesmo →

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