JavaScript Academy · Leçon

Comment les fermetures capturent l’état

Comprenez l’environnement lexical des fermetures.

Comment les fermetures capturent l’état est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Qu’est-ce qu’une fermeture

Une fermeture est une fonction associée aux références des variables de la portée où elle a été définie. La fonction interne « se souvient » de ces variables même après le retour de la fonction externe.

function outer() {
  const message = "hello";
  function inner() {
    console.log(message); // sees outer variable
  }
  inner();
}
outer(); // "hello"

Renvoyer la fonction interne

Le mécanisme devient intéressant lorsque vous renvoyez la fonction interne. Elle conserve l’accès à la variable externe, même si outer a déjà fini de s’exécuter.

function outer() {
  const message = "remembered";
  return function () {
    console.log(message);
  };
}
const fn = outer();
fn(); // "remembered"

Portée lexicale

Les fermetures fonctionnent grâce à la portée lexicale : une fonction peut accéder aux variables définies dans les portées qui l’englobent physiquement dans le code source, et non dans l’endroit où elle est appelée.

const x = 10;
function show() {
  console.log(x); // resolves where defined
}
function run() {
  const x = 99;
  show(); // still logs 10, not 99
}
run();

Capturer par référence

Une fermeture capture la variable elle-même, et non un instantané de sa valeur. Si la variable change par la suite, la fermeture voit la nouvelle valeur.

function make() {
  let count = 0;
  const get = () => count;
  count = 5; // changed after get defined
  return get;
}
console.log(make()()); // 5

Chaque appel crée une nouvelle portée

Chaque appel de la fonction externe crée un nouvel ensemble de variables. Les fermetures issues d’appels différents ne partagent pas le state.

function counter() {
  let n = 0;
  return () => ++n;
}
const a = counter();
const b = counter();
console.log(a(), a()); // 1 2
console.log(b());      // 1 (independent)

Fermetures sur les paramètres

Les paramètres de fonction sont eux aussi capturés. Cela vous permet de créer des fonctions spécialisées à partir d’une fonction générale.

function adder(x) {
  return (y) => x + y;
}
const add5 = adder(5);
console.log(add5(3));  // 8
console.log(add5(10)); // 15

Le piège classique des boucles

Un bogue célèbre : utiliser var dans une boucle partage une seule variable entre toutes les fermetures. Lorsqu’elles s’exécutent, la boucle est terminée et elles voient toutes la valeur finale.

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns[0](), fns[1](), fns[2]()); // 3 3 3

La correction avec let

let crée une nouvelle liaison à chaque itération, de sorte que chaque fermeture capture son propre i. C’est la correction moderne.

const fns = [];
for (let i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns[0](), fns[1](), fns[2]()); // 0 1 2

Les fermetures gardent la mémoire en vie

Tant qu’une fermeture existe, les variables qu’elle capture ne peuvent pas être récupérées par le ramasse-miettes. Cela ne pose généralement aucun problème, mais peut provoquer des fuites si vous conservez des fermetures plus longtemps que nécessaire.

function make() {
  const big = new Array(3).fill("data");
  return () => big.length;
}
const f = make();
console.log(f()); // 3 - big stays in memory via f

Les fermetures sont partout

Les fonctions de rappel, les gestionnaires d’événements, setTimeout, les méthodes de tableau et les promesses reposent tous sur les fermetures pour mémoriser le contexte. Vous les utilisez constamment, souvent sans vous en rendre compte.

function greet(name) {
  return () => console.log("Hi " + name);
}
[greet("Ada"), greet("Bob")].forEach((fn) => fn());
// Hi Ada
// Hi Bob

Examiner l’état capturé

Plusieurs fermetures issues du même appel partagent les mêmes variables capturées ; l’une peut donc lire ce que l’autre écrit.

function pair() {
  let value = 0;
  return {
    set: (v) => { value = v; },
    get: () => value
  };
}
const p = pair();
p.set(42);
console.log(p.get()); // 42

Vérification rapide

Comment les fermetures capturent l’état.

Récapitulatif

Une fermeture est une fonction accompagnée de références vers sa portée de définition. Grâce à la portée lexicale, elle mémorise les variables externes après le retour de la fonction externe, en les capturant par référence et non par valeur. Chaque appel de la fonction externe crée une portée indépendante ; utilisez let pour éviter le piège des boucles. Les fermetures gardent en vie la mémoire capturée et permettent les fonctions de rappel partout.

Questions Fréquemment Posées

La leçon « Comment les fermetures capturent l’état » est-elle gratuite ?

Oui — le texte complet de « Comment les fermetures capturent l’état » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Comment les fermetures capturent l’état » ?

Comprenez l’environnement lexical des fermetures. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Comment les fermetures capturent l’état » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy