JavaScript é uma linguagem versátil e poderosa, e um de seus recursos mais intrigantes é o conceito de encerramentos. Closures são fundamentais para entender como funcionam as funções JavaScript, principalmente em relação ao escopo e ao acesso às variáveis. Neste tutorial, exploraremos o que são fechamentos, como funcionam e forneceremos exemplos práticos para ajudá-lo a dominar esse conceito.

O que é um fechamento?

Um encerramento é uma função que retém acesso ao seu escopo léxico, mesmo quando a função é executada fora desse escopo. Em termos mais simples, um encerramento permite que uma função "lembre" o ambiente em que foi criada.

Por que os fechamentos são importantes?

Os fechamentos são essenciais por vários motivos:

• Privacidade de dados: Closures permitem que você crie variáveis ​​privadas que não podem ser acessadas de fora da função.

• Funções com estado: elas permitem que as funções mantenham o estado entre as chamadas.

• Programação Funcional: Closures são um conceito-chave na programação funcional, permitindo funções de ordem superior e currying.

Como funcionam os fechamentos?

Para entender os encerramentos, vamos começar com um exemplo básico:

function outerFunction() {
    let outerVariable = 'I am outside!';

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: I am outside!

No exemplo acima:

• outerFunctioncria uma variável outerVariable e define innerFunction.

• innerFunction acessa outerVariable, que está em seu escopo lexical.

• outerFunction retorna innerFunction, criando um fechamento.

• Quando myClosureé chamado, ele ainda tem acesso a outerVariable mesmo que outerFunction tenha terminado de ser executado.

Exemplos práticos de fechamentos

1. Criando variáveis ​​privadas

Closures podem ser usados ​​para criar variáveis ​​privadas que só podem ser acessadas ou modificadas através de funções específicas.

function createCounter() {
    let count = 0;

    return {
        increment: function() {
            count  ;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
console.log(counter.getCount()); // 1

Neste exemplo, counté uma variável privada que só pode ser acessada e modificada através dos métodos increment, decrement e getCount.

2. Criando funções dinamicamente

Os encerramentos permitem criar funções dinamicamente com dados específicos.

function greetingGenerator(greeting) {
    return function(name) {
        return `${greeting}, ${name}!`;
    };
}

const sayHello = greetingGenerator('Hello');
const sayGoodbye = greetingGenerator('Goodbye');

console.log(sayHello('Alice')); // Hello, Alice!
console.log(sayGoodbye('Bob')); // Goodbye, Bob!

Aqui, saudaçãoGenerator cria um encerramento com a variável saudação, permitindo que sayHello e sayGoodbye a usem quando chamados.

3. Mantendo o estado em código assíncrono

Os encerramentos são particularmente úteis na programação assíncrona, onde você precisa manter o estado em diferentes partes do seu código.

function fetchData(url) {
    let cache = {};

    return function() {
        if (cache[url]) {
            return Promise.resolve(cache[url]);
        } else {
            return fetch(url)
                .then(response => response.json())
                .then(data => {
                    cache[url] = data;
                    return data;
                });
        }
    };
}

const getUserData = fetchData('https://jsonplaceholder.typicode.com/users/1');

getUserData().then(data => console.log(data)); // Fetches data from the API
getUserData().then(data => console.log(data)); // Returns cached data

Neste exemplo, o cache é mantido em várias chamadas para getUserData, garantindo que os dados sejam buscados apenas uma vez por URL e reutilizados posteriormente.

Conclusão

Os encerramentos são um recurso poderoso do JavaScript que permite que as funções retenham o acesso ao seu escopo léxico, mesmo quando executadas fora desse escopo. Eles permitem privacidade de dados, funções com estado e são a base da programação funcional. Ao compreender e usar encerramentos, você pode escrever código JavaScript mais eficiente, legível e sustentável.

Experimente fechamentos em seus projetos e logo você apreciará sua versatilidade e poder. Boa codificação!