Funzioni

Bentornato.

Nella lezione precedente hai insegnato a JavaScript a prendere decisioni.

JavaScript ha imparato if, else, operatori di confronto e operatori logici.

Molto potente.

Leggermente pericoloso.

Oggi insegniamo a JavaScript a riusare codice.

Questo significa che impariamo le funzioni.

Le funzioni sono una delle idee più importanti nella programmazione.

Una funzione è un blocco di codice riutilizzabile.

Invece di scrivere lo stesso codice ancora e ancora, lo scrivi una volta, gli dai un nome e lo chiami quando ti serve.

Senza funzioni, il tuo codice diventa zuppa di copia-incolla.

Con le funzioni, il codice diventa più pulito, più facile da capire e meno pronto ad attaccarti alle 2 di notte.

Molto importante.

Il tuo futuro io si sta già preparando a ringraziarti.

Cosa Imparerai

In questa lezione imparerai:

cosa sono le funzioni;
come creare una funzione;
come chiamare una funzione;
come funzionano i parametri;
come funzionano gli argomenti;
come restituire valori;
come evitare codice ripetuto;
come usare funzioni con condizioni;
come usare funzioni con il DOM;
come costruire un piccolo calcolatore di prezzo.

Alla fine di questa lezione saprai organizzare codice JavaScript in pezzi riutilizzabili.

Questo è un grande passo.

Le variabili ricordano valori.

Le condizioni prendono decisioni.

Le funzioni creano azioni che puoi riusare.

JavaScript sta lentamente diventando una creatura civilizzata.

Più o meno.

Cos’è una Funzione?

Una funzione è un blocco di codice con un nome.

Esempio:

function sayHello() {
  console.log("Ciao!");
}

Questo crea una funzione chiamata sayHello.

Ma creare una funzione non la esegue.

Per eseguirla, devi chiamarla:

sayHello();

Esempio completo:

function sayHello() {
  console.log("Ciao!");
}

sayHello();

Output:

Ciao!

Pensa a una funzione come a una macchina.

Costruisci la macchina una volta.

Poi premi il pulsante ogni volta che vuoi farla lavorare.

Molto utile.

Soprattutto se la macchina non esplode.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir javascript-lesson4
cd javascript-lesson4
touch index.html
touch script.js

Il tuo progetto dovrebbe essere così:

javascript-lesson4/
  index.html
  script.js

Apri la cartella nel tuo editor.

Inizieremo nella console.

Poi useremo funzioni per aggiornare una pagina web.

Semplice.

Pulito.

Nessun drago framework oggi.

Scrivi l’HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Funzioni</title>
</head>
<body>
  <h1>Funzioni</h1>
  <p>Apri la console del browser per vedere l’output di JavaScript.</p>

  <script src="script.js"></script>
</body>
</html>

Apri il file nel browser.

Apri la console:

fai click destro sulla pagina;
scegli Ispeziona;
apri la tab Console.

Ora JavaScript è pronto.

La console osserva.

Di nuovo.

La Tua Prima Funzione

Apri script.js e aggiungi:

function greetUser() {
  console.log("Benvenuto in JavaScript!");
}

greetUser();

Aggiorna il browser.

Dovresti vedere:

Benvenuto in JavaScript!

Cosa è successo?

function greetUser() {
  console.log("Benvenuto in JavaScript!");
}

Questo definisce la funzione.

greetUser();

Questo chiama la funzione.

Una funzione non parte finché non la chiami.

Questo è importante.

Scrivere una funzione è come scrivere una ricetta.

Chiamare una funzione è come cucinare davvero.

Se scrivi solo la ricetta, nessuno mangia.

Triste.

Ma organizzato.

Chiamare una Funzione Più Volte

Puoi chiamare la stessa funzione più di una volta.

function greetUser() {
  console.log("Benvenuto in JavaScript!");
}

greetUser();
greetUser();
greetUser();

Output:

Benvenuto in JavaScript!
Benvenuto in JavaScript!
Benvenuto in JavaScript!

Il codice dentro la funzione parte ogni volta che la chiami.

Questo è il potere delle funzioni.

Scrivi una volta.

Usa tante volte.

Meno copia-incolla.

Meno caos.

Più dignità.

Perché le Funzioni Sono Utili

Senza funzione:

console.log("Benvenuta, Anna!");
console.log("Benvenuto, Marco!");
console.log("Benvenuto, Viktor!");

Funziona.

Ma immagina di farlo in molti punti.

Ora con una funzione:

function welcomeUser(name) {
  console.log(`Benvenuto, ${name}!`);
}

