Escopo e funções internas

Variável vive onde nasceu. Função interna pode lembrar um total sem espalhar global.

Trabalhe sobre uma cópia da pasta inicio do exemplo correspondente. Leia, digite, mude uma coisa, preveja o resultado, recarregue e confira. A referência completa fica na raiz da pasta do exemplo, no pacote anexo.

O que você pratica

• Explique o papel central desta etapa no exemplo 14-escopo.
• Implemente a versão inicio e descreva uma mudança que você testou.
• Qual erro comum deste capítulo você conseguiu provocar de propósito?

Escopo de bloco

let dentro de { } não existe fora. Tentar ler fora gera ReferenceError.

Contador fechado

function criarContador() {
  let total = 0;
  return {
    somar: function () { total += 1; return total; },
    zerar: function () { total = 0; return total; },
    ler: function () { return total; },
  };
}

Sem variável global

O total não polui a página. Só os métodos públicos mexem nele.

Ler o exemplo completo

A referência desta etapa usa app.js, index.html, styles.css. Abra primeiro o resultado pronto e identifique onde acontece escopo de bloco. Depois compare o mesmo ponto com a pasta inicio. Essa comparação mostra exatamente o que você precisa escrever, sem esconder partes indispensáveis do programa.

Diagnóstico guiado

Se o resultado não aparecer, confirme o arquivo aberto, salve a alteração e recarregue. Em seguida, abra o Console: leia a primeira mensagem de erro, confira o nome do arquivo e a linha indicada. Quando houver fetch, sirva a pasta apenas em 127.0.0.1; abrir por file:// não reproduz o pedido HTTP.

Critério de avanço

Avance quando conseguir explicar o papel de inicio, realizar uma mudança pequena e restaurar o exemplo sem copiar a resposta comentada.

Atividades

1. Na referência, onde aparece escopo de bloco e qual efeito você observa?
2. Na cópia inicio, mude apenas inicio. O que você prevê antes de executar novamente?
3. Provoque uma falha pequena nesta etapa. Qual mensagem ou comportamento ajudou você a encontrar a causa?

Respostas comentadas

Só abra depois de tentar.

Atividade 1. A resposta deve apontar o arquivo e ligar o trecho ao efeito visível. Compare com app.js, index.html, styles.css.

Atividade 2. Registre o valor anterior, o novo valor e o resultado previsto. Depois confira; se houver diferença, explique o que o programa realmente fez.

Atividade 3. Uma boa investigação começa pela primeira mensagem do Console, pelo arquivo salvo e pelo caminho aberto. Corrija uma causa por vez e execute de novo.

Exemplo deste capítulo: pacote de exemplos/14-escopo/.

O arquivo completo

Referência do exemplo 14-escopo, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Escopo e funções internas — Ateliê do Marco Zero</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="skip" href="#conteudo">Ir para o conteúdo</a>
  <header>
    <p class="tag">Ateliê do Marco Zero · Recife</p>
    <h1>Escopo e funções internas</h1>
  </header>
  <main id="conteudo">
    <p>Contador com função interna que lembra o valor.</p>
    <p class="painel">Visitas: <strong id="n">0</strong></p>
    <button type="button" id="mais">+1</button>
    <button type="button" id="reset" class="secondary">Zerar</button>

  </main>
  <footer>
    <p>Material de estudo. Conteúdo fictício. Servidor só em 127.0.0.1.</p>
  </footer>
  <script src="app.js"></script>
</body>
</html>

app.js

function criarContador() {
  let total = 0;
  return {
    somar() {
      total += 1;
      return total;
    },
    zerar() {
      total = 0;
      return total;
    },
    ler() {
      return total;
    },
  };
}

const contador = criarContador();
const n = document.querySelector("#n");

document.querySelector("#mais").addEventListener("click", () => {
  n.textContent = String(contador.somar());
});
document.querySelector("#reset").addEventListener("click", () => {
  n.textContent = String(contador.zerar());
});