Si vous ignorez ce qu'est une IIFE, il s'agit d'une Immediately-Invoked Function Expression introduite en 2010 par Ben Alman, en d'autres termes une fonction qui s'exécute elle-même immédiatement, elle crée un scope où la déclaration de ses variables n'est visible que par elle même sans polluer l'espace global.

Lorsqu'on déclare une variable, elle existe dans le scope d'une fonction ou de l'espace global.

Si on veut créer une librairie et qu'on crée une variable, elle va donc se retrouver dans l'espace global :

var favoriteFood = "Sushi";

Clairement, dans la création d'une librairie, on ne veut pas ça ! Si on nomme une variable qui est l'identique de celle du développeur qui l'utilise, ça peut rapidement porter à confusion.

IIFE

La meilleure façon de corriger ça est l'usage d'une IIFE, elle permet de créer un scope pour les variables puisqu'une variable dépendra du scope de notre fonction.

Elles viennent dans quelques variations stylistiques. Voyons d'abord une variation vraiment, vraiment facile à comprendre.

!function() {
    console.log("Hello mon Sushi");
}();

Voici notre cher IIFE en action ! 😃

Lorsque vous copiez ce code et essayez dans la console d'un navigateur, vous verrez le log sur la ligne 2. Et c'est à peu près tout. On ne peut jamais afficher ce log à nouveau.

C'est une fonction qui est morte immédiatement après sa naissance. 💀

Chaque fois que JavaScript voit le mot clé function comme premier mot dans une instruction valide, il s'attend à ce qu'une définition de fonction ait lieu.

Donc, pour éviter que cela ne se produise, nous préfixons "!" Devant le mot-clé de la fonction sur la ligne 1. Cela oblige JavaScript à traiter tout ce qui vient après "!" Comme une expression.

Mais les choses les plus intéressantes se produisent à la ligne 3 où nous exécutons cette expression de fonction immédiatement.

La variation stylistique ci-dessus peut être utilisée en remplaçant ! par +, -, ou même ~. Tout opérateur peut être utilisé.

+function() {
    console.log("Hello mon Sushi");
}();


-function() {
    console.log("Hello mon Sushi");
}();


~function() {
    console.log("Hello mon Sushi");
}();

Maintenant, essayez-le dans la console !

Tout ce que le premier caractère ! fait ici, c'est de créer une expression au lieu d'une déclaration de fonction. Et puis nous exécutons cette fonction immédiatement.

Une autre variation peut se faire en utilisant le mot clef void :

void function() {
    console.log("Hello mon Sushi");
}();

Ici, void force la fonction à être traitée comme une expression.

//	La syntaxe est assez simple
(function() {

	var favoriteFood = "Sushi";
	console.log("Hello ", favoriteFood);

})()

On entoure une fonction par des parenthèses puis on rajoute de nouveau des parenthèses comme pour exécuter une fonction.

Ainsi on évite de polluer l'espace global et de donner des sueurs froides de frustration aux autres développeurs ! 🙃

Il existe une autre variation qui n'est pas ma préférée :

(function() {
	var favoriteFood = "Sushi";
	console.log("Hello ", favoriteFood);
}()) // Les parenthèses qui exécutent la fonction sont à l'intérieur des parenthèses qui entourent la fonction

Je la trouve personnellement moins lisible. 🤮

Il est possible de donner des paramètres à notre fonction puisqu'il s'agit d'une fonction... 😅

(function(food = "Sushi") {
	console.log("Hello ", food);
})("Pizza");

C'est tout ce qu'il faut savoir sur les IIFE pour commencer à les utiliser dans votre code.

Elles aident non seulement à organiser et à exprimer votre code plus élégamment, mais ils vous aident également à réduire les bugs en évitant la création de globales inutiles.

Ah ! Et ça se prononce iffy !!

function userInteraction(article) {

	const { user, david } = article.humans;

	if (user.likeArticle) {
		if (!user.isFanFacebookPage) {
			user.likeFacebookPage();
		}
		user.shareFacebook();
		user.shareTwitter();
		user.shareLinkedin();
		david.notifyThankYou();
	} else {
		david.noOffence();
		david.notifyStillLoveYou();
	}

}

userInteraction(this);
Partages ! 😉