Diverse dichiarazioni di funzione

[lanvoel]

Ho fatto questa domanda in un'altra discussione, ma penso sia opportuno ripeterla a parte.
Desidererei conoscere la differenza tra il tipo di dichiarazione di funzione che uso abitualmente:
function nomeFunzione()
{
istruzioni;
}
e un altro che trovo in alcuni codici e che non conosco.
nomeFunzione=function()
{
istruzioni;
}
Perché ho già provato che non dono equivalenti.
Grazie

lanvoel

[andbin]

Perché ho già provato che non dono equivalenti.

Non sono equivalenti per diversi motivi. Innanzitutto la prima è una function declaration. La seconda è una function expression.

Una function expression, è una espressione e come tale può essere usata in un qualunque contesto che richiede una espressione, ad esempio passandola "al volo" in argomento ad un'altra funzione. Una function declaration no, non la puoi "passare" così al volo da qualche parte. E' una dichiarazione a sé stante.

Un altro motivo per cui sono diverse è per via del meccanismo di "hoisting" che c'è in Javascript. Hoisting vuol dire sostanzialmente che una dichiarazione viene spostata automaticamente all'inizio del codice (di una function o del global scope se fuori da una function).

function prova() {
    console.log(getMsg());

    function getMsg() {
        return "ciao";
    }
}
prova();

Viene tradotto dal motore Javascript in:

function prova() {
    function getMsg() {
        return "ciao";
    }

    console.log(getMsg());
}
prova();

La dichiarazione della funzione getMsg viene spostata (hoisting) all'inizio della funzione prova. Quindi anche se io ho scritto la getMsg dopo la invocazione, funziona lo stesso per via del hoisting e quindi su console viene loggato "ciao".

-----------------------------------

function prova() {
    console.log(getMsg());

    var getMsg = function() {
        return "ciao";
    }
}
prova();

Qui è diverso, getMsg è una function expression. Per via del hoisting viene spostata all'inizio della funzione solo la DICHIARAZIONE della variabile getMsg. NON viene spostata la inizializzazione!!

Quindi il motore Javascript lo traduce così:

function prova() {
    var getMsg;

    console.log(getMsg());

    getMsg = function() {
        return "ciao";
    }
}
prova();

L'inizializzazione di getMsg resta lì dove è nel sorgente. Ma il motore Javascript sposta la sola dichiarazione della variabile all'inizio.
Ora, così hai un bel errore a runtime, perché quando invoca getMsg() per il log, getMsg NON è ancora inizializzato! Lo sarà solo successivamente dopo il log.


Questi sono due motivi importanti per cui function declaration e function expression sono differenti.
Ci sono altre differenze minori comunque.

[lanvoel]

Grazie andbin, anche per i chiari esempi di codice

lanvoel