Fermeture en JavaScript

Qu'est-ce que Closure et quand pouvons-nous vraiment l'utiliser ?

Pour comprendre Closure, nous devons connaître 2 concepts simples en JavaScript : les fonctions imbriquées et le retour d'une fonction.

Fonctions imbriquées

En JavaScript, nous pouvons avoir des fonctions imbriquées. La fonction interne a accès aux variables et paramètres de la fonction externe.

Vérifions l'exemple suivant :

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

  displayMessage();
}

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

Renvoyer une fonction

En plus de déclarer et d'invoquer une fonction interne à l'intérieur de la fonction externe, nous pouvons également renvoyer la fonction interne afin qu'elle puisse être appelée de l'extérieur.

Voyons un exemple de ceci :

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!

Fermeture

Après avoir compris ces 2 concepts, la "définition" de la fermeture est assez simple.

La fermeture signifie qu'une fonction interne a accès aux variables et aux paramètres de sa fonction externe même après le retour de la fonction externe.

Voyons un autre exemple où nous pouvons voir exactement comment la fermeture peut être utilisée :

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

Une fonction interne ne conserve pas une copie séparée d'une variable externe, mais elle fait référence à la variable externe. En d'autres termes, la valeur de countersera modifiée si vous la modifiez à l'aide de la fonction interne.

La fonction externe counterFunctionrenvoie également une référence à la increaseCounterfonction interne, donc lorsque nous l'appelons, la valeur réelle de la countervariable sera modifiée. De cette façon, nous pouvons voir que la countervariable a une nouvelle valeur incrémentée après chaque counter()appel.

Quand utiliser Closure ?

Nous pouvons utiliser la fermeture pour réaliser l'encapsulation en JavaScript. Ceci peut être accompli en masquant l'implémentation détaillée. De cette façon, nous pouvons créer des variables et des fonctions privées.

Vérifions l'exemple suivant, où nous voulons encapsuler certaines données en utilisant uniquement des fonctions et des objets :

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

Nous pouvons contrôler la valeur du compteur de l'extérieur, uniquement en appelant increaseCounterand decreaseCounter, et nous pouvons obtenir la valeur en appelant la getCounterValuefonction, qui se comporte comme un getter.

De cette façon, nous pouvons simuler les spécificateurs d'accès publicet privateet réaliser l'encapsulation.

Il s'agit d'un concept très puissant dans le développement de logiciels car il empêche les modifications involontaires des variables et des fonctions qui doivent rester privées.

C'est tout!

Merci d'avoir pris le temps de lire cet article sur Closure en JavaScript. J'espère que cela vous a aidé à mieux comprendre ce concept important et comment il peut être utilisé pour réaliser l'encapsulation et créer des variables et des fonctions privées !