EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語
404 Not Found

404 Not Found

nginx

Variáveis em JavaScript

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.

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>

Os Problemas com var

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.

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.

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.

Regras de Nomenclatura de Variáveis

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

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Variáveis JS - Problemas do var</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 550px; margin: 60px auto; }
    .warn { background: #fff3e0; padding: 12px; border-radius: 8px; color: #E65100; border-left: 4px solid #FF9800; margin: 12px 0; }
    .result { background: #f5f5f5; padding: 16px; border-radius: 8px; font-family: Consolas, monospace; line-height: 1.8; margin: 12px 0; }
    button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #FF9800; margin: 6px; }
    button:hover { background: #F57C00; }
  </style>
</head>
<body>
  <h2>Demonstração dos Problemas do var</h2>
  <p class="warn">⚠️ var tem problemas de hoisting e escopo de função — evite-o no código moderno</p>
  <button id="hoistBtn">Demo: Hoisting</button>
  <button id="scopeBtn">Demo: Vazamento de Escopo</button>
  <div class="result" id="output">Clique em um botão para ver os resultados</div>
  <script>
    document.getElementById("hoistBtn").onclick = function() {
      var output = "";
      output += "Acessando x antes da declaração var: x = " + typeof x + "\n";
      var x = 10;
      output += "Após a declaração: x = " + x + "\n\n";
      output += "👆 O hoisting não causa erro antes da declaração, mas o valor é undefined\n";
      output += "Isso pode facilmente causar bugs em projetos grandes!";
      document.getElementById("output").textContent = output;
    };
    document.getElementById("scopeBtn").onclick = function() {
      var output = "";
      for (var i = 0; i < 3; i++) {
        // var i vaza para fora do loop
      }
      output += "Após o loop, i = " + i + "\n\n";
      output += "👆 var i vazou para fora do loop!\n";
      output += "Com let i, ele não seria acessível fora";
      document.getElementById("output").textContent = output;
    };
  </script>
</body>
</html>
▶ Experimente

Exemplo: Escopo de Bloco do let

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Variáveis JS - Escopo de Bloco do let</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 550px; margin: 60px auto; }
    .good { background: #e8f5e9; padding: 12px; border-radius: 8px; color: #2E7D32; border-left: 4px solid #4CAF50; margin: 12px 0; }
    .result { background: #f5f5f5; padding: 16px; border-radius: 8px; font-family: Consolas, monospace; line-height: 1.8; margin: 12px 0; }
    button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #4CAF50; margin: 6px; }
    button:hover { background: #388E3C; }
  </style>
</head>
<body>
  <h2>Demonstração de Escopo de Bloco do let</h2>
  <p class="good">✅ let tem escopo de bloco — inacessível fora de {}, o que é mais seguro</p>
  <button id="letScopeBtn">Demo: Escopo de Bloco do let</button>
  <button id="letLoopBtn">Demo: let em Loops</button>
  <div class="result" id="output">Clique em um botão para ver os resultados</div>
  <script>
    document.getElementById("letScopeBtn").onclick = function() {
      let output = "Teste de escopo de bloco:\n";
      let x = 100;
      output += "x externo = " + x + "\n";
      {
        let x = 200;
        output += "x interno = " + x + "\n";
      }
      output += "Após o bloco, x = " + x + "\n\n";
      output += "👆 x interno e externo são independentes um do outro";
      document.getElementById("output").textContent = output;
    };
    document.getElementById("letLoopBtn").onclick = function() {
      let output = "let em loops:\n";
      for (let i = 0; i < 3; i++) {
        output += "Dentro do loop, i = " + i + "\n";
      }
      output += "\n";
      try {
        output += "Fora do loop, i = " + i;
      } catch(e) {
        output += "Acessando i fora do loop → Erro: " + e.message;
      }
      output += "\n\n👆 let i está confinado ao loop e não vaza para fora";
      document.getElementById("output").textContent = output;
    };
  </script>
</body>
</html>
▶ Experimente

Exemplo: Constantes com const

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Variáveis JS - Constantes com const</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 550px; margin: 60px auto; }
    .tip { background: #e3f2fd; padding: 12px; border-radius: 8px; color: #1565C0; border-left: 4px solid #2196F3; margin: 12px 0; }
    .result { background: #f5f5f5; padding: 16px; border-radius: 8px; font-family: Consolas, monospace; line-height: 1.8; margin: 12px 0; }
    button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; margin: 6px; }
    #constBtn { background: #9C27B0; }
    #objectBtn { background: #2196F3; }
  </style>
</head>
<body>
  <h2>Demonstração de Constantes com const</h2>
  <p class="tip💡 const não pode ser reatribuído, mas propriedades/elementos de objetos/arrays podem ser modificados</p>
  <button id="constBtn">Demo: Erro de Reatribuição do const</button>
  <button id="objectBtn">Demo: Modificando Objeto const</button>
  <div class="result" id="output">Clique em um botão para ver os resultados</div>
  <script>
    document.getElementById("constBtn").onclick = function() {
      const PI = 3.14159;
      let output = "const PI = " + PI + "\n\n";
      output += "Tentando reatribuir PI = 3.14:\n";
      try {
        PI = 3.14;
      } catch(e) {
        output += "❌ Erro: " + e.message;
      }
      output += "\n\n👆 Uma vez atribuída, uma variável const não pode ser alterada";
      document.getElementById("output").textContent = output;
    };
    document.getElementById("objectBtn").onclick = function() {
      const person = { name: "João", age: 25 };
      let output = "const person = " + JSON.stringify(person) + "\n\n";
      output += "Modificando person.age = 26:\n";
      person.age = 26;
      output += "person = " + JSON.stringify(person) + "\n\n";
      output += "Adicionando person.city = 'São Paulo':\n";
      person.city = "São Paulo";
      output += "person = " + JSON.stringify(person) + "\n\n";
      output += "👆 const bloqueia a referência da variável, não o conteúdo do objeto\n";
      output += "Como uma caixa com rótulo trancado — o que está dentro ainda pode mudar";
      document.getElementById("output").textContent = output;
    };
  </script>
</body>
</html>
▶ Experimente

Exemplo: Comparação var / let / const

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Variáveis JS - Comparação das Três Declarações</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 600px; margin: 60px auto; }
    table { width: 100%; border-collapse: collapse; margin: 16px 0; }
    th, td { padding: 10px; text-align: center; border: 1px solid #ddd; }
    th { background: #2196F3; color: #fff; }
    .bad { color: #f44336; }
    .good { color: #4CAF50; font-weight: bold; }
    button { margin-top: 12px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #e91e63; }
    #result { margin-top: 12px; padding: 16px; background: #f5f5f5; border-radius: 8px; font-family: Consolas, monospace; line-height: 1.8; }
  </style>
</head>
<body>
  <h2>Comparação var / let / const</h2>
  <table>
    <tr><th>Característica</th><th>var</th><th>let</th><th>const</th></tr>
    <tr><td>Escopo</td><td class="bad">Função</td><td class="good">Bloco</td><td class="good">Bloco</td></tr>
    <tr><td>Hoisting</td><td class="bad">Sim (undefined)</td><td class="good">Não (TDZ)</td><td class="good">Não (TDZ)</td></tr>
    <tr><td>Reatribuível</td><td class="bad">Sim</td><td>Sim</td><td class="bad">Não</td></tr>
    <tr><td>Uso antes de declarar</td><td class="bad">Sem erro</td><td class="good">Erro</td><td class="good">Erro</td></tr>
    <tr><td>Recomendado</td><td class="bad">Evitar</td><td class="good">Recomendado</td><td class="good">Preferido</td></tr>
  </table>
  <button id="testBtn">Executar Teste de Comparação</button>
  <div id="result"></div>
  <script>
    document.getElementById("testBtn").onclick = function() {
      var output = "=== Teste de Comparação ===\n\n";
      output += "[var] Escopo de função:\n";
      for (var i = 0; i < 3; i++) {}
      output += "var i fora do loop = " + i + " (vazou)\n\n";
      output += "[let] Escopo de bloco:\n";
      for (let j = 0; j < 3; j++) {}
      try {
        output += "let j fora do loop = " + j;
      } catch(e) {
        output += "Acessando let j fora do loop → " + e.message + " (comportamento correto)";
      }
      output += "\n\n[const] Sem reatribuição:\n";
      const MAX = 100;
      output += "const MAX = " + MAX + "\n";
      try {
        MAX = 200;
      } catch(e) {
        output += "Reatribuição → " + e.message + " (comportamento correto)";
      }
      output += "\n\nConclusão: const > let >> var";
      document.getElementById("result").textContent = output;
    };
  </script>
</body>
</html>
▶ Experimente

📖 Resumo

  1. Variáveis são caixas para armazenar dados, criadas com uma palavra-chave de declaração + nome da variável + atribuição
  2. var tem escopo de função e problemas de hoisting — evite-o no JS moderno
  3. let tem escopo de bloco e sem hoisting — use quando reatribuição for necessária
  4. const tem escopo de bloco e não pode ser reatribuído — deve ser atribuído na declaração
  5. const previne reatribuição, mas propriedades/elementos de objetos/arrays ainda podem ser modificados
  6. Prioridade: const primeiro, let segundo, evitar var

❓ 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.

📝 Atividades

  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.
100%