Funzioni JavaScript

Introduzione alle funzioni JavaScript

Una funzione è un blocco di codice riutilizzabile che esegue un compito specifico. Invece di ripetere le stesse istruzioni ovunque, le scrivi una volta sola, assegni loro un nome e le esegui ogni volta che ne hai bisogno chiamando la funzione. Le funzioni sono uno dei mattoni fondamentali di JavaScript: ti permettono di organizzare il codice, evitare duplicazioni e costruire programmi complessi a partire da piccoli pezzi testabili.

Questo capitolo spiega come definire le funzioni, come passare dati tramite parametri, come restituire dati con return, e le tre forme principali che incontrerai nel codice reale: dichiarazioni di funzione, espressioni di funzione e arrow function. Vengono anche illustrati hoisting e scope — due comportamenti che sorprendono i principianti.

Definire una funzione

Sintassi di base di una funzione

Una dichiarazione di funzione utilizza la parola chiave function, seguita da un nome, un elenco di parametri separati da virgole tra parentesi e un corpo di istruzioni tra parentesi graffe. Il corpo viene eseguito solo quando la funzione è chiamata — scritta come il nome della funzione seguito da parentesi.

function greet() {
    console.log("Hello, World!");
}

greet(); // call the function → Outputs: Hello, World!

Definire una funzione non fa nulla di per sé; nulla viene stampato finché greet() non viene eseguita.

Hoisting delle funzioni

Le dichiarazioni di funzione sono hoisted: il motore le registra prima che venga eseguito qualsiasi codice, quindi puoi chiamare una dichiarazione anche in una riga precedente a quella in cui è scritta.

Questo non si applica alle espressioni di funzione o alle arrow function (trattate di seguito) — queste sono disponibili solo dopo che la riga che le assegna viene eseguita. Chiamarle prima genera un ReferenceError o TypeError. Se vuoi sapere di più sul perché accade questo, consulta scope delle variabili.

Parametri e argomenti delle funzioni

Un parametro è un nome elencato nella definizione della funzione; un argomento è il valore effettivo che passi quando la chiami. All'interno del corpo, i parametri si comportano come variabili locali.

Passare parametri

Se chiami una funzione con meno argomenti che parametri, quelli mancanti sono undefined invece di generare un errore:

Parametri predefiniti

Per evitare undefined, ES6 ti permette di assegnare a un parametro un valore predefinito, utilizzato solo quando non viene passato alcun argomento (o viene passato undefined).

Rest parameter

Un rest parameter (scritto ...nome) raccoglie un numero qualsiasi di argomenti rimanenti in un vero array, così una funzione può accettare un numero variabile di input. Deve essere l'ultimo parametro.

I rest parameter condividono la sintassi con l'operatore spread ma svolgono il lavoro opposto. Consulta rest parameter e sintassi spread per il quadro completo.

L'istruzione return

Una funzione può restituire un valore al chiamante con return. Il valore restituito può essere memorizzato in una variabile o utilizzato direttamente in un'espressione.

return interrompe anche immediatamente la funzione — qualsiasi codice successivo viene saltato. Una funzione senza return (o con un semplice return;) restituisce undefined.

Funzioni anonime ed espressioni di funzione

Espressioni di funzione

Un'espressione di funzione memorizza una funzione in una variabile. A differenza di una dichiarazione, la funzione viene creata quando l'esecuzione raggiunge quella riga, quindi non è hoisted — puoi chiamarla solo successivamente.

Funzioni anonime

La funzione sopra non aveva un nome — questa è una funzione anonima. Sono comuni come argomenti ad altre funzioni, ad esempio callback passate a metodi di array come forEach o a setTimeout. (Consulta introduzione ai callback.)

Arrow function in ES6

Sintassi delle arrow function

ES6 ha introdotto le arrow function, una sintassi concisa per le espressioni di funzione. Quando il corpo è una singola espressione, puoi omettere le parentesi graffe e la parola chiave return — il valore dell'espressione viene restituito automaticamente.

Le arrow function non hanno un proprio this

Le arrow function non legano il proprio this; lo ereditano dallo scope circostante. Questo le rende ideali come callback all'interno di metodi di object, dove una funzione normale perderebbe il this dell'object.

Per ulteriori informazioni su come this viene risolto all'interno dei metodi, leggi metodi degli object, this.

Scegliere la forma giusta

• Dichiarazione di funzione (function foo() {}) — hoisted, ideale per utilità con nome di primo livello che puoi chiamare da qualsiasi parte.
• Espressione di funzione (const foo = function() {}) — creata in loco; utile quando vuoi assegnare o passare una funzione in modo condizionale.
• Arrow function (const foo = () => {}) — sintassi più breve, nessun proprio this; preferita per callback brevi.

Le funzioni sono anche il fondamento per pattern più avanzati come closure e ricorsione.

Conclusione

Le funzioni ti permettono di racchiudere la logica una volta sola e riutilizzarla ovunque. Hai visto come definirle, come passare argomenti (inclusi valori predefiniti e rest parameter), come restituire risultati, e le differenze tra dichiarazioni, espressioni e arrow function — oltre ai comportamenti di hoisting e this che le distinguono. Padroneggiare queste forme è un passo fondamentale verso la scrittura di codice JavaScript pulito e manutenibile.

Pratica