Variáveis em JavaScript: como declarar e usar

Variável é um nome que aponta para um valor guardado na memória. Você cria o nome com let ou const, coloca um valor nele e passa a usar o nome no lugar do valor pelo resto do programa.

A forma curta, para já sair escrevendo: const quando o valor não vai mudar, let quando vai. É a decisão inteira nos primeiros meses. Se você quer o detalhe de escopo, hoisting e a diferença para o var antigo, isso tem lição própria em var, let e const na prática. Aqui o assunto é outro: como o nome se comporta, o que ele aceita como valor e o erro que aparece quando ele não existe.

Uma variável é uma gaveta com nome

Imagine uma bancada com gavetas. Se você guarda o total do pedido numa gaveta sem etiqueta, depois precisa abrir todas para encontrar. Uma variável liga um nome a um valor para o programa localizar e reaproveitar a informação. Em const total = 50, total é a etiqueta e 50 é o valor guardado.

A imagem da gaveta ajuda no primeiro contato, mas o comportamento técnico é uma ligação na memória, não uma caixinha física. Valores primitivos e objetos são copiados de maneiras diferentes, assunto de outra lição. Aqui, faça uma missão pequena: crie preco, quantidade e subtotal; calcule a terceira usando as duas primeiras e imprima. Depois troque apenas quantidade. Se o resultado muda sem você reescrever o preço na conta, o motivo de dar nomes já ficou visível.

Declarar, atribuir e ler

let cliente = 'Ana Souza';
const CEP_DA_LOJA = '01310-100';
let itensNoCarrinho = 0;

itensNoCarrinho = 3;

console.log(cliente, CEP_DA_LOJA, itensNoCarrinho);

Três operações diferentes acontecem nesse trecho, e vale separá-las com nome próprio porque as mensagens de erro do JavaScript falam nesses termos:

• Declarar é criar o nome: let itensNoCarrinho.
• Inicializar é dar o primeiro valor na mesma linha: = 0.
• Atribuir é trocar o valor depois: itensNoCarrinho = 3.

Um let declarado sem valor não é erro — ele nasce valendo undefined, e passa a valer alguma coisa quando você atribuir. Um const sem valor, sim: não existe constante para preencher depois.

O mesmo nome, outro tipo: tipagem dinâmica

Em JavaScript o tipo pertence ao valor, não ao nome. A mesma variável pode guardar texto, número e objeto ao longo do programa:

let campo = '3';
console.log(typeof campo, campo);

campo = 3;
console.log(typeof campo, campo);

campo = { quantidade: 3 };
console.log(typeof campo, campo);

Isso é tipagem dinâmica. Em Java ou C você declararia int quantidade e o compilador reclamaria na hora de guardar um texto ali. Aqui ninguém reclama — e a conta sai errada bem mais tarde:

let quantidade = '2';
const preco = 149.9;

console.log(preco * quantidade);
console.log(preco + quantidade);

A multiplicação funcionou, porque * só existe para números e a linguagem converteu o '2'. A soma não: o + também serve para juntar texto, e diante de uma string ele escolheu concatenar. 149.9 colado em '2' deu '149.92' — um preço plausível, silenciosamente errado. Esse é o motivo de existir uma lição inteira sobre converter string em número.

O que pode virar nome de variável

A regra formal: o nome começa com letra, _ ou $, e depois aceita letras, números, _ e $. Letra aqui é Unicode, então acento passa:

const _codigoInterno = 'PED-4821';
const $seletorDoBotao = '#finalizar';
const precoUnitário = 289.9;
const cliente2 = 'Bruno';

console.log(_codigoInterno, $seletorDoBotao, precoUnitário, cliente2);

Passa, mas repare que “o motor aceita” e “é boa ideia” são coisas diferentes. O _ no começo é convenção antiga para “isto é interno, não mexa”; o $ ficou marcado pelo jQuery e hoje é comum em variável que guarda um elemento da página. Acento, na prática, ninguém usa.

O que não passa é começar com número:

const 2produtos = 4;

Nem usar hífen, que a linguagem lê como operador de subtração:

const preco-final = 199;

A mensagem parece não ter nada a ver, e tem: o motor leu const preco — uma constante sem valor — e depois um -final = 199 solto. Ele reclama do que entendeu, não do que você quis dizer. Vale a pena se acostumar com isso desde cedo, porque SyntaxError quase sempre aponta uma linha depois do problema real.

Maiúscula conta, e palavra reservada não vale

JavaScript diferencia maiúscula de minúscula. totalPedido e totalpedido são dois nomes distintos, e o segundo nunca foi criado:

const totalPedido = 589.7;

console.log(totalpedido);

Guarde essa mensagem: is not defined significa este nome não existe em nenhum escopo visível daqui. Nas primeiras semanas ela é quase sempre erro de digitação; depois, import esquecido.

A outra restrição são as palavras que a linguagem já usa — class, const, return, function, new, if, for e companhia:

const class = 'premium';

Na prática ninguém tenta declarar const if. O caso real é class, quando você está mexendo em HTML e quer guardar o nome de uma classe CSS — use classeCss ou className, que é como o próprio DOM chama.

Atribuir sem declarar cria uma global implícita

Esta é a armadilha mais silenciosa da linguagem. Se você atribuir a um nome que nunca foi declarado, o JavaScript antigo não reclama: ele cria a variável no escopo global e segue.

function calcularFrete(peso) {
  taxa = 12.5;
  return taxa + peso * 1.5;
}

console.log(calcularFrete(2));
console.log(typeof taxa, taxa);

O taxa estava dentro da função, e depois da chamada ele existe fora dela. Duas funções diferentes que usem o mesmo nome passam a escrever uma por cima da outra, e o bug aparece longe da causa.

Modo estrito acaba com isso — e todo módulo ES já roda em modo estrito por padrão. O mesmo código num arquivo .mjs, ou num <script type="module">:

function calcularFrete(peso) {
  taxa = 12.5;
  return taxa + peso * 1.5;
}

console.log(calcularFrete(2));

Mesmo arquivo, mesma linha, comportamento oposto. É por isso que a recomendação prática é: escreva em módulo. Você troca um bug invisível por uma mensagem clara na linha exata.

Erros comuns

Quatro mensagens cobrem quase tudo que dá errado com variável nesta fase:

As duas últimas, e o mecanismo de escopo por trás delas, estão detalhadas em var, let e const na prática. A primeira você acabou de ver acontecer duas vezes nesta lição.

Como nomear na prática

O motor aceita quase qualquer nome; quem lê o código, não. Quatro hábitos que resolvem 90% dos casos:

• camelCase para tudo que é valor comum: precoUnitario, totalDoPedido.
• Booleano começa com verbo de estado: temFreteGratis, estaPago. Se o nome não puder ser respondido com sim ou não, ele não deveria guardar booleano.
• Nome diz o que é, não o tipo: precos, não arrayDePrecos.
• MAIUSCULA_COM_UNDERSCORE só para configuração fixa do módulo, definida uma vez e nunca tocada — CEP_DA_LOJA, LIMITE_DE_PARCELAS.

const precoUnitario = 289.9;
const quantidade = 2;
const subtotal = precoUnitario * quantidade;
const temFreteGratis = subtotal >= 199;

console.log(`subtotal R$ ${subtotal.toFixed(2)} · frete grátis: ${temFreteGratis}`);

Nome bom economiza comentário. Se você precisou escrever // quantidade de itens ao lado de const q = 2, o comentário era o nome.

A próxima lição olha para o outro lado da variável — o valor que está dentro dela — em tipos de dados e o operador typeof. O guia de JavaScript mostra a trilha inteira em ordem.