Var vs Const vs Let

Compreendendo var, let e const no JavaScript

Se você já assistiu a cursos, vídeos ou leu blogs sobre JavaScript, provavelmente ouviu que var é uma maneira antiga de declarar variáveis, const é para variáveis que não podem ser alteradas, e let é usado para variáveis que podem mudar e têm um escopo limitado ao bloco onde são declaradas.

Vamos explorar esses conceitos em detalhes, destacando como cada um funciona na prática e as razões por trás de seu comportamento.

Comparando var e const

Para entender as diferenças na prática, vamos executar um exemplo no console das devtools do navegador. Experimente copiar e colar o seguinte código:

var variableRandomOne = 10;
// variableRandomOne 10
// window.variableRandomOne 10

const variableRandomTwo = 20;
// variableRandomTwo 20
// window.variableRandomTwo undefined

Se você digitar os nomes das variáveis no console, verá os valores atribuídos. Entretanto, existe uma diferença importante: enquanto a variável declarada com var pode ser acessada pelo objeto global window.variableRandomOne (o que retorna o valor 10), a variável const não pode ser acessada dessa forma, retornando undefined com window.variableRandomTwo.

Esse comportamento peculiar é resultado do uso do Global Environment Record de ECMAScript, que representa o escopo mais externo compartilhado pelos elementos processados em um script ECMAScript.

O Global Environment Record é formado por duas partes:

1. Declarative Environment Record: usado para definir os vínculos de declarações de funções, variáveis e cláusulas catch. É uma estrutura de dados interna que não pode ser acessada diretamente por código JavaScript.
2. Object Environment Record: semelhante, mas aqui os vínculos (variáveis, funções, etc.) são armazenados em um objeto JavaScript, permitindo acesso por meio do objeto global window.

Como resultado, var utiliza o Object Environment Record, enquanto const e let utilizam o Declarative Environment Record. É por isso que var aparece no objeto global window e const não.

A Diferença Entre const e let

O conceito por trás de const é que se trata de uma forma de declarar variáveis cujo valor não pode ser alterado. Mas será que isso se aplica sempre da forma que esperamos? Vamos analisar com um exemplo prático.

Se você precisar de um array cujos valores vão mudar ou se incrementar, a abordagem mais indicada seria usar let:

let prograLanguages = [];

prograLanguages.push('C');
prograLanguages.push('Java');
prograLanguages.push('Python');
prograLanguages.push('Ruby');

// prograLanguages [ "C", "Java", "Python", "Ruby" ]

Agora, se substituirmos let por const, a expectativa seria que o valor do array prograLanguages não pudesse mudar. Mas surpreendentemente, o código funciona sem erros:

const prograLanguages = [];

prograLanguages.push('C');
prograLanguages.push('Java');
prograLanguages.push('Python');
prograLanguages.push('Ruby');

// prograLanguages [ "C", "Java", "Python", "Ruby" ]

Por Que Isso Acontece?

O segredo está no modelo de memória do JavaScript. Quando declaramos algo como let numero = 42;, o que acontece é:

1. O JavaScript cria um identificador único para a variável numero.
2. Atribui a ela um endereço de memória.
3. Armazena o valor no endereço designado.

Se mudarmos o valor:

numero = numero + 1;

A variável numero passa a apontar para uma nova posição de memória com o novo valor.

O Caso de const com Arrays e Objetos

Quando falamos de const, a chave está no endereço de memória. Variáveis declaradas com const não podem mudar o endereço de memória ao qual apontam. Um exemplo:

const numero = 42;
numero = numero + 1; // Erro: não podemos reatribuir um novo valor.

Mas o que acontece se const for usado com um array?

O modelo de memória JavaScript é dividido em duas partes:

1. Call Stack: onde são armazenados valores primitivos como strings, números, booleanos, null, undefined, etc.
2. Heap: onde são armazenados dados não primitivos que podem crescer dinamicamente, como arrays e objetos.

Agora, de volta ao exemplo do array:

const prograLanguages = [];

prograLanguages.push('C');
prograLanguages.push('Java');
prograLanguages.push('Python');
prograLanguages.push('Ruby');

// prograLanguages [ "C", "Java", "Python", "Ruby" ]

O que acontece aqui é que prograLanguages aponta para um endereço de memória no call stack que se refere a um espaço no heap. Podemos modificar o conteúdo do array porque o endereço de memória ao qual prograLanguages aponta permanece o mesmo, mesmo que o conteúdo mude.

É isso que permite a modificação de arrays ou objetos mesmo quando são declarados com const.

Espero que tenha ajudado você a entender melhor as sutilezas de var, let e const no JavaScript. Continue explorando para dominar o uso dessas declarações em diferentes situações e melhorar suas habilidades em JavaScript!