Home › Programmazione › Front-end › L’hoisting delle funzioni in JavaScript

L’hoisting delle funzioni in JavaScript

Pubblicato il da Alex — Nessun Commento ↓

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.myMethod3 = function () {
        };

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

    }

Indice:

Articoli che potrebbero interessarti:

  1. L’hoisting in JavaScript L’hoisting consente di utilizzare variabili e funzioni prima della loro dichiarazione In qualsiasi codice scritto con JavaScript le variabili sono...
  2. Il ciclo di vita delle funzioni in JavaScript In JavaScript è possibile utilizzare funzioni ancora prima di dichiararle grazie al ciclo di vita delle funzioni che eseguono tutte...
  3. Il ciclo di vita delle variabili, funzioni e classi in JavaScript Comprendere il ciclo di vita delle variavili e funzioni in JavaScript consente evitare errori e scrivere un codice migliore e...
  4. L’hoisting delle variabili let in JavaScript Le variabili let non sfruttano l’hoisting e non possono essere lette prima della loro dichiarazione per la temporal dead zone...
  5. L’hoisting delle costanti in JavaScript Le costanti non sfruttano l’hoisting, per poterle utilizzare bisogna prima dichiararle e poi utilizzarle per non generare errori In JavaScript...
Pubblicato in Front-end, JavaScript Taggato con: , , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*