Cosa significa (function() {} ) () in Javascript? Sembra ostrogoto vero? In questo articolo cerchiamo di capire cosa significa questa riga stramba di codice.
Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!
Questa riga di codice, scritta in maniera più leggibile, può essere che ti sia capitato di vederla così:
(function () {
})();
Nel caso non lo sapessi, scrivere queste righe di codice all’inizio di una pagina web, può essere un’alternativa a scrivere:
document.onload();
Ovviamente, le cose non stanno proprio così, c’è molto di più.
Il significato di questa porzione di codice, ovvero “(function() {} ) ()” in JavaScript è molto altro.
Immmediately-Invoked Function Expression
Momento.
Che diavolo significano quei paroloni in tecnichese che ho appena scritto?!
IIFE ovvero “Immediately-Invoked Function Expression”, di cui ti lascio riferimenti aggiuntivi qui, significa semplicemente una cosa.
Ovvero:
Funzione che viene eseguita immediatamente al momento della sua creazione.
Di fatto, non ha niente a che vedere con la gestione degli eventi delle pagine web, come ad esempio tramite la “document.onload()” come dicevamo prima.
Perciò, dividiamola nelle sue componenti:
function () {
}
Questo, è il corpo della funzione che viene eseguito.
In altre parole, è il codice che tu desideri sia eseguito al momento dell’invocazione della funzione stessa.
Parliamo delle due parentesi tonde in fondo.
A che cosa servono?
Le due parentesi in fondo vengono aggiunte per eseguire l’invocazione di una funzione.
Nel nostro caso, sono essenziali per eseguire la funzione.
Ci manca un pezzo per dare un significato completo all’espressione.
Le parentesi tonte che racchiudono il corpo della funzione.
Loro, servono per creare un’espressione.
Un’espressione che serve ad invocare la funzione che è al loro interno in modo immediato.
Vediamola da un punto di vista globale:
//Apriamo la parentesi per l'invocazione immediata
(
//Scriviamo la funzione da far eseguire
function(){
//Codice che vuoi far eseguire
}
//Chiudiamo la parentesi per l'invocazione immediata
)
//Aggiungiamo le due parentesi per eseguire la funzione
();
Insomma, abbiamo visto cosa significa (function() {} ) () in Javascript.
Tuttavia, c’è un modo più compatto di scriverla.
In ES6.
Come?
Così:
( () => //corpo della funzione) ()
Come puoi notare, abbiamo usato la medesima sintassi per eseguire al momento della creazione una arrow function.
Per tanto, questa sintassi torna molto comoda per eseguire funzioni create “on the fly”.
Che intendo dire con “on the fly”?
Letteralmente, tradotto in italiano il significato è proprio questo: una funzione scritta al volo! 😀
