In JavaScript, una funzione non è una “struttura magica del linguaggio”, ma un tipo speciale di valore.

La sintassi che abbiamo usato prima è chiamata Dichiarazione di funzione:

function sayHi() { alert( "Hello" );}

C’è un’altra sintassi per creare una funzione che è chiamata Espressione di funzione.

Sembra così:

let sayHi = function() { alert( "Hello" );};

Qui, la funzione è creata e assegnata alla variabile esplicitamente, come qualsiasi altro valore. Non importa come la funzione è definita, è solo un valore memorizzato nella variabile sayHi.

Il significato di questi esempi di codice è lo stesso: “creare una funzione e metterla nella variabile sayHi“.

Possiamo anche stampare quel valore usando alert:

function sayHi() { alert( "Hello" );}alert( sayHi ); // shows the function code

Si noti che l’ultima linea non esegue la funzione, perché non ci sono parentesi dopo sayHi. Ci sono linguaggi di programmazione in cui qualsiasi menzione di un nome di funzione provoca la sua esecuzione, ma JavaScript non è così.

In JavaScript, una funzione è un valore, quindi possiamo trattarla come un valore. Il codice sopra mostra la sua rappresentazione in stringa, che è il codice sorgente.

Certo, una funzione è un valore speciale, nel senso che possiamo chiamarla come sayHi().

Ma è ancora un valore. Quindi possiamo lavorare con esso come con altri tipi di valori.

Possiamo copiare una funzione in un’altra variabile:

function sayHi() { // (1) create alert( "Hello" );}let func = sayHi; // (2) copyfunc(); // Hello // (3) run the copy (it works)!sayHi(); // Hello // this still works too (why wouldn't it)

let sayHi = function() { alert( "Hello" );};let func = sayHi;// ...

function sayHi() { // ...}let sayHi = function() { // ...};

function ask(question, yes, no) { if (confirm(question)) yes() else no();}function showOk() { alert( "You agreed." );}function showCancel() { alert( "You canceled the execution." );}// usage: functions showOk, showCancel are passed as arguments to askask("Do you agree?", showOk, showCancel);

function ask(question, yes, no) { if (confirm(question)) yes() else no();}ask( "Do you agree?", function() { alert("You agreed."); }, function() { alert("You canceled the execution."); });

sayHi("John"); // Hello, Johnfunction sayHi(name) { alert( `Hello, ${name}` );}

sayHi("John"); // error!let sayHi = function(name) { // (*) no magic any more alert( `Hello, ${name}` );};

Le espressioni di funzione vengono create quando l’esecuzione le raggiunge. Questo accadrebbe solo nella linea (*). Troppo tardi.

Un’altra caratteristica speciale delle dichiarazioni di funzione è il loro ambito di blocco.

In modo rigoroso, quando una dichiarazione di funzione è all’interno di un blocco di codice, è visibile ovunque all’interno di quel blocco. Ma non al di fuori di esso.

Per esempio, immaginiamo di dover dichiarare una funzione welcome() dipendente dalla variabile age che otteniamo durante il runtime. E poi abbiamo intenzione di usarla qualche tempo dopo.

Se usiamo la Dichiarazione di funzione, non funzionerà come previsto:

let age = prompt("What is your age?", 18);// conditionally declare a functionif (age < 18) { function welcome() { alert("Hello!"); }} else { function welcome() { alert("Greetings!"); }}// ...use it laterwelcome(); // Error: welcome is not defined

Questo perché una Dichiarazione di funzione è visibile solo dentro il blocco di codice in cui risiede.

Ecco un altro esempio:

let age = 16; // take 16 as an exampleif (age < 18) { welcome(); // \ (runs) // | function welcome() { // | alert("Hello!"); // | Function Declaration is available } // | everywhere in the block where it's declared // | welcome(); // / (runs)} else { function welcome() { alert("Greetings!"); }}// Here we're out of curly braces,// so we can not see Function Declarations made inside of them.welcome(); // Error: welcome is not defined

Come possiamo fare per rendere welcome visibile fuori da if?

L’approccio corretto sarebbe quello di usare un’espressione di funzione e assegnare welcome alla variabile che è dichiarata fuori da if e ha la visibilità adeguata.

Questo codice funziona come previsto:

let age = prompt("What is your age?", 18);let welcome;if (age < 18) { welcome = function() { alert("Hello!"); };} else { welcome = function() { alert("Greetings!"); };}welcome(); // ok now

O possiamo semplificarlo ulteriormente usando un operatore punto interrogativo ?:

let age = prompt("What is your age?", 18);let welcome = (age < 18) ? function() { alert("Hello!"); } : function() { alert("Greetings!"); };welcome(); // ok now

Sommario

• Le funzioni sono valori. Possono essere assegnati, copiati o dichiarati in qualsiasi punto del codice.
• Se la funzione è dichiarata come una dichiarazione separata nel flusso di codice principale, si chiama “Dichiarazione di funzione”.
• Se la funzione è creata come parte di un’espressione, si chiama “Espressione di funzione”.
• Le dichiarazioni di funzione sono elaborate prima che il blocco di codice sia eseguito. Sono visibili ovunque nel blocco.
• Le espressioni di funzione sono create quando il flusso di esecuzione le raggiunge.

Nella maggior parte dei casi in cui abbiamo bisogno di dichiarare una funzione, una Dichiarazione di funzione è preferibile, perché è visibile prima della dichiarazione stessa. Questo ci dà più flessibilità nell’organizzazione del codice, e di solito è più leggibile.

Quindi dovremmo usare un’Espressione di funzione solo quando una Dichiarazione di funzione non è adatta al compito. Abbiamo visto un paio di esempi di questo in questo capitolo, e ne vedremo altri in futuro.

Sì.