Insidie delle IIFE in JavaScript

Esaminiamo due frammenti di codice.

Il primo:

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

console.log(result);

Il secondo:

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

console.log(result);

Questi due frammenti di codice sono quasi identici, ma se eseguiti, il risultato sarà diverso. Il primo codice stamperà nella console il numero 3, mentre il secondo - il numero 1.

Perché c'è una tale differenza: il punto è tutto nel fatto che in un caso alla fine della prima riga di codice manca il punto e virgola, e nel secondo caso - è presente.

Potresti chiedere: come è possibile, dato che in JavaScript il punto e virgola alla fine di un'istruzione non è obbligatorio! In realtà non è del tutto così. Scopriamo cosa succede realmente.

Il primo codice può essere riscritto così:

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

console.log(result); // stamperà 3

Ora diventa immediatamente ovvio che all'uno viene aggiunto il risultato della chiamata della funzione invocata immediatamente, cioè 2. Pertanto il risultato finale sarà 3.

Se invece dopo l'uno mettiamo un punto e virgola, il codice verrà interpretato in modo diverso dall'interprete:

// Prima istruzione:
let result = 1;

// Seconda istruzione:
+function() {
	return 2;
}();

// Terza istruzione:
console.log(result); // stamperà 1

Cioè l'assegnamento alla variabile e la chiamata della funzione invocata immediatamente diventeranno istruzioni separate. E tutto a causa della presenza del punto e virgola!

Risulta che in questo caso la chiamata della funzione invocata immediatamente non fa praticamente nulla - semplicemente restituisce il numero 2 nel nulla, che non influisce in alcun modo sulla variabile result.

Allora cerchiamo di capire, perché possiamo comunque non scrivere il punto e virgola in JavaScript. Supponiamo di avere un codice così, senza punti e virgola:

let result = 1 // in result verrà scritto 1
let test = 2   // in test verrà scritto 2

Funziona correttamente, poiché l'interprete ha automaticamente inserito un punto e virgola alla fine di ogni riga.

Ma guardate questo codice:

let result = 1
+ 2; // in result verrà scritto 3

Ora il punto e virgola alla fine della prima riga non verrà inserito automaticamente, poiché l'interprete capisce che l'istruzione della seconda riga fa parte dell'istruzione della prima riga.

Ma se noi stessi mettiamo il punto e virgola - il risultato sarà completamente diverso:

let result = 1; // in result verrà scritto 1
+ 2; // l'istruzione non fa nulla, ma non ci sarà errore

Risulta che l'interprete inserisce da solo il punto e virgola, solo se l'istruzione successiva non fa parte di quella precedente.

E ora guardate questo codice:

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

console.log(result);

Infatti, la seconda riga è semplicemente la continuazione dell'istruzione della prima riga e l'interprete non inserisce il punto e virgola automaticamente. È proprio per questo che, se noi stessi scriviamo il punto e virgola alla fine della prima riga - il risultato sarà completamente diverso. Questo ci dice che è meglio sempre inserire il punto e virgola nei punti necessari, per evitare problemi.