Cosa significa (function() {} ) () in Javascript

di Lorenzo Neri
0 commento 109 visualizzazioni

Cosa significa (function() {} ) () in Javascript? Sembra ostrogoto vero? In questo articolo cerchiamo di capire cosa significa questa riga stramba di codice.

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! 😀

Potrebbero interessarti

Lascia un commento

Questo sito potrebbe fare uso di cookie e siccome l'UE mi obbliga a fartelo presente, eccoti il classico banner dove puoi decidere come gestirli. Accetta Leggi di più