📦 Cos'è una funzione — il blocco di codice riutilizzabile
Una funzione è un blocco di codice che esegue un compito specifico e che puoi richiamare (chiamare) tutte le volte che vuoi, senza riscriverlo. È il concetto più importante per scrivere codice organizzato: invece di ripetere le stesse righe in dieci punti diversi del programma, le scrivi una volta dentro una funzione e la richiami dove serve.
function salutaClasse() {
console.log('Ciao a tutti!');
}
// La funzione è definita ma NON è ancora stata eseguita.
// Per eseguirla, devi "chiamarla" con le parentesi:
salutaClasse(); // → stampa: Ciao a tutti!
salutaClasse(); // → la richiami di nuovo, stampa ancora: Ciao a tutti!
💡 Dichiarazione vs Chiamata: scrivere function salutaClasse(){...} la dichiara (definisce cosa fa), scrivere salutaClasse() la chiama (la esegue davvero). Sono due momenti diversi — una funzione dichiarata ma mai chiamata non fa nulla.
🧩 Le tre parti di una funzione
| Parte | Esempio | Significato |
|---|
| Keyword | function | Dice a JavaScript "sto per definire una funzione" |
| Nome | salutaClasse | L'identificatore con cui la richiamerai — usa sempre camelCase e un verbo (calcola, mostra, valida) |
| Corpo | { ... } | Il blocco di istruzioni che viene eseguito ad ogni chiamata |
🔘 Funzioni senza argomenti — il caso più semplice
Le funzioni senza argomenti non ricevono alcun dato dall'esterno: fanno sempre esattamente la stessa cosa ogni volta che vengono chiamate. Sono il punto di partenza più semplice per capire il concetto di funzione, prima di introdurre la variabilità dei parametri.
function stampaData() {
const oggi = new Date();
console.log('Oggi è: ' + oggi.toLocaleDateString('it-IT'));
}
stampaData(); // → Oggi è: 29/7/2026
function generaBenvenuto() {
return 'Benvenuto nel corso di Volta Institute!';
}
const messaggio = generaBenvenuto();
console.log(messaggio); // → Benvenuto nel corso di Volta Institute!
💡 return vs console.log: console.log() stampa solo a video (utile per il debug), return restituisce un valore che puoi usare altrove nel programma — es. salvarlo in una variabile, passarlo a un'altra funzione. Una funzione senza return esplicito restituisce sempre undefined.
🎲 Esempio pratico: funzione senza argomenti che genera un valore casuale
function lanciaDado() {
return Math.floor(Math.random() * 6) + 1;
}
console.log(lanciaDado()); // → un numero tra 1 e 6, diverso ogni volta
⚠️ Anche se lanciaDado() non riceve argomenti, il suo risultato può comunque variare ad ogni chiamata — "senza argomenti" non significa "sempre lo stesso risultato", significa solo che non riceve dati esterni al momento della chiamata.
🎯 Funzioni con argomenti — rendere la funzione flessibile
Le funzioni con argomenti (o parametri) ricevono dati dall'esterno e li usano per calcolare un risultato diverso ogni volta. Questo è ciò che rende le funzioni davvero potenti: la stessa funzione può comportarsi in modo diverso a seconda di cosa le passi.
function saluta(nome) {
console.log(`Ciao, ${nome}!`);
}
saluta('Marco'); // → Ciao, Marco!
saluta('Giulia'); // → Ciao, Giulia!
// Con più parametri, separati da virgola:
function somma(a, b) {
return a + b;
}
console.log(somma(5, 3)); // → 8
💡 Parametro vs Argomento — la distinzione tecnica: nome nella dichiarazione della funzione si chiama parametro (il "contenitore" vuoto che aspetta un valore). 'Marco' quando chiami la funzione si chiama argomento (il valore reale che passi). Nell'uso quotidiano i due termini vengono spesso usati come sinonimi, ma la distinzione tecnica è utile da conoscere.
📐 Ordine dei parametri: conta la posizione, non il nome
function presentazione(nome, età, città) {
console.log(`${nome}, ${età} anni, di ${città}`);
}
presentazione('Anna', 28, 'Napoli');
// → Anna, 28 anni, di Napoli
// Se inverti l'ORDINE degli argomenti, il risultato cambia (bug comune!):
presentazione(28, 'Anna', 'Napoli');
// → 28, Anna anni, di Napoli (sbagliato! l'ordine conta)
⚠️ JavaScript assegna gli argomenti ai parametri in base alla posizione, non al significato. Il primo argomento passato va sempre al primo parametro dichiarato, qualunque cosa rappresenti. Questo è l'errore più comune nei primi esercizi con le funzioni.
🔢 Cosa succede con troppi o troppo pochi argomenti?
function moltiplica(a, b) {
return a * b;
}
console.log(moltiplica(4, 5, 100)); // → 20 (il terzo argomento viene ignorato)
console.log(moltiplica(4)); // → NaN (b è undefined, e undefined * 4 = NaN)
💡 A differenza di altri linguaggi, JavaScript non genera un errore se passi più o meno argomenti del previsto: quelli in eccesso vengono ignorati, quelli mancanti diventano undefined. Per proteggersi da questo, si usano i parametri di default (sezione successiva).
⚙️ Parametri di default — un valore di riserva
I parametri di default (introdotti con ES6) assegnano un valore automatico a un parametro quando la chiamata non lo fornisce — proteggendo la funzione dal problema visto sopra (argomenti mancanti che diventano undefined).
function saluta(nome = 'Ospite') {
console.log(`Ciao, ${nome}!`);
}
saluta('Marco'); // → Ciao, Marco!
saluta(); // → Ciao, Ospite! (usa il default perché non hai passato nulla)
💡 Il default si attiva solo quando l'argomento è undefined (cioè non passato) — se passi esplicitamente null o una stringa vuota, il default NON si attiva.
📦 Rest parameter — raccogliere un numero variabile di argomenti
A volte non sai in anticipo quanti argomenti riceverà la funzione. Il rest parameter (...nome) raccoglie tutti gli argomenti extra in un array.
function sommaTutti(...numeri) {
return numeri.reduce((tot, n) => tot + n, 0);
}
console.log(sommaTutti(1, 2, 3)); // → 6
console.log(sommaTutti(10, 20, 30, 40)); // → 100
✅ Utile quando scrivi funzioni "generiche" (es. una funzione somma che deve accettare 2, 5 o 20 numeri) senza dover indovinare in anticipo quanti parametri dichiarare.
➡️ Arrow function — la sintassi moderna e compatta
Le arrow function (funzioni freccia, ES6) sono un modo più compatto di scrivere funzioni, molto diffuso nel codice JavaScript moderno — specialmente per funzioni brevi passate come argomento ad altre funzioni.
// Funzione tradizionale:
function quadrato(n) {
return n * n;
}
// La stessa funzione come arrow function:
const quadrato = (n) => {
return n * n;
};
// Forma ultra-compatta (return implicito, senza { } e senza "return"):
const quadrato = n => n * n;
console.log(quadrato(5)); // → 25 (tutte e tre le versioni sono equivalenti)
💡 Quando usare la forma compatta: se il corpo della funzione è una singola espressione da restituire, puoi omettere { } e return — JavaScript restituisce automaticamente il risultato di quell'espressione. Per corpi con più istruzioni, servono sempre le graffe e il return esplicito.
🔄 Dove le arrow function si usano di più: dentro altre funzioni
const numeri = [1, 2, 3, 4];
// map() riceve una funzione come argomento — l'arrow function è perfetta qui:
const raddoppiati = numeri.map(n => n * 2);
console.log(raddoppiati); // → [2, 4, 6, 8]
✅ Questo è l'uso più comune delle arrow function nel JavaScript reale: come argomento breve e "usa e getta" passato a metodi come map, filter, forEach — argomenti trattati in dettaglio nella guida sugli Array.