Lezione 11: Dichiarare e Invocare Funzioni in JavaScript

Introduzione alle Funzioni: Il Cuore della Programmazione

Benvenuti alla Lezione 11 del nostro corso "Impara JavaScript in 50 lezioni". Fino a questo momento, abbiamo scritto codice che viene eseguito in modo lineare: il browser legge la prima riga, poi la seconda, poi la terza, e così via. Questo approccio è perfetto per script molto semplici, ma diventa rapidamente ingestibile quando l'applicazione cresce.

Immaginate di dover calcolare l'IVA di un prodotto in dieci punti diversi della vostra pagina web. Senza le funzioni, dovreste scrivere la formula matematica dieci volte. Se domani l'aliquota IVA dovesse cambiare, dovreste cercare e modificare ogni singolo calcolo, rischiando di dimenticarne qualcuno e introducendo bug nel sistema.

Qui entrano in gioco le funzioni. Una funzione è, in termini semplici, un blocco di codice progettato per eseguire una particolare attività. Potete pensare a una funzione come a una "ricetta": definite una volta cosa fare e poi potete "cucinare" quel piatto ogni volta che ne avete bisogno, semplicemente chiamando il nome della ricetta.

Come Dichiarare una Funzione

In JavaScript, dichiarare una funzione significa definirne il nome e il corpo del codice che deve essere eseguito. La sintassi standard per la dichiarazione di una funzione (nota come Function Declaration) è la seguente:

function nomeDellaFunzione() {
  // Codice da eseguire
  console.log("Ciao! Questa funzione è stata eseguita.");
}

Analisi della Sintassi

1. La parola chiave function: Indica al motore JavaScript che stiamo definendo una nuova funzione.
2. Il nome (nomeDellaFunzione): È l'identificatore che useremo per richiamare la funzione. Per convenzione, in JavaScript si usa il camelCase (es. calcolaTotale, inviaMessaggio).
3. Le parentesi tonde (): Queste parentesi servono a contenere i parametri (argomenti) che la funzione potrebbe ricevere. Anche se la funzione non accetta dati in ingresso, le parentesi sono obbligatorie.
4. Le parentesi graffe {}: Delimitano il "corpo" della funzione. Tutto ciò che si trova all'interno di queste graffe verrà eseguito solo quando la funzione verrà invocata.

È fondamentale capire che la sola dichiarazione non esegue il codice. Se scrivete una funzione e non la chiamate, il browser la memorizzerà nella memoria, ma non accadrà nulla a schermo.

Invocare (o Chiamare) una Funzione

L'invocazione è l'atto di dire a JavaScript: "Esegui ora il codice che ho definito in quella funzione". Per farlo, basta scrivere il nome della funzione seguito dalle parentesi tonde.

// 1. Dichiarazione
function salutaUtente() {
  console.log("Benvenuto nel nostro sito!");
  console.log("Speriamo che tu stia imparando molto.");
}

// 2. Invocazione
salutaUtente(); // Esegue il codice sopra
salutaUtente(); // Possiamo richiamarla quante volte vogliamo

Nel codice precedente, abbiamo definito salutaUtente una sola volta, ma l'abbiamo invocata due volte. Questo è il principio fondamentale del DRY (Don't Repeat Yourself): non ripeterti. Invece di scrivere quattro console.log, abbiamo scritto una funzione e l'abbiamo richiamata.

Parametri e Argomenti: Passare Dati alle Funzioni

Le funzioni diventano realmente potenti quando possono lavorare con dati variabili. A questo scopo utilizziamo i parametri.

Un parametro è come un "segnaposto" o una variabile locale che esiste solo all'interno della funzione. Quando invochiamo la funzione, passiamo dei valori reali a questi segnaposti; questi valori concreti vengono chiamati argomenti.

Esempio di Funzione con Parametri

function benvenutoPersonalizzato(nome, citta) {
  console.log("Ciao " + nome + " di " + citta + "!");
}

// Invocazione con argomenti diversi
benvenutoPersonalizzato("Marco", "Roma");    // Output: Ciao Marco di Roma!
benvenutoPersonalizzato("Giulia", "Milano"); // Output: Ciao Giulia di Milano!

