Transformation de coordonnées

Les closures sont un modèle de programmation en JavaScript qui permet d'utiliser des variables issues d'une portée lexicale extérieure à l'intérieur d'un bloc de code imbriqué. JavaScript prend en charge les closures de manière transparente, et on les utilise souvent sans même savoir ce que c'est.

// Top-level declarations are global-scope
const dozen = 12;

{
  // Braces create a new block-scope
  // Referencing the outer variable is a closure.
  const twoDozen = dozen * 2;
}

// Because of the block-scope declaration, twoDozen is not available here.
twoDozen;
// => Uncaught ReferenceError: twoDozen is not defined

Outre les accolades {}, les fonctions (et les classes) créent elles aussi de nouvelles portées et peuvent enfermer des valeurs :

const dozen = 12;

// Functions create a new function-scope and block-scope.
// Referencing the outer variable here is a closure.
function nDozen(n) {
  // This is declared inside the function scope, and uses the top-level scope.
  // This works, and encloses the value 12.
  const twoDozen = dozen * 2;

  // This only uses the locally declared variable and the passed argument to the parameter `n`
  return (twoDozen / 2) * n;
}

// Because of the function-scope declaration, twoDozen is not available here.
twoDozen;
// => Uncaught ReferenceError: twoDozen is not defined

Comme le montrent les exemples avec twoDozen, on peut enfermer des valeurs dans une portée imbriquée (fonction, bloc, etc.), mais on ne peut pas les extraire de ce contexte. Dans la majorité des cas, le JavaScript moderne fait en sorte qu'une valeur ne fuie pas vers une portée extérieure.

Conserver un état et transmettre des valeurs grâce aux closures

Utiliser une déclaration de variable modifiable (comme let ou var) permet de conserver un certain état :

let counter = 0;

// This function closure increments the counter's state in the outer lexical context.
// This way the counter can be shared between many calling contexts.
export function increment() {
  counter += 1;
  return counter;
}

increment();
// => 1

counter;
// => 1

Enfermer des valeurs sans laisser fuiter l'état

En combinant les deux idées, à savoir enfermer une valeur pour conserver un état et empêcher les valeurs enfermées de fuiter vers l'extérieur, il est possible de créer des valeurs privées.

La méthode la plus courante consiste à créer une fonction qui renvoie une fonction qui enferme un certain état.

export function makeCounter() {
  let counter = 0;

  // This returns a new function that encloses the local variable counter
  return function increment() {
    counter += 1;
    return counter;
  };
}

// Counter did not leak
counter;
// => Uncaught ReferenceError: counter is not defined

// This creates a new counter.
// This assigns the increment function to the variable myFirstCounter.
const myFirstCounter = makeCounter();

typeof myFirstCounter;
// => function

myFirstCounter.name;
// => increment

myFirstCounter();
// => 1
myFirstCounter();
// => 2

// This creates new counter (with new, separate local state / enclosed counter variable)
const mySecondCounter = makeCounter();

mySecondCounter();
// => 1

// It does not affect the first counter.

myFirstCounter();
// => 3