IIFE : que signifie (function(){})(); en JS

Les fonctions anonymes en JS

On distingue 2 principales manières de déclarer des fonctions anonymes en JS.

Les expressions de fonctions anonymes

Cette méthode utilise une expression de fonction anonyme, qui peut être assignée à une variable pour créer une fonction anonyme qui peut être appelée ultérieurement.

const myFunction = function () {
	// Code de la fonction ici
};

Les fonctions fléchées

Cette méthode utilise une fonction fléchée (syntaxe disponible depuis ECMAScript 6 - ES6). Elle est similaire à une expression de fonction anonyme, mais utilise une syntaxe plus concise.

const myFunction = () => {
	// Code de la fonction ici
};

Les fonctions anonymes IIFE

Syntaxe

La syntaxe (function() {})(); est appelée une fonction anonyme immédiatement invoquée (ou en anglais IIFE pour « Immediately Invoked Function Expression »).

Une IIFE est une fonction anonyme qui est appelée immédiatement après avoir été définie. En d’autres termes, elle permet d’exécuter immédiatement une fonction dès qu’elle est définie.

(function () {
	// Code de la fonction ici
})();

// Syntaxe alternative via une fonction fléchée
(() => {
	// Code de la fonction ici
})();

• (function() {}) ou (() => {}) : la première partie définit une fonction anonyme qui ne prend pas d’argument et ne retourne rien. Le code à exécuter est écrit à l’intérieur des accolades.
• (); : la seconde partie invoque immédiatement cette fonction, ce qui signifie que le code à l’intérieur des accolades sera exécuté dès que le navigateur interprète cette expression.

Notez que rien n’empêche une IIFE de travailler avec des paramètres :

(function (foo, bar) {
	// Code de la fonction ici
})('valeur pour foo', 'valeur pour bar');

Une IIFE revient à écrire une fonction anonyme standard / fonction fléchée et à l’exécuter juste après sa création.

const myFunction = function () {
	// Code de la fonction ici
};
 
myFunction();

Usage

• Un accès contrôlé L’une des principales raisons d’utiliser une IIFE est de créer une portée locale pour les variables et fonctions qu’elle contient, ce qui permet de réduire les risques de conflits avec d’autres parties du code car les variables et fonctions internes à une IIFE sont encapsulées à l’intérieur, et ne seront ainsi pas accessibles depuis l’extérieur. Cela permet de créer des variables locales et temporaires sans interférer avec le reste du code.
• Une exécution automatique La nature d’une IIFE permet également d’initialiser l’exécution d’un script avec une syntaxe allégée.
• Des performances Enfin, l’utilisation d’une IIFE permet également d’améliorer les performances du code en réduisant le nombre de variables globales.

Ces caractéristiques rendent les IIFE idéales pour développer des bibliothèques et plugins JavaScript auto-exécutés, optimisés et qui peuvent être facilement intégrés dans d’autres projets sans risque de conflits de noms de variables.