welcomeUser("Anna");
welcomeUser("Marco");
welcomeUser("Viktor");

Molto meglio.

La funzione contiene la logica.

Il nome cambia.

La struttura resta uguale.

Così i programmatori evitano di ripetersi.

Perché la ripetizione va bene negli esercizi.

Ma nel codice, la ripetizione prima o poi diventa un piccolo mostro con la felpa.

Parametri e Argomenti

Un parametro è una variabile dentro una funzione.

Un argomento è il valore reale che passi alla funzione.

Esempio:

function greet(name) {
  console.log(`Ciao, ${name}!`);
}

greet("Anna");

Qui:

name è il parametro;
"Anna" è l’argomento.

Quando chiami:

greet("Anna");

JavaScript mette "Anna" dentro name.

Poi la funzione lo usa.

Altro esempio:

function showAge(age) {
  console.log(`Hai ${age} anni.`);
}

showAge(33);
showAge(25);

Output:

Hai 33 anni.
Hai 25 anni.

I parametri rendono le funzioni flessibili.

Senza parametri, le funzioni fanno sempre la stessa cosa.

Con i parametri, le funzioni si adattano.

Come un buon strumento.

O un cameriere molto educato.

Parametri Multipli

Una funzione può avere più di un parametro.

Esempio:

function introduceUser(firstName, age) {
  console.log(`${firstName} ha ${age} anni.`);
}

introduceUser("Viktor", 33);
introduceUser("Anna", 25);

Output:

Viktor ha 33 anni.
Anna ha 25 anni.

L’ordine conta.

Questo:

introduceUser("Viktor", 33);

non è uguale a questo:

introduceUser(33, "Viktor");

JavaScript non dirà:

“Hmm, forse intendevi il contrario.”

Userà semplicemente i valori nell’ordine in cui li hai dati.

JavaScript è letterale.

Molto letterale.

Come un robot che legge la lista della spesa.

Restituire Valori

A volte una funzione non deve solo fare qualcosa.

A volte deve calcolare qualcosa e dare indietro un risultato.

Per questo usiamo return.

Esempio:

function addNumbers(a, b) {
  return a + b;
}

const result = addNumbers(5, 3);

console.log(result);

Output:

Cosa è successo?

function addNumbers(a, b) {
  return a + b;
}

La funzione calcola a + b.

Poi return manda indietro il risultato.

const result = addNumbers(5, 3);

Il valore restituito viene salvato in result.

Importante:

return restituisce un valore dalla funzione.

console.log() stampa soltanto qualcosa.

Non sono la stessa cosa.

console.log vs return

Questa funzione stampa un valore:

function addNumbers(a, b) {
  console.log(a + b);
}

const result = addNumbers(5, 3);

console.log(result);

Output:

8
undefined

Perché undefined?

Perché la funzione ha stampato 8, ma non ha restituito nulla.

Ora confronta:

function addNumbers(a, b) {
  return a + b;
}

const result = addNumbers(5, 3);

console.log(result);

Output:

Questa volta la funzione ha restituito il valore.

Regola semplice:

Usa console.log() per controllare.

Usa return per restituire un valore.

La console è per i tuoi occhi.

Return è per il tuo programma.

Lavori molto diversi.

Non confondere il cameriere con la cucina.

Funzioni con Condizioni

Le funzioni possono usare if, else ed else if.

Esempio:

function checkAge(age) {
  if (age >= 18) {
    return "Puoi entrare.";
  } else {
    return "Sei troppo giovane.";
  }
}

console.log(checkAge(20));
console.log(checkAge(15));

Output:

Puoi entrare.
Sei troppo giovane.

Questa funzione riceve un’età.

Poi restituisce un messaggio in base all’età.

Questo è potente.

Puoi mettere logica dentro le funzioni e riusarla ovunque.

La funzione diventa una piccola macchina decisionale.

Speriamo non troppo giudicante.

Function Expressions

C’è un altro modo per creare funzioni.

const greetUser = function () {
  console.log("Ciao!");
};

greetUser();

Questa si chiama function expression.

La funzione viene salvata in una variabile.

Per ora, entrambi gli stili sono utili:

function sayHello() {
  console.log("Ciao!");
}

const sayHello = function () {
  console.log("Ciao!");
};

In questo corso beginner useremo soprattutto il primo stile perché è più facile da leggere.

Più avanti vedrai spesso le function expressions.

JavaScript ha molti modi per fare la stessa cosa.

Perché evidentemente un solo modo era troppo pacifico.

