IIFE en JavaScript : exécuter une fonction à l'endroit même où on l'écrit

Une paire de parenthèses en fin de ligne, juste après une fonction, et le corps s'exécute aussitôt. La fonction n'a pas de nom, personne ne pourra la rappeler, et c'est exactement l'intention.

Cette écriture a longtemps été la seule façon d'isoler des variables en JavaScript. Les modules l'ont largement remplacée, mais elle reste dans le paysage et garde un usage bien vivant.

Définition

Une IIFE, pour immediately invoked function expression, est une fonction définie et appelée dans la même expression. Les parenthèses qui l'entourent la transforment en expression, et celles qui suivent l'exécutent.

(function () {
  const secret = "invisible dehors";
  console.log(secret);
})();

// console.log(secret); // ReferenceError

const version = (function () {
  return "1.4.0";
})();

console.log(version); // 1.4.0

Tout ce qui est déclaré à l'intérieur reste enfermé dans la Portée (scope) de la fonction. Rien ne fuit vers l'extérieur, sauf ce que l'expression renvoie explicitement.

Ce qu'elle résolvait, et ce qui l'a remplacée

Avant 2015, var était le seul mot-clé de déclaration, et sa portée s'arrêtait à la fonction. Sans fonction, tout finissait global.

• Isoler des variables : le rôle de let et const, qui suffisent avec une simple paire d'accolades.
• Créer un module privé : le rôle des modules, où rien ne sort sans un export.
• Éviter les collisions de noms : réglé par la même occasion, chaque fichier ayant sa propre portée.

Une IIFE écrite aujourd'hui pour l'une de ces trois raisons est un réflexe hérité, pas une nécessité.

Le cas qui reste utile

Ouvrir une zone asynchrone dans un fichier qui n'en est pas un. L'await exige une fonction async, et l'IIFE en fournit une sans polluer le fichier d'un nom de plus.

(async () => {
  const attendre = (ms) => new Promise((r) => setTimeout(r, ms));
  await attendre(10);
  console.log("terminé après l'attente");
})();

Questions fréquentes

Parce qu'une ligne qui commence par le mot-clé function est lue comme une déclaration, et une déclaration ne s'appelle pas. Les parenthèses forcent l'analyseur à y voir une expression, qui peut alors être appelée. Un opérateur en tête de ligne, comme un point d'exclamation, produit le même effet.

Oui, et c'est la forme la plus courte aujourd'hui. Une flèche est déjà une expression, donc les parenthèses englobantes servent uniquement à la lisibilité. Attention toutefois : elle n'a pas de this propre ni d'objet arguments, ce qui la rend inadaptée à certains usages historiques.

Pas systématiquement. Une IIFE qui enveloppe un fichier entier ne coûte rien à l'exécution et le convertir en module demande de toucher aussi à la façon dont il est chargé. Le remplacement se justifie quand vous reprenez le fichier pour d'autres raisons, pas comme chantier isolé.