Fechamento em JavaScript

O que é Closure e quando podemos realmente usá-lo?

Para entender o Closure, precisamos conhecer 2 conceitos simples em JavaScript: funções aninhadas e retorno de uma função.

Funções aninhadas

Em JavaScript, podemos ter funções aninhadas. A função interna tem acesso às variáveis ​​e parâmetros da função externa.

Vamos verificar o seguinte exemplo:

function greetPerson(name) {
  const message = 'Hello';
  
  function displayMessage() {
    console.log(`${message} ${name}!`);
  }

  displayMessage();
}

greetPerson('Alex'); // Hello Alex!

Retornando uma função

Além de declarar e invocar uma função interna dentro da função externa, também podemos retornar a função interna para que ela possa ser invocada de fora.

Vejamos um exemplo disso:

function greetPerson(name) {
  const message = 'Hello';
  
  function displayMessage() {
    console.log(`${message} ${name}!`);
  }

  return displayMessage;
}

const displayMessageFunction = greetPerson('Alex');

console.log(typeof(displayMessageFunction)); // function
displayMessageFunction(); // Hello Alex!

Fecho

Depois de entendermos esses 2 conceitos, a “definição” de fechamento é bem simples.

Fechamento significa que uma função interna tem acesso às variáveis ​​e aos parâmetros de sua função externa, mesmo após o retorno da função externa.

Vejamos outro exemplo onde podemos ver exatamente como o fechamento pode ser usado:

function counterFunction() {
 let counter = 0;

 function increaseCounter() {
  return counter += 1;
 }

 return increaseCounter;
}

// counter reffers to the increaseCounter returned by the counterFunction
const counter = counterFunction();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
console.log(counter()); // 4

Uma função interna não mantém uma cópia separada de uma variável externa, mas faz referência à variável externa. Em outras palavras, o valor de counterserá alterado se você alterá-lo usando a função interna.

A função externa counterFunctiontambém retorna uma referência para a increaseCounterfunção interna, portanto, quando a chamarmos, o valor real da countervariável será alterado. Desta forma, podemos ver que a countervariável tem um novo valor incrementado após cada counter()chamada.

Quando usar Fechamento?

Podemos usar o encerramento para obter o encapsulamento em JavaScript. Isso pode ser feito ocultando a implementação detalhada. Dessa forma, podemos criar variáveis ​​e funções privadas.

Vamos verificar o seguinte exemplo, onde queremos encapsular alguns dados usando apenas funções e objetos:

const counter = (function () {
  let privateCounter = 0;

  function changeBy(val) {
    privateCounter += val;
  }

  function increaseCounter() {
    changeBy(1);
  }

  function decreaseCounter() {
    changeBy(-1);
  }

  function decreaseCounter() {
    return privateCounter;
  }

  return { increaseCounter, decreaseCounter, getCounterValue };
})();

console.log(counter.getCounterValue()); // 0

counter.increaseCounter();
counter.increaseCounter();

console.log(counter.getCounterValue()); // 2

counter.decreaseCounter();

console.log(counter.getCounterValue()); // 1

Podemos controlar o valor do contador de fora, apenas chamando increaseCountere decreaseCounter, e podemos obter o valor chamando a getCounterValuefunção, que se comporta como um getter.

Dessa forma, podemos simular os especificadores de acesso publice privatee obter o encapsulamento.

Este é um conceito muito poderoso no desenvolvimento de software, pois evita modificações não intencionais em variáveis ​​e funções que devem permanecer privadas.

Isso é tudo!

Obrigado por reservar um tempo para ler este artigo sobre Closure em JavaScript. Espero que tenha ajudado você a entender melhor esse importante conceito e como ele pode ser usado para conseguir o encapsulamento e criar variáveis ​​e funções privadas!