Const JavaScript

Índice

    Mostrar índice

ECMAScript 2015 (ES6)

Em 2015, o JavaScript introduziu uma nova palavra-chave importante: const.

Tornou-se uma prática comum declarar arrays usando const:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>
<p id="demo"></p>

<script>

const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

</script>
</body>
</html>

Não pode ser reatribuído

Um array declarado com const não pode ser reatribuído:

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>

Matrizes não são constantes

A palavra-chave const é um pouco enganosa.

NÃO define uma matriz constante. Ele define uma referência constante a um array.

Por causa disso, ainda podemos alterar os elementos de um array constante.

Os elementos podem ser reatribuídos

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>

Suporte ao navegador

A palavra-chave const não é suportada no Internet Explorer 10 ou anterior.

A tabela a seguir define as primeiras versões de navegadores com suporte total para a palavra-chave const:

Chrome 49 IE 11 / Edge Firefox 36 Safari 10 Opera 36
Mar, 2016 Oct, 2013 Feb, 2015 Sep, 2016 Mar, 2016

Atribuído quando declarado

As variáveis JavaScript const devem receber um valor quando são declaradas: <p>Significado: um array declarado com const deve ser inicializado quando for declarado.

Usar const sem inicializar o array é uma sintaxe erro:

Exemplo

Isso não funcionará:

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

Arrays declarados com var podem ser inicializados a qualquer momento.

Você pode até usar o array antes de ser declarado:

Exemplo

Tudo bem:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>JavaScript Hoisting</h2>

<p id="demo"></p>

<script>

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

document.getElementById("demo").innerHTML = cars[0];

</script>
</body>
</html>

Escopo do bloco Const

Um array declarado com const tem Block Scope.

Um array declarado em um bloco não é o mesmo que um array declarado fora do bloco:

Exemplo

const cars = ["Saab", "Volvo", "BMW"];
// Here cars[0] is "Saab"
{
  const cars = ["Toyota", "Volvo", "BMW"];
 
  // Here cars[0] is "Toyota"
}
// Here cars[0] is "Saab"

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Declaring an Array Using const</h2>

<p id="demo"></p>

<script>
const cars = ["Saab", "Volvo", "BMW"];
// Here cars[0] is "Saab"
{  
  const cars = ["Toyota", "Volvo", "BMW"]; 
  // Here cars[0] is "Toyota"
}
// Here cars[0] is "Saab"
document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Um array declarado com var não possui escopo de bloco:

Exemplo

var cars = ["Saab", "Volvo", "BMW"];
// Here cars[0] is "Saab"
{
  var cars = ["Toyota", "Volvo", "BMW"];
 
  // Here cars[0] is "Toyota"
}
// Here cars[0] is "Toyota"

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1> 
<h2>Declaring an Array Using var</h2>

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
// Here cars[0] is "Saab"
{  
  var cars = ["Toyota", "Volvo", "BMW"]; 
  // Here cars[0] is "Toyota"
}
// Here cars[0] is "Toyota"
document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Você pode aprender mais sobre Block Scope no capítulo: JavaScript Scope.

Redeclarando matrizes

Redeclarar um array declarado com var é permitido em qualquer lugar do programa:

Exemplo

var cars = ["Volvo", "BMW"];   // Allowed
var cars = ["Toyota", "BMW"];  // Allowed
cars = ["Volvo", "Saab"];      // Allowed

Redeclarar ou reatribuir um array para const, no mesmo escopo ou em no mesmo bloco, não é permitido:

Exemplo

var cars = ["Volvo", "BMW"];     // Allowed
const cars = ["Volvo", "BMW"];   // Not allowed
{
  var cars = ["Volvo", "BMW"];   // Allowed
  const cars = ["Volvo", "BMW"]; // Not allowed
}

Redeclarar ou reatribuir um array const existente, no mesmo escopo ou em no mesmo bloco, não é permitido:

Exemplo

const cars = ["Volvo", "BMW"];   // Allowed
const cars = ["Volvo", "BMW"];   // Not allowed
var cars = ["Volvo", "BMW"];     // Not allowed
cars = ["Volvo", "BMW"];         // Not allowed

{
  const cars = ["Volvo", "BMW"]; // Allowed
  const cars = ["Volvo", "BMW"]; // Not allowed
  var cars = ["Volvo", "BMW"];   // Not allowed
  cars = ["Volvo", "BMW"];       // Not allowed
}

É permitido redeclarar um array com const, em outro escopo, ou em outro bloco:

Exemplo

const cars = ["Volvo", "BMW"];   // Allowed
{
  const cars = ["Volvo", "BMW"]; // Allowed
}
{
  const cars = ["Volvo", "BMW"]; // Allowed
}

Referência completa de array

Para uma referência completa do Array, acesse:

Referência completa de array JavaScript.

A referência contém descrições e exemplos de todos os Array propriedades e métodos.