L'hoisting delle funzioni in JavaScript

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:

    console.log(myFunction()); // => Datrevo
    function myFunction() {
        return "Datrevo";
    }

Il codice risulta equivalente a:

    function myFunction() {
        return "Datrevo";
    }
    console.log(myFunction()); // => Datrevo

Attenzione però, l’hoisting non si applica allo stesso modo per la dichirazione di funzioni (function () {…}) e alle espressioni di funzioni (var = function() {…}).

    console.log(myFunction()); // => TypeError: myFunction is not a 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:

    console.log(myFunction); // => 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.

function MyController() {

        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:

function MyController($scope) {

var myController = {};

myController.myController.myMethod1 = function () {
};

myController.myController.myMethod3 = function () {
};

myController.myController.myMethod4 = function () {
};

}

Indice:

L’hoisting delle funzioni in JavaScript consente di utilizzare le funzioni prima di dichiararle e consente di scrivere codice più leggibile

Lascia un commento Annulla risposta

Lascia un commento