O que é um Closure?

O conceito de closures é um daqueles conceitos que parecem complicados mas, na verdade, não é complicado. Vamos decompô-lo.

Cada vez que você cria uma função em JavaScript, você cria um closure (fechamento).

Um closure é onde uma função interna tem acesso às variáveis ​​da função externa.

Aqui está uma explicação alternativa:

Um closure refere-se à situação em que uma função interna retém acesso às variáveis ​​de sua função externa.

Vamos dividir essa definição em três exemplos para que você entenda sem ficar sobrecarregado, em situações reais de quando os closures podem ser úteis.

Digamos que você abra um novo arquivo (por exemplo index.js) e escreva o seguinte:

const min_age = 18;

const canVote = age => {
  if (age >= min_age) {
      return true
  }
}

A função canVote é capaz de acessar variáveis ​​no escopo externo.

Este é um dos casos de closure. Quando o JavaScript encontra a variável, min_age ele começa a procurar se ela está definida dentro da função atual.

Se não for esse o caso, então sobe. Está definido lá fora? Sim, então você terá acesso a ele.

Pode parecer que closures é algo que você decide usar, mas na verdade, closures é o que você obtém (automaticamente) toda vez que define uma função.

Portanto, não é um recurso que você decide usar, mas sim uma explicação de como funciona o escopo de variáveis ​​em relação às funções.

O objeto window

Vemos esse comportamento no código abaixo, onde page acaba se referindo à variável na função atual, enquanto que document, por não ser encontrado na função atual, o JavaScript começa a procurar no escopo global até encontrar a variável document(que é a mesma como window.document).

function example() {
  
  // Nomenclatura de variáveis mais clara, sem problemas com o escopo da variável 👍
  const page = "Hello World";

  console.log(page); // refere-se à variável 'page' acima
  console.log(document); // refere-se ao documento global
}

Não é possível acessar o escopo de outras funções

Observe que os closures só têm acesso ao escopo externo , mas nunca ao escopo de outras funções quando estão no mesmo nível .

Então, digamos que temos 2 funções canVote e createUser ambas são criadas dentro de um index.js arquivo:

const min_age = 18;

const canVote = (age) => {
if (age >= min_age) {
  return true
}
}

const createUser = () => {
// NÃO PODE acessar a variável `age`
// PODE acessar a variável `min_age`
}

A função createUser pode acessar a variável min_age, mas NÃO PODE acessar a variável age porque ela não está no escopo externo.

Resumo

• Um closure é onde uma função interna tem acesso às variáveis ​​da função externa.
• Um closure refere-se à situação em que uma função interna retém acesso às variáveis ​​de sua função externa.
• Pode parecer que closures é algo que você decide usar, mas na verdade, closures é o que você obtém (automaticamente) toda vez que define uma função.