Arrow Functions

JavaScript moderno ha anche le arrow functions.

Esempio:

const greetUser = () => {
  console.log("Ciao!");
};

greetUser();

Altro esempio con parametri:

const addNumbers = (a, b) => {
  return a + b;
};

console.log(addNumbers(5, 3));

Le arrow functions sono comuni nel JavaScript moderno.

Le vedrai in React, Next.js e molti altri strumenti.

Per ora, capisci l’idea:

Una arrow function è un altro modo per scrivere una funzione.

Non andare in panico se sembra strana.

È solo JavaScript con occhiali moderni.

Costruisci un Calcolatore di Prezzo

Ora costruiamo una piccola funzione che calcola il prezzo finale.

Sostituisci script.js con questo:

function calculateFinalPrice(price, discount) {
  return price - discount;
}

const coursePrice = 49;
const courseDiscount = 10;

const finalPrice = calculateFinalPrice(coursePrice, courseDiscount);

console.log(`Prezzo finale: €${finalPrice}`);

Output:

Prezzo finale: €39

Questo è utile perché il calcolo è riutilizzabile.

Puoi calcolare molti prezzi:

function calculateFinalPrice(price, discount) {
  return price - discount;
}

console.log(calculateFinalPrice(49, 10));
console.log(calculateFinalPrice(100, 25));
console.log(calculateFinalPrice(80, 15));

Output:

39
75
65

Una funzione.

Molti risultati.

Questa è la magia.

Non magia vera.

Meglio.

Magia debuggabile.

Funzioni e DOM

Ora usiamo funzioni con HTML.

