Conforme consta na seção de resumo da documentação de const
:
A declaração const
cria uma variável cujo o valor é fixo, ou seja, uma constante somente leitura. Isso não significa que o valor é imutável, apenas que a variável constante não pode ser alterada ou re-atribuída.
Isso significa que você não poderá criar outra variável com o mesmo nome, já que fora criada uma referência de somente leitura. No entanto, você ainda poderá alterar o valor da constante.
Isso fica claramente visível em objetos:
// Note `const`:
const person = { name: 'Fulano' };
console.log(person.name);
// O valor que a variável armazena pode ser alterado.
// Só não pode ser reatribuído.
//
// Então isso está OK:
person.name = 'Luiz Felipe';
console.log(person.name);
Ou em arrays, conforme o seu exemplo.
Se você quiser criar um objeto realmente imutável, pode usar o Object.freeze
, que "congela" a referência passada. Por exemplo:
const arr = [1, 2, 3];
Object.freeze(arr); // A partir de agora, `arr` está "congelada".
const obj = { name: 'Luiz Felipe' };
Object.freeze(obj); // A partir de agora, `obj` está "congelado".
Mas por que isso realmente acontece?
Todo objeto do JavaScript possui suas propriedades (isso não é novidade para nós), o negócio é que cada uma dessas propriedades possuem alguns "metadados" denominados property descriptors, que configuram o comportamento daquela propriedade específica. Esses property descriptors possuem alguns atributos, são eles:
configurable
, que será verdadeiro (true
) se a propriedade possa ser alterada e deletada do seu objeto.
writable
, que será verdadeiro se a propriedade puder ser alterada usando algum operador de atribuição.
enumerable
, que será verdadeiro se a propriedade é mostrada durante a enumeração do seu objeto. Por exemplo, em Object.keys
ou em laços for..in
.
value
, que representa o valor associado à propriedade em questão.
A documentação dá uma boa ideia sobre isso. Também tem a pergunta "O que são e como funcionam os descritores e atributos de propriedade do JavaScript?", que resume o funcionamento deles.
Desse modo, sempre que você cria um objeto literal, todas as suas propriedades têm seus descritores definidos com enumerable
, configurable
e writable
definidos como true
. Isso significa que todo objeto criado da forma literal poderá ter as suas propriedades alteradas, deletadas e afins.
Assim, quando você usa o Object.freeze
, as propriedades do objeto terão seus descritores alterados, de modo a definir enumerable
e writable
como false
. O objeto também sofrerá prevenção de extensões, o que não permitirá que novas propriedades sejam nele adicionadas. Essencialmente, o Object.freeze
torna qualquer objeto verdadeiramente imutável.
Podemos observar esse comportamento utilizando o Object.getOwnPropertyDescriptors
. Veja:
const obj = { name: 'Luiz Felipe', username: 'lffg' };
// Note na saída que cada propriedade (`name` e `username` do objeto `obj`)
// possui os descritores `writable` e `configurable` definidos como `true`.
console.log(Object.getOwnPropertyDescriptors(obj));
console.log('====== Congelou ======');
Object.freeze(obj);
// Note agora que os descritores `writable` e `configurable` estão como `false`.
console.log(Object.getOwnPropertyDescriptors(obj));
E o mesmo se aplica aos arrays, uma vez que no JavaScript, todo array é um objeto, e a grosso modo, os índices são as "propriedades". Portanto, o comportamento é exatamente o mesmo:
const arr = [1, 2, 3];
// Note na saída que cada índice (`0`, `1` e `2` do array `arr`)
// possui os descritores `writable` e `configurable` definidos como `true`.
console.log(Object.getOwnPropertyDescriptors(arr));
console.log('====== Congelou ======');
Object.freeze(arr);
// Note agora que os descritores `writable` e `configurable` estão como `false`.
console.log(Object.getOwnPropertyDescriptors(arr));
Por fim, quero deixar claro que não é a declaração const
que define writable
e configurable
como true
por padrão. É o fato de você criar o objeto usando a forma literal. Você pode criar objetos "totalmente configurados" utilizando o método Object.create
. O Object.defineProperty
te permite criar uma propriedade configurada por vez. E por fim, o Object.defineProperties
te permite criar várias propriedades configuradas de uma vez.
Mas não se preocupe com isso tudo. Isso está mais relacionado à metaprogramação. São raramente utilizados diretamente.
array = [1, 2]
. Se você pretende evitar que a estrutura seja modificada, então você está procurando por estruturas de dados imutáveis.array.pop
, só muda o conteudo dentro dele, você poderia criar uma classe e "instancia-la" direto naconst
e em seguida pegar um das propriedade e setar um novo valorconst = new foo; foo.x = 1
. A instância continua sendo a mesma. Vale lembra que os valores de propriedades de um objeto funcionam como referencia, mas o valor em si aplicado a uma variável ou constante não.