Transformação de coordenadas

Closures são um padrão de programação em JavaScript que permite usar variáveis de um escopo léxico externo dentro de um bloco de código aninhado. O JavaScript dá suporte a closures de forma transparente, e muitas vezes elas são usadas sem que se saiba o que são.

// Top-level declarations are global-scope
const dozen = 12;

{
  // Braces create a new block-scope
  // Referencing the outer variable is a closure.
  const twoDozen = dozen * 2;
}

// Because of the block-scope declaration, twoDozen is not available here.
twoDozen;
// => Uncaught ReferenceError: twoDozen is not defined

Além das chaves {}, as funções (e as classes) também criam novos escopos e podem encerrar valores:

const dozen = 12;

// Functions create a new function-scope and block-scope.
// Referencing the outer variable here is a closure.
function nDozen(n) {
  // This is declared inside the function scope, and uses the top-level scope.
  // This works, and encloses the value 12.
  const twoDozen = dozen * 2;

  // This only uses the locally declared variable and the passed argument to the parameter `n`
  return (twoDozen / 2) * n;
}

// Because of the function-scope declaration, twoDozen is not available here.
twoDozen;
// => Uncaught ReferenceError: twoDozen is not defined

Como mostram os exemplos com twoDozen, os valores podem ficar encerrados em um escopo aninhado (função, bloco etc.), mas não podem ser retirados desse contexto. Na maioria dos casos, a intenção no JavaScript moderno é que um valor não vaze para um escopo externo.

Closures para guardar estado e passar valores adiante

Usar uma declaração de variável mutável (como let ou var) permite preservar certo estado:

let counter = 0;

// This function closure increments the counter's state in the outer lexical context.
// This way the counter can be shared between many calling contexts.
export function increment() {
  counter += 1;
  return counter;
}

increment();
// => 1

counter;
// => 1

Encerrar valores sem vazar o estado

Combinando as duas ideias: encerrar um valor para preservar estado, e o fato de que valores encerrados não vazam para fora, é possível criar valores privados.

O método mais comum é criar uma função que retorna uma função que encerra certo estado.

export function makeCounter() {
  let counter = 0;

  // This returns a new function that encloses the local variable counter
  return function increment() {
    counter += 1;
    return counter;
  };
}

// Counter did not leak
counter;
// => Uncaught ReferenceError: counter is not defined

// This creates a new counter.
// This assigns the increment function to the variable myFirstCounter.
const myFirstCounter = makeCounter();

typeof myFirstCounter;
// => function

myFirstCounter.name;
// => increment

myFirstCounter();
// => 1
myFirstCounter();
// => 2

// This creates new counter (with new, separate local state / enclosed counter variable)
const mySecondCounter = makeCounter();

mySecondCounter();
// => 1

// It does not affect the first counter.

myFirstCounter();
// => 3