Aller au contenu principal

Fermetures (closures)

Les fonctions d'usine

Notions théoriques

Une fermeture (ou closure en anglais) est une fonction qui a accès :

  • à son propre contexte,
  • au contexte de la fonction englobante
  • et aux variables globales.

Les closures sont créées chaque fois qu'une fonction est créée.

remarque

Lorsqu'une fonction est définie à l'intérieur d'une autre fonction, la fonction interne a accès aux variables de la fonction externe.

C'est ce qui crée une fermeture.

function externe(x) {
function interne(y) {
return x + y;
}
return interne;
}

Dans cet exemple, la fonction interne est une closure. Elle est définie à l'intérieur de la fonction externe et a accès à sa variable x.

Exemple pratique

function externe(x) {
function interne(y) {
return x + y;
}
return interne;
}

let addWith5 = externe(5);
console.log(addWith5(3)); // Affiche 8
  • addWith5 est une variable qui contient la données retournée par l'appel de la fonction externe(5) (une fonction);

  • addWith5 est donc une fonction générée par la fonction externe qui se souvient de la valeur x = 5.

attention

Lorsque nous appelons addWith5(3), la fonction interne est exécutée avec y = 3, et elle peut toujours accéder à la valeur x = 5.

Quelques méthodes à connaître

Les closures sont souvent utilisées pour créer des fonctions d'usine, qui sont des fonctions qui retournent d'autres fonctions avec des comportements spécifiques.

Par exemple, nous pouvons créer une fonction multiplierPar qui génère des fonctions de multiplication :

function multiplierPar(x) {
function multiplier(y) {
return x * y;
}
return multiplier;
}

let multiplierPar2 = multiplierPar(2);
console.log(multiplierPar2(3)); // Affiche 6

Test de mémorisation/compréhension


Qu'est-ce qu'une closure en JavaScript ?


Quand est-ce qu'une closure est créée en JavaScript ?


Qu'est-ce qu'une fonction d'usine en JavaScript ?


Quelle est la valeur retournée par addWith5(3) dans l'exemple donné ?



TP pour réfléchir et résoudre des problèmes

Dans ce TP, vous allez créer 4 fonctions d'usine :

  • createAdder() qui va retourner une fonction d'addition,
  • createSubtractor() qui va retourner une fonction de soustraction,
  • createMultiplier() qui va retourner une fonction de multiplication
  • et createDivider() qui va retourner une fonction de division,

Chaque fonction d'usine prendra un nombre comme paramètre et retournera une nouvelle fonction qui prendra à son tour un autre nombre comme paramètre et retournera le résultat de l'opération correspondante.

function createAdder(x) {
...
}

...

Voici le code qui permettra de tester vos fonctions :

let addWith5 = createAdder(5);
console.log(addWith5(3)); // // Doit afficher 8

let subtractFrom5 = createSubtractor(5);
console.log(subtractFrom5(3)); // // Doit afficher 2

let multiplyWith5 = createMultiplier(5);
console.log(multiplyWith5(3)); // // Doit afficher 15

let divideBy5 = createDivider(15);
console.log(divideBy5(5)); // // Doit afficher 3
Une solution