L’hoisting delle funzioni in JavaScript consente di utilizzare le funzioni prima di dichiararle e consente di scrivere codice più leggibile
In JavaScript, grazie all’hoisting è possibile utilizzare una funzione indipendentemente da dove viene definita. Per le funzioni non viene restituito undefined o errori di accesso come per le variabili let (temporal dead zone). Il seguente codice viene correttamente eseguito:
function myFunction() {
return "Datrevo";
}
Il codice risulta equivalente a:
return "Datrevo";
}
console.log(myFunction()); // => Datrevo
Attenzione però, l’hoisting non si applica allo stesso modo per la dichirazione di funzioni (function
var myFunction = function () {
return "Datrevo";
};
Dato che la funzione è stata definita usando la var, verrà applicato l’hoisting solo per la variabile, non per la funzione. Di conseguenza, cercare di eseguire la funzione myFunction() provoca un errore, mentre leggerne il valore verrà restituito undefined:
var myFunction = function () {
return "Datrevo";
};
Per maggiori informazioni sul ciclo di vita delle funzioni: Il ciclo di vita delle funzioni in JavaScript.
In alcuni casi però, per le funzioni si preferisce sfruttare l’hoisting e non seguire la regola “dichiara, inizializza e poi usa” per aumentare la leggibilità del codice. Ad esempio in Angular JS in cui le funzioni sono assegnate in cima allo scope, mentre i dettagli implementativi vengono spostato in basso al codice sfruttando l’hoisting delle function.
var myController = this;
myController.myMethod1 = myMethod1;
myController.myMethod3 = myMethod2;
myController.myMethod3 = myMethod3;
myController.myMethod4 = myMethod4;
function myMethod1() {
}
function myMethod2() {
}
function myMethod3() {
}
function myMethod4() {
}
}
Il codice appena mostrato risulta molto più leggibile ed immediato di:
var myController = {};
myController.myController.myMethod1 = function () {
};
myController.myController.myMethod3 = function () {
};
myController.myController.myMethod3 = function () {
};
myController.myController.myMethod4 = function () {
};
}
Indice:
