English 中文 العربية 日本語 Português

JavaScript: Variáveis em JavaScript

Última atualização: 2026-10-13

Variáveis são caixas para armazenar dados — você rotula cada caixa com um nome, depois coloca dados dentro, tira dados ou troca a qualquer momento.

Declarações relacionadas：function const let var for

1. O Que São Variáveis

Imagine uma fileira de caixas rotuladas: uma chamada "nome" guarda "João", outra chamada "idade" guarda 25. O conteúdo pode mudar, mas o rótulo permanece o mesmo — isso é uma variável.

Em JS, você cria variáveis usando palavras-chave de declaração (var / let / const) e atribui valores com o sinal de igual:

HTML 
<script>
var nome = "João";
let idade = 25;
const PI = 3.14;
</script>

var era a única maneira de declarar variáveis antes do ES6. Ela tem dois comportamentos que causam dor de cabeça:

  1. Escopo de função — uma variável declarada com var dentro de um bloco if ou for é acessível fora dele, o que é contra-intuitivo
  2. Hoisting — declarações var são "elevadas" ao topo do seu escopo, mas as atribuições não são. Você pode usar uma variável antes da declaração (seu valor será undefined) sem erros, o que leva a bugs sutis

Esses dois comportamentos fazem do var um terreno fértil para bugs. No JS moderno, var foi amplamente substituído por let e const.

3. let — Escopo de Bloco, Padrão Recomendado

let foi introduzido no ES6 (2015) e corrige ambos os problemas do var:

No dia a dia do desenvolvimento, use let para variáveis que precisam ser reatribuídas.

4. const — Constantes, Não Podem Ser Reatribuídas

const também tem escopo de bloco, mas deve ser atribuída na declaração e não pode ser reatribuída depois.

Nota: const restringe "reatribuição", não "mutação". Se um const guarda um objeto ou array, você pode modificar propriedades do objeto ou elementos do array — só não pode apontar a variável para um objeto diferente.

Use const por padrão; mude para let quando precisar reatribuir — esta é a boa prática.

5. Regras de Nomenclatura de Variáveis

6. Declarando Múltiplas Variáveis

Você pode declarar múltiplas variáveis de uma vez, separadas por vírgulas:

HTML 
<script>
let a = 1, b = 2, c = 3;
</script>

No entanto, para melhor legibilidade, uma variável por linha é preferível.

▶ Exemplo: Hoisting e Escopo de Função do var

▶ Experimente

▶ Exemplo: Escopo de Bloco do let

▶ Experimente

▶ Exemplo: Constantes com const

▶ Experimente

▶ Exemplo: Comparação var / let / const

▶ Experimente

Declarações relacionadas：function const let var for

❓ Perguntas Frequentes

P Se objetos const podem ser modificados, qual o sentido do const?
R const garante que a referência da variável não mudará — você não pode reatribuir person acidentalmente para um objeto diferente, mas modificar propriedades existentes do objeto é perfeitamente possível. É como trancar o rótulo de uma caixa (esta caixa é sempre "caixa do João"), mas você pode colocar o que quiser dentro.
P Quando devo usar let vs const?
R Regra simples: pergunte a si mesmo "esse valor vai mudar?" — se não, use const; se sim, use let. Por exemplo, contadores usam let, constantes de configuração usam const. Na prática, você usará const muito mais frequentemente que let.
P Ainda posso usar var?
R Tecnicamente sim, mas não há motivo. let e const são atualizações completas do var — não existe cenário onde var seja necessário mas let/const não funcione. Entender var em código legado é ok, mas sempre use let/const em código novo.

📖 Resumo

📝 Exercícios

  1. Básico: Declare uma constante NOME_SITE com seu nome usando const, e uma variável contagemVisitas com valor 0 usando let, depois exiba ambos os valores na página.
  2. Intermediário: Crie uma página com um botão que simula um "contador de visitas" — cada clique incrementa contagemVisitas em 1 e exibe o valor atual. Observe como let permite reatribuição enquanto const não.
  3. Desafio: Crie uma página com um objeto constante aluno { nome: "João", notas: [80, 90, 75] }. Depois adicione uma nova nota de 85, calcule a média e altere o nome para "Maria" — tudo sem reatribuir o const, provando que o conteúdo do objeto pode ser modificado.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%