In questo esempio, nome e citta sono i parametri. Quando chiamiamo benvenutoPersonalizzato("Marco", "Roma"), JavaScript assegna automaticamente il valore "Marco" alla variabile nome e "Roma" alla variabile citta per la durata dell'esecuzione della funzione.

Il Valore di Ritorno: L'istruzione return

Finora abbiamo usato le funzioni per stampare messaggi a console. Tuttavia, spesso abbiamo bisogno che una funzione faccia un calcolo e ci "restituisca" il risultato per poterlo usare altrove nel programma. Per fare questo si usa la parola chiave return.

Senza return, una funzione esegue le sue istruzioni e poi "muore", restituendo implicitamente il valore undefined.

Esempio di Funzione con Return

function calcolaAreaRettangolo(base, altezza) {
  let area = base * altezza;
  return area; // La funzione "sputa fuori" il risultato
}

// Ora possiamo salvare il risultato in una variabile
let miaArea = calcolaAreaRettangolo(10, 5);
console.log("L'area del rettangolo è: " + miaArea); // Output: 50

// Oppure possiamo usare il risultato direttamente in un'altra operazione
let areaTotale = calcolaAreaRettangolo(10, 5) + calcolaAreaRettangolo(2, 3);
console.log("Area totale: " + areaTotale); // 50 + 6 = 56

Importante: L'istruzione return interrompe immediatamente l'esecuzione della funzione. Qualsiasi codice scritto dopo il return all'interno dello stesso blocco non verrà mai eseguito (questo è chiamato unreachable code).

Esempi Pratici e Casi d'Uso Reali

Per capire come applicare queste conoscenze in un progetto web reale, consideriamo due scenari comuni.

Caso 1: Validazione di un modulo

Immaginate di avere un campo di input per l'email. Invece di scrivere la logica di controllo ogni volta che l'utente preme un tasto o invia il form, create una funzione di validazione.

function validaEmail(email) {
  if (email.includes("@") && email.includes(".")) {
    return true; // Email valida
  } else {
    return false; // Email non valida
  }
}

let emailUtente = "test@esempio.com";
if (validaEmail(emailUtente)) {
  console.log("Procedi con l'invio");
} else {
  console.log("Per favore, inserisci un'email valida");
}

Caso 2: Formattazione di valute

In un e-commerce, vorrete mostrare i prezzi in un formato leggibile (es. "10,00 €"). Una funzione dedicata rende il codice pulito.

function formattaPrezzo(valore) {
  return valore.toFixed(2) + " €";
}

let prezzoProdotto = 19.9;
console.log("Il prezzo finale è " + formattaPrezzo(prezzoProdotto)); // "Il prezzo finale è 19.90 €"

Errori Comuni e FAQ

1. Dimenticare le parentesi nell'invocazione

Un errore classico per i principianti è scrivere il nome della funzione senza le parentesi: salutaUtente; invece di salutaUtente();.

• Scrivere salutaUtente (senza parentesi) significa fare riferimento alla funzione stessa (come se fosse una variabile che contiene il codice).
• Scrivere salutaUtente() significa "esegui il codice ora".

2. Confondere Parametri e Argomenti

Ricordate: i parametri sono i nomi definiti nella dichiarazione (es. nome), gli argomenti sono i valori reali passati durante la chiamata (es. "Marco").

3. Posizionamento del return

Se scrivete un return all'interno di un ciclo o di un if, assicuratevi che ci sia un percorso di uscita per ogni possibile scenario, altrimenti la funzione potrebbe restituire undefined inaspettatamente.

Prossimi Passi

Ora che sapete come dichiarare e invocare funzioni, avete unlocked una delle capacità più potenti di JavaScript. Tuttavia, questo è solo l'inizio. Per approfondire, vi suggeriamo di esplorare i seguenti argomenti nelle prossime lezioni:

1. Scope (Ambito delle variabili): Capire la differenza tra variabili globali e variabili locali (definite all'interno di una funzione).
2. Arrow Functions: Una sintassi più moderna e concisa introdotta con ES6 per scrivere funzioni (es. const somma = (a, b) => a + b;).
3. Funzioni Anonime e Callback: Imparare a passare una funzione come argomento a un'altra funzione, un concetto fondamentale per gestire l'asincronia in JavaScript.

Esercizio consigliato: Provate a creare una funzione che riceva l'anno di nascita di una persona e restituisca la sua età attuale, calcolandola rispetto all'anno in corso!