Pièges des IIFE en JavaScript

Examinons deux morceaux de code.

Le premier :

let result = 1
+function() {
	return 2;
}();

console.log(result);

Le second :

let result = 1;
+function() {
	return 2;
}();

console.log(result);

Ces deux morceaux de code sont pratiquement identiques, mais s'ils sont exécutés - le résultat sera différent. Le premier code affichera dans la console le nombre 3, et le second - le nombre 1.

Pourquoi une telle différence : tout est une question de fait que dans un cas à la fin de la première ligne de code il manque un point-virgule, et dans le second cas - il est présent.

Vous pourriez demander : comment est-ce possible, car en JavaScript le point-virgule à la fin d'une instruction n'est pas obligatoire ! En réalité, ce n'est pas tout à fait vrai. Voyons ce qui se passe réellement.

Le premier code peut être réécrit comme ceci :

let result = 1 + function() {
	return 2;
}();

console.log(result); // affichera 3

Maintenant, il devient immédiatement évident que au un on ajoute le résultat de l'appel de la fonction immédiate, c'est-à-dire 2. Par conséquent, le résultat final sera 3.

Si, après le un, on met un point-virgule, alors le code sera perçu différemment par l'interpréteur :

// Première instruction :
let result = 1;

// Seconde instruction :
+function() {
	return 2;
}();

// Troisième instruction :
console.log(result); // affichera 1

C'est-à-dire que l'affectation à la variable et l'appel de la fonction immédiate deviendront des instructions distinctes. Et tout cela à cause de la présence du point-virgule !

Il s'avère que dans ce cas, l'appel de la fonction immédiate ne fait rien du tout - il retourne simplement dans le vide le nombre 2, qui n'affecte en rien la variable result.

Voyons alors pourquoi nous pouvons généralement ne pas écrire de point-virgule en JavaScript. Prenons ce code sans points-virgules :

let result = 1 // dans result sera écrit 1
let test = 2   // dans test sera écrit 2

Il fonctionne correctement, car l'interpréteur a lui-même placé un point-virgule à la fin de chaque ligne.

Mais regardez ce code :

let result = 1
+ 2; // dans result sera écrit 3

Maintenant, le point-virgule à la fin de la première ligne ne sera pas placé automatiquement, car l'interpréteur comprend que l'instruction de la deuxième ligne fait partie de l'instruction de la première ligne.

Mais si nous mettons nous-mêmes le point-virgule - le résultat sera complètement différent :

let result = 1; // dans result sera écrit 1
+ 2; // l'instruction ne fait rien, mais il n'y aura pas d'erreur non plus

Il s'avère que l'interpréteur place lui-même un point-virgule, seulement si l'instruction suivante ne fait pas partie de la précédente.

Et maintenant, regardez ce code :

let result = 1
+function() {
	return 2;
}();

console.log(result);

En effet, la deuxième ligne est simplement la suite de l'instruction de la première ligne et l'interpréteur ne place pas de point-virgule automatiquement. C'est pourquoi, si nous écrivons nous-mêmes le point-virgule à la fin de la première ligne - le résultat sera complètement différent. Cela indique qu'il est préférable de toujours placer un point-virgule aux endroits appropriés, afin d'éviter les problèmes.