Entendendo as variáveis no Javascript

A palavra reservada var

A palavra var é a forma mais antiga de declarar variáveis no JavaScript. Ela tem escopo de função, ou seja, a variável fica visível em toda a função onde foi declarada, mesmo fora do bloco de chaves em que apareceu.

Quando declarada fora de qualquer função, a variável criada com var vira global. Nesse caso, segundo a documentação da MDN sobre var, ela também passa a ser uma propriedade do objeto global (globalThis).

Por isso, o var foi muito usado quando precisávamos acessar um valor em diferentes partes da aplicação, como uma configuração que não muda. Claro, devemos analisar todo o contexto, pois nem todo tipo de informação pode ficar pública para a aplicação inteira.

var appName = "Store";

function showAppName() {
    // appName é global, então está visível aqui
    console.log(appName);
}

if (true) {
    var message = "Hello";
}

// var ignora o bloco do if
console.log(message); // "Hello"

Além disso, o var permite redeclarar a mesma variável sem erro e sofre hoisting. Com isso, a declaração sobe para o topo da função e a variável existe com o valor undefined antes da linha em que você a escreveu.

console.log(total); // undefined, não gera erro
var total = 10;

Esse comportamento confunde muita gente. Por essa razão, a própria MDN recomenda preferir let e const no código moderno.

A palavra reservada let

O let é um recurso muito mais moderno para declarar variáveis no JavaScript, introduzido no ECMAScript 2015. Ele tem escopo de bloco (block-scoped), ou seja, sua visibilidade fica limitada ao bloco de código em que foi definido.

Um bloco de código é delimitado pelas chaves { }, como o corpo de uma função, de um if ou de um for. Sempre que precisamos armazenar algo que só será usado dentro desse trecho, o let é a opção recomendada.

Vale lembrar que, como estamos falando de escopo de bloco, o let não é acessível fora dele. Eu diria que ele funciona como um private, visível somente dentro do bloco que o originou.

let counter = 0;

if (counter === 0) {
    let counter = 5; // outra variável, válida só neste bloco
    console.log(counter); // 5
}

console.log(counter); // 0

for (let i = 0; i < 3; i++) {
    console.log(i);
}
// console.log(i); // ReferenceError: i is not defined

Além disso, o let não permite redeclarar a mesma variável no mesmo bloco. Também existe a chamada zona morta temporal: se você tentar ler a variável antes da linha de declaração, o motor lança um ReferenceError, em vez de devolver undefined.

A palavra reservada const

O uso do const é muito parecido com o do let, pois ele também tem escopo de bloco. A diferença notável é que, depois de declarar um const, você não consegue atribuir um novo valor a ele.

Const vem de constante, então o valor atribuído permanece o mesmo até o fim da vida útil da variável. Por isso, o const exige um valor já na declaração, e escrever const value; gera um erro de sintaxe.

Esse tipo é perfeito quando você não quer correr o risco de trocar um valor por acidente, porque a variável é importante para a lógica da aplicação. Na prática, muitos guias de estilo sugerem usar const por padrão e recorrer ao let apenas quando a reatribuição for necessária.

Há um detalhe importante aqui. O const impede a reatribuição da variável, mas não congela o conteúdo de objetos e arrays, como explica a referência de const na MDN.

const settings = { theme: "dark" };
settings.theme = "light"; // permitido: alteramos uma propriedade
// settings = {};         // TypeError: reatribuição não é permitida

const items = [];
items.push("book"); // permitido: alteramos o conteúdo do array

Atribuindo por valor e por referência

Quando atribuímos valores primitivos, como números, a variável guarda o próprio valor. Isso é o que costumamos chamar de cópia por valor.

Por isso, se você atribuir o valor de uma variável a outra, terá duas cópias independentes. Alterar uma delas não afeta a outra.

let firstNumber = 7;

// cópia por valor: cria uma cópia independente
let secondNumber = firstNumber;

secondNumber = 10;
console.log(firstNumber); // 7

Porém, quando lidamos com tipos complexos, como arrays e objetos, a variável guarda uma referência para o endereço desses dados na memória. Em outras palavras, em vez de uma cópia exata, a nova variável recebe apenas a referência para a mesma estrutura.

let firstList = [7, 8, 9];

// cópia por referência: as duas variáveis apontam para o mesmo array
let secondList = firstList;

secondList.push(10);
console.log(firstList); // [7, 8, 9, 10]

Esse comportamento explica por que alterar secondList também muda firstList. Se você precisar de uma cópia independente, pode usar o operador spread, como em [...firstList], que cria um novo array raso.

É importante saber que existem esses dois tipos de atribuição e que a memória funciona de forma diferente em cada um. Muitas vezes, quando enfrentamos um problema estranho com variáveis no JavaScript, entender a diferença entre valor e referência resolve a dúvida.

Para se aprofundar nesse assunto, confira também o guia básico sobre arrays no JavaScript, que mostra como manipular listas na prática.

1. Escolha nomes significativos

O nome de uma variável deve explicar brevemente o seu propósito. Em vez de nomes genéricos, como x ou data, prefira um nome que faça sentido no contexto.

Por exemplo, se precisamos guardar o valor total de um produto, um bom nome seria productTotalPrice. Logo de cara, ele mostra qual é a finalidade da variável.

// pouco claro
let v = 150;

// claro
let productTotalPrice = 150;

Esse cuidado também aparece nos princípios de clean code, que tratam nomes como a primeira forma de documentação do código.

2. Use camel case

Camel case é uma convenção de nomes muito usada para variáveis em JavaScript e em outras linguagens. Nesse padrão, a primeira palavra começa com letra minúscula e cada palavra seguinte começa com letra maiúscula.

Como exemplo, podemos citar productTotalPrice, productQuantity e isActiveStudent. Assim, o nome fica legível mesmo sem espaços.

Por convenção, muitos times também usam letras maiúsculas com sublinhado para constantes de configuração, como MAX_RETRIES. Já nomes que começam com maiúscula, como Person, costumam ficar reservados para classes.

3. Evite palavras reservadas e nomes confusos

O JavaScript tem um conjunto de palavras reservadas que a linguagem reconhece internamente, como var, let, const, function, class, return e if. Por isso, você não pode usá-las como nome de variável, e o código abaixo nem chega a executar.

var var = [1, 2];    // SyntaxError
let class = "math";  // SyntaxError

Por outro lado, palavras como number e string não são reservadas no JavaScript, mas lembram nomes de tipos e confundem quem lê o código. Portanto, o ideal é evitá-las também e optar por nomes que descrevam melhor o conteúdo.

// confuso, embora funcione
var number = 1;
var string = "text";

// melhor
let attempts = 1;
let welcomeMessage = "text";

A lista completa de palavras reservadas está na gramática léxica da MDN.

4. Use o plural para listas

É muito comum esquecer o plural ao nomear listas. No entanto, sempre que a variável puder guardar um ou mais itens, o nome deve ficar no plural.

const names = ["José", "Pedro", "Henrique"];

const schools = ["School1", "School2", "School3"];

Dessa maneira, fica muito mais claro que existe mais de um item dentro da variável. Além disso, nomes no plural combinam bem com laços, como em for (const name of names).

5. Prefixe booleanos com is, has ou can

Variáveis booleanas ficam mais legíveis quando o nome parece uma pergunta. Por exemplo, isActive, hasPermission e canEdit deixam claro que o valor é verdadeiro ou falso.

Assim, uma condição como if (hasPermission) se lê quase como uma frase. Isso reduz a chance de interpretar errado a lógica do código.