JavaScript est un langage polyvalent et puissant, et l'une de ses fonctionnalités les plus intrigantes est le concept de fermetures. Les fermetures sont fondamentales pour comprendre le fonctionnement des fonctions JavaScript, notamment en ce qui concerne la portée et l'accès aux variables. Dans ce didacticiel, nous explorerons ce que sont les fermetures, comment elles fonctionnent et fournirons des exemples pratiques pour vous aider à maîtriser ce concept.

Qu’est-ce qu’une fermeture ?

Une fermeture est une fonction qui conserve l'accès à sa portée lexicale, même lorsque la fonction est exécutée en dehors de cette portée. En termes plus simples, une fermeture permet à une fonction de « se souvenir » de l'environnement dans lequel elle a été créée.

Pourquoi les fermetures sont-elles importantes ?

Les fermetures sont essentielles pour plusieurs raisons :

• Confidentialité des données : les fermetures vous permettent de créer des variables privées inaccessibles depuis l'extérieur de la fonction.

• Fonctions avec état : elles permettent aux fonctions de maintenir l'état entre les appels.

• Programmation fonctionnelle : les fermetures sont un concept clé dans la programmation fonctionnelle, permettant des fonctions d'ordre supérieur et le curry.

Comment fonctionnent les fermetures ?

Pour comprendre les fermetures, commençons par un exemple simple :

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

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

    return innerFunction;
}

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

Dans l'exemple ci-dessus :

• outerFunctioncrée une variable externalVariable et définit innerFunction.

• innerFunction accède à externalVariable, qui se trouve dans sa portée lexicale.

• outerFunction renvoie innerFunction, créant une fermeture.

• Lorsque myClosure est appelé, il a toujours accès à externalVariable même si externalFunction a terminé son exécution.

Exemples pratiques de fermetures

1. Création de variables privées

Les fermetures peuvent être utilisées pour créer des variables privées accessibles ou modifiées uniquement via des fonctions spécifiques.

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

Dans cet exemple, count est une variable privée accessible et modifiée uniquement via les méthodes incrément, décrémentation et getCount.

2. Création de fonctions dynamiquement

Les fermetures vous permettent de créer des fonctions de manière dynamique avec des données spécifiques.

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!

Ici, GreetingGenerator crée une fermeture avec la variable de salutation, permettant à sayHello et sayGoodbye de l'utiliser lorsqu'ils sont appelés.

3. Maintien de l'état dans le code asynchrone

Les fermetures sont particulièrement utiles dans la programmation asynchrone, où vous devez maintenir l'état dans différentes parties de votre code.

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

Dans cet exemple, le cache est conservé lors de plusieurs appels à getUserData, garantissant que les données ne sont récupérées qu'une seule fois par URL et réutilisées par la suite.

Conclusion

Les fermetures sont une fonctionnalité puissante de JavaScript qui permet aux fonctions de conserver l'accès à leur portée lexicale, même lorsqu'elles sont exécutées en dehors de cette portée. Ils permettent la confidentialité des données, les fonctions avec état et constituent la pierre angulaire de la programmation fonctionnelle. En comprenant et en utilisant les fermetures, vous pouvez écrire du code JavaScript plus efficace, plus lisible et plus maintenable.

Expérimentez les fermetures dans vos projets et vous apprécierez bientôt leur polyvalence et leur puissance. Bon codage !