DevPath · Aprenda a programar ESPTEN

Escopo, hoisting e closures

Closures

Um closure é uma função que lembra de onde nasceu

Chegou a ideia estrela do módulo, e ela não é tão difícil quanto parece.

Imagine que cada função, ao nascer, leva consigo uma mochila com as variáveis que tinha à mão naquele momento. Mesmo que a função viaje para outra parte do programa e esse lugar de nascimento já não exista, ela continua carregando a mochila e pode olhar lá dentro. Isso é um closure: uma função que lembra do mundo onde nasceu.

Por que isso te importa? Porque os closures estão por trás de coisas que você usa todo dia: contadores, geradores de IDs únicos, dados privados que ninguém pode tocar de fora, e até os hooks do React. Domine isso e metade das bibliotecas modernas deixa de parecer mágica.

Exemplo clássico: um contador com memória

function criarContador() {
  let cuenta = 0;          // variável "privada"
  return function () {
    cuenta = cuenta + 1;   // lembra e modifica cuenta
    return cuenta;
  };
}

const contador = criarContador();
console.log(contador()); // 1
console.log(contador()); // 2
console.log(contador()); // 3

A variável cuenta não existe fora de criarContador: ninguém pode ler nem mudar ela de fora. Mas a função retornada a leva na mochila, então ela lembra e atualiza a variável entre as chamadas. Você acabou de criar um dado privado.

Cada closure tem sua própria mochila

const a = criarContador();
const b = criarContador();
console.log(a()); // 1
console.log(a()); // 2
console.log(b()); // 1 (independente de a)

Cada chamada a criarContador entrega uma mochila nova, então a e b nunca se atrapalham. É como dar a cada usuário o próprio cofre.

Por que importam no mundo real?

Quando a mochila fizer sentido, você desbloqueou um dos superpoderes do JavaScript.

Exemplos

A mochila guarda a saudação: ola e tchau lembram da sua separadamente

function criarSaudacao(saudacao) {
  return function (nome) {
    return saudacao + ", " + nome;
  };
}
const ola = criarSaudacao("Olá");
const tchau = criarSaudacao("Tchau");
console.log(ola("Ana"));   // "Olá, Ana"
console.log(tchau("Ana")); // "Tchau, Ana"
Coloque isto em prática

O DevPath é um curso prático: aqui você lê a teoria; no app você a coloca em prática com exercícios que rodam de verdade, offline.

Comece grátis no app →
← Hoisting (içamento)Ver o módulo →