Aggiorna index.html:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Funzioni</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    button {
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background-color: #1d4ed8;
    }

    .success {
      color: #15803d;
      font-weight: 700;
    }

    .warning {
      color: #b45309;
      font-weight: 700;
    }

    h1 {
      font-size: 42px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Funzioni</h1>

  <div class="card">
    <h2 id="productName">JavaScript Course</h2>
    <p id="productPrice">Prezzo: €49</p>
    <p id="productStatus">Clicca il pulsante per controllare lo sconto.</p>
    <button id="checkButton">Controlla Sconto</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

Ora aggiorna script.js:

const productStatusElement = document.getElementById("productStatus");
const checkButton = document.getElementById("checkButton");

function calculateFinalPrice(price, discount) {
  return price - discount;
}

function showPriceMessage() {
  const price = 49;
  const discount = 10;
  const budget = 45;

  const finalPrice = calculateFinalPrice(price, discount);

  if (finalPrice <= budget) {
    productStatusElement.textContent = `Buone notizie! Il prezzo finale è €${finalPrice}. Puoi comprarlo.`;
    productStatusElement.className = "success";
  } else {
    productStatusElement.textContent = `Il prezzo finale è €${finalPrice}. Supera il tuo budget.`;
    productStatusElement.className = "warning";
  }
}

checkButton.addEventListener("click", showPriceMessage);

Aggiorna il browser.

Clicca il pulsante.

JavaScript esegue la funzione.

La funzione calcola il prezzo finale.

Poi mostra un messaggio nella pagina.

Questo è molto vicino al vero web development.

Azione dell’utente.

La funzione parte.

I dati cambiano.

La pagina si aggiorna.

Bellissimo.

Il browser non sta più lì come una patata decorativa.

Come Funziona Questo Codice

Questo trova il paragrafo:

const productStatusElement = document.getElementById("productStatus");

Questo trova il pulsante:

const checkButton = document.getElementById("checkButton");

Questa funzione calcola il prezzo finale:

function calculateFinalPrice(price, discount) {
  return price - discount;
}

Questa funzione aggiorna la pagina:

function showPriceMessage() {
  const price = 49;
  const discount = 10;
  const budget = 45;

  const finalPrice = calculateFinalPrice(price, discount);

  if (finalPrice <= budget) {
    productStatusElement.textContent = `Buone notizie! Il prezzo finale è €${finalPrice}. Puoi comprarlo.`;
    productStatusElement.className = "success";
  } else {
    productStatusElement.textContent = `Il prezzo finale è €${finalPrice}. Supera il tuo budget.`;
    productStatusElement.className = "warning";
  }
}

Questo collega il click del pulsante alla funzione:

checkButton.addEventListener("click", showPriceMessage);

Nota una cosa importante:

Scriviamo:

showPriceMessage

non:

showPriceMessage()

Perché?

Perché vogliamo che JavaScript esegua la funzione più tardi, quando il pulsante viene cliccato.

Se scrivi showPriceMessage(), la funzione parte subito.

Questo è un errore comune da principiante.

JavaScript è molto letterale.

Di nuovo.

Errori Comuni

Dimenticare di Chiamare la Funzione

Sbagliato:

function sayHello() {
  console.log("Ciao!");
}

Questo definisce la funzione ma non la esegue.

Corretto:

function sayHello() {
  console.log("Ciao!");
}

sayHello();

Le funzioni non partono da sole.

Non sono gatti.

Non decidono casualmente di fare cose.

Di solito.

Confondere Parametri e Argomenti

function greet(name) {
  console.log(`Ciao, ${name}`);
}

greet("Anna");

name è il parametro.

"Anna" è l’argomento.

Il parametro è il segnaposto.

L’argomento è il valore reale.

Semplice.

Potente.

Parole leggermente eleganti.

Dimenticare return

Sbagliato:

function add(a, b) {
  a + b;
}

const result = add(2, 3);

console.log(result);

Output:

undefined

Corretto:

function add(a, b) {
  return a + b;
}

Se vuoi che una funzione restituisca un valore, usa return.

JavaScript non indovina.

JavaScript non fa interpretazione emotiva.

Chiamare una Funzione Troppo Presto in un Event Listener

Sbagliato:

button.addEventListener("click", showMessage());

Corretto:

button.addEventListener("click", showMessage);

Senza parentesi, passi la funzione.

Con parentesi, la chiami subito.

Questa cosa è importante.

Molto importante.

Questo bug ama i principianti.

Non dargli da mangiare.

Pratica

Crea una funzione chiamata createGreeting.

Deve accettare un parametro:

name

Deve restituire:

Ciao, NAME!

Esempio:

function createGreeting(name) {
  return `Ciao, ${name}!`;
}

const message = createGreeting("Viktor");

console.log(message);

Poi crea un’altra funzione chiamata checkAccess.

Deve accettare:

age;
hasTicket.

Regole:

se age è almeno 18 e hasTicket è true, restituisci Access granted;
altrimenti restituisci Access denied.

Esempio:

function checkAccess(age, hasTicket) {
  if (age >= 18 && hasTicket) {
    return "Access granted";
  }

  return "Access denied";
}

console.log(checkAccess(22, true));
console.log(checkAccess(16, true));
console.log(checkAccess(30, false));

Eseguilo.

Cambia valori.

Rompilo.

Sistemalo.

Così le funzioni diventano normali.

Mini Sfida

Costruisci una piccola pagina con:

nome prodotto;
prezzo;
sconto;
pulsante;
area messaggio.

Crea queste funzioni:

function calculateFinalPrice(price, discount) {
  return price - discount;
}

function createPriceMessage(finalPrice) {
  return `Il prezzo finale è €${finalPrice}.`;
}

Quando l’utente clicca il pulsante:

calcola il prezzo finale;
crea il messaggio;
mostra il messaggio nella pagina.

Bonus:

Aggiungi un budget.

Se il prezzo finale è minore o uguale al budget, mostra un messaggio success.

Altrimenti mostra un messaggio warning.

È esattamente così che funzionano i siti veri.

Piccole funzioni.

Responsabilità chiare.

Logica pulita.

Meno spaghetti.

Più lasagna.

Strati ordinati.

Codice molto adatto all’Italia.

Riassunto

Oggi hai imparato che:

le funzioni sono blocchi di codice riutilizzabili;
le funzioni devono essere chiamate per partire;
i parametri sono segnaposti dentro le funzioni;
gli argomenti sono valori reali passati alle funzioni;
le funzioni possono restituire valori;
return restituisce un valore;
console.log() stampa soltanto un valore;
le funzioni possono contenere condizioni;
le funzioni possono aggiornare il DOM;
le funzioni aiutano a evitare codice ripetuto;
gli event listeners possono eseguire funzioni quando gli utenti interagiscono.

Questo è un passo enorme.

Le funzioni sono ovunque in JavaScript.

Quando capisci le funzioni, il linguaggio diventa molto più facile da organizzare.

Senza funzioni, il codice diventa un cassetto disordinato.

Con le funzioni, il codice diventa una cassetta degli attrezzi.

Ancora disordinata a volte.

Ma almeno il martello ha un posto.

Prossima Lezione

Nella prossima lezione impareremo gli array.

Gli array aiutano a salvare liste di valori.

Nomi.

Prodotti.

Task.

Punteggi.

In pratica, quando una variabile non basta, arrivano gli array.

Con parentesi quadre.

E opinioni.