Dichiarazione di funzione in JavaScript: sintassi, hoisting e return

Una funzione è un blocco di passaggi con un nome

Ogni volta che vuoi dare un nome a un pezzo di logica e riutilizzarlo, scrivi una funzione. Il modo più vecchio e diretto in JavaScript è la dichiarazione di funzione: la parola chiave function seguita da un nome.

function greet(name) {
    return "Hello, " + name;
}

console.log(greet("Ada"));
console.log(greet("Boris"));

Leggendola da sinistra a destra:

• function è la parola chiave che apre una dichiarazione.
• greet è il nome della funzione.
• (name) è la lista dei parametri: gli input che la funzione riceve.
• Il blocco tra graffe è il corpo.
• greet("Ada") è una chiamata. JavaScript esegue il corpo con name legato a "Ada".

Definire una funzione non la esegue. È la chiamata che la esegue.

Parametri e argomenti

La parola parametro indica il nome dentro la definizione della funzione. La parola argomento indica il valore passato quando la chiami. Nel parlato si usano come sinonimi; la distinzione conta quando leggi i messaggi di errore.

function power(base, exponent) {
    return base ** exponent;
}

console.log(power(2, 10));
console.log(power(5, 3));

Qui base e exponent sono parametri. 2 e 10 sono argomenti. JavaScript li collega in ordine: il primo argomento al primo parametro, e così via.

A differenza di altri linguaggi, JavaScript non si lamenta se passi un numero sbagliato di argomenti. Quelli mancanti diventano undefined; quelli in più vengono ignorati in silenzio. È flessibile e a volte una trappola: vedremo i valori di default e i parametri rest in pagine successive.

return restituisce un valore

console.log scrive nell'output. return restituisce un valore a chi ha chiamato la funzione, così può usarlo:

function power(base, exponent) {
    return base ** exponent;
}

const result = power(2, 10);
console.log(result + 1);

Senza return, una funzione restituisce undefined:

function greet(name) {
    console.log("Ciao, " + name);
}

const value = greet("Ada");
console.log("restituito:", value);

return fa anche uscire subito dalla funzione. I return anticipati sono il modo standard per gestire i casi limite prima della logica principale:

function discount(price, percent) {
    if (percent < 0 || percent > 100) {
        return null;
    }
    return price * (1 - percent / 100);
}

console.log(discount(50, 20));
console.log(discount(50, 150));

I return anticipati evitano che il corpo principale diventi una piramide di if/else.

Hoisting: puoi chiamarla prima di definirla

Ecco una cosa che sorprende davvero chi arriva da altri linguaggi. Le dichiarazioni di funzione subiscono l'hoisting: JavaScript le porta in cima al loro scope prima di eseguire qualsiasi codice. Questo significa che puoi chiamare una funzione su una riga che sta sopra la sua dichiarazione:

console.log(square(5));

function square(n) {
    return n * n;
}

Questo codice funziona senza problemi. Prima dell'esecuzione, il motore analizza lo scope, registra square come funzione e solo dopo inizia a eseguire le istruzioni dall'alto verso il basso.

È una differenza di comportamento reale tra le dichiarazioni di funzione e gli altri modi di creare una funzione (function expression, arrow function). Quelli subiscono l'hoisting come le variabili: il nome è noto, ma il valore viene assegnato solo quando la riga viene eseguita. Ne parliamo meglio tra poco.

La maggior parte delle guide di stile consiglia comunque di definire le funzioni prima di chiamarle. L'hoisting è una rete di sicurezza, non uno stile su cui fare affidamento.

Dichiarazioni ed espressioni

Una dichiarazione di funzione è un'istruzione a sé stante. Un'espressione di funzione compare dove ci si aspetta un valore, quasi sempre a destra di un'assegnazione:

// Declaration - hoisted.
function add(a, b) {
    return a + b;
}

// Expression - assigned to a variable.
const multiply = function (a, b) {
    return a * b;
};

console.log(add(2, 3));
console.log(multiply(2, 3));

Entrambe producono funzioni che puoi chiamare. Le differenze:

• Le dichiarazioni subiscono l'hoisting per intero. Le espressioni seguono le regole di hoisting della variabile a cui sono assegnate (const e let restano nella temporal dead zone finché la riga non viene eseguita).
• Le dichiarazioni devono avere un nome. Le espressioni possono essere anonime, anche se dargli un nome aiuta a leggere gli stack trace.
• Le dichiarazioni non possono stare ovunque. In strict mode, una function foo() {} dentro un blocco if si comporta in modo incoerente tra i vari motori: lì usa un'espressione.

Per la maggior parte degli helper di primo livello in un file, una dichiarazione si legge bene. Per le funzioni passate come argomenti o assegnate a proprietà, di solito si sceglie un'espressione (o una arrow function).

Nomi e stile

Il nome di una funzione è una promessa su ciò che fa. Spendere qualche carattere in più per sceglierne uno descrittivo si ripaga la prima volta che qualcuno legge il codice.

// Hard to follow:
function p(x, y) {
    return x * (1 + y);
}

// Easy to follow:
function priceWithTax(price, taxRate) {
    return price * (1 + taxRate);
}

console.log(priceWithTax(1200, 0.08));

Qualche convenzione che vale la pena adottare:

• I nomi delle funzioni dovrebbero essere verbi: fetchProfile, computeTotal, sendEmail.
• Usa il camelCase: è la norma in JavaScript.
• Le funzioni che restituiscono un booleano spesso iniziano con is, has o can: isValid, hasAccess, canEdit.

L'obiettivo è che il punto di chiamata si legga come una frase.

Un piccolo esempio completo

Mettiamo insieme i pezzi: parametri, return anticipato, un nome descrittivo:

function formatAddress(street, city, country, zip) {
    if (!street || !city) {
        return null;
    }
    const parts = [street, city];
    if (zip) parts.push(zip);
    parts.push(country || "US");
    return parts.join(", ");
}

console.log(formatAddress("1 Main St", "Boston"));
console.log(formatAddress("1 Main St", "Boston", "US", "02108"));
console.log(formatAddress("Place Vendôme 1", "Paris", "France"));

Una dichiarazione, una clausola di guardia, un return chiaro. Questa forma copre la maggior parte delle funzioni che scriverai.

Prossimo passo: le arrow function

Le dichiarazioni sono il cavallo da lavoro, ma il JavaScript moderno si appoggia molto a una sintassi più corta, le arrow function, soprattutto per callback e funzioni di una riga. Hanno un aspetto diverso, si comportano diversamente con this e sono l'argomento della prossima pagina.