Lezione 9 – JavaScript

Funzioni Base

Impara a creare e utilizzare funzioni: dichiarazione, parametri, return e scope

⚙️ Cos’è una Funzione?

Una funzione è un blocco di codice riutilizzabile che esegue un compito specifico.
Invece di scrivere lo stesso codice più volte, lo metti in una funzione e la chiami quando serve!

💡 Funzioni nella Vita Reale

Pensa a una funzione come a una ricetta:

  • Ingredienti → Parametri (input)
  • Procedimento → Corpo della funzione (codice)
  • Piatto finale → Valore di ritorno (output)

Una volta creata la “ricetta” (funzione), puoi usarla infinite volte senza riscriverla!

🎯 Vantaggi delle Funzioni

  • ✅ Riutilizzo – Scrivi una volta, usa ovunque
  • ✅ Organizzazione – Codice più pulito e leggibile
  • ✅ Manutenzione – Modifica in un solo posto
  • ✅ Testing – Più facile testare blocchi isolati
  • ✅ Astrazione – Nascondi la complessità

📝 Dichiarazione di Funzioni

Ci sono diversi modi per creare funzioni in JavaScript. Vediamo i principali.

1
Function Declaration (Dichiarazione)

Il modo classico e più comune. ⭐ CONSIGLIATO per iniziare

Dichiarazione Funzione
// Sintassi base
function nomeFunzione() {
    // Codice da eseguire
}

// Esempio pratico
function saluta() {
    console.log("Ciao! 👋");
}

// Chiamata (esecuzione) della funzione
saluta();  // Output: "Ciao! 👋"

// Puoi chiamarla più volte
saluta();  // Output: "Ciao! 👋"
saluta();  // Output: "Ciao! 👋"

2
Function Expression (Espressione)

Assegna una funzione a una variabile.

Espressione Funzione
// Funzione anonima assegnata a variabile
const saluta = function() {
    console.log("Ciao! 👋");
};

// Chiamata
saluta();  // Output: "Ciao! 👋"

// Funzione con nome (opzionale)
const mostraBenvenuto = function benvenuto() {
    console.log("Benvenuto!");
};

mostraBenvenuto();

📊 Declaration vs Expression

Caratteristica Declaration Expression
Sintassi function nome() {} const nome = function() {}
Hoisting ✅ Sì (disponibile prima) ❌ No
Quando usare Funzioni globali/principali Callback, funzioni assegnate

💡 Hoisting delle Funzioni

Le function declaration sono hoisted (sollevate) all’inizio dello scope,
quindi puoi chiamarle prima di dichiararle! 

// ✅ Funziona - Declaration
saluta();  // Output: "Ciao!"

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

// ❌ ERRORE - Expression
// ciao();  // ReferenceError!

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

📥 Parametri e Argomenti

I parametri sono le variabili nella definizione della funzione.
Gli argomenti sono i valori passati quando la chiami.

1
Funzioni con Parametri

Rendono le funzioni più flessibili e riutilizzabili.

Parametri Base
// Funzione con un parametro
function saluta(nome) {
    console.log(`Ciao ${nome}! 👋`);
}

saluta("Mario");  // Output: "Ciao Mario! 👋"
saluta("Anna");   // Output: "Ciao Anna! 👋"

// Funzione con più parametri
function somma(a, b) {
    console.log(a + b);
}

somma(5, 3);   // Output: 8
somma(10, 20); // Output: 30

// Esempio pratico: Calcolo area rettangolo
function calcolaArea(base, altezza) {
    let area = base * altezza;
    console.log(`Area: ${area} m²`);
}

calcolaArea(5, 10);   // Output: "Area: 50 m²"
calcolaArea(3, 7);    // Output: "Area: 21 m²"

2
Parametri Predefiniti (Default Parameters)

Valori di default se l’argomento non viene passato (ES6).

Default Parameters
// Senza parametri default
function saluta(nome) {
    console.log(`Ciao ${nome}!`);
}

saluta();  // Output: "Ciao undefined!"

// ✅ Con parametri default
function salutaDefault(nome = "Ospite") {
    console.log(`Ciao ${nome}!`);
}

salutaDefault();         // Output: "Ciao Ospite!"
salutaDefault("Mario");  // Output: "Ciao Mario!"

// Esempio pratico
function calcolaPrezzo(prezzo, sconto = 0) {
    let totale = prezzo - (prezzo * sconto / 100);
    console.log(`Prezzo finale: €${totale}`);
}

calcolaPrezzo(100);      // Output: "Prezzo finale: €100"
calcolaPrezzo(100, 20);  // Output: "Prezzo finale: €80"

3
Parametri Multipli e Rest Parameter

Gestisci un numero variabile di argomenti con ...rest.

Rest Parameter
// Somma di numeri variabili
function somma(...numeri) {
    let totale = 0;
    for (let numero of numeri) {
        totale += numero;
    }
    return totale;
}

console.log(somma(1, 2, 3));           // 6
console.log(somma(5, 10, 15, 20));     // 50
console.log(somma(100));               // 100

// Combinazione parametri normali + rest
function presentati(nome, età, ...hobbies) {
    console.log(`Mi chiamo ${nome}, ho ${età} anni`);
    console.log(`I miei hobby: ${hobbies.join(", ")}`);
}

presentati("Mario", 30, "calcio", "lettura", "coding");
// Output:
// Mi chiamo Mario, ho 30 anni
// I miei hobby: calcio, lettura, coding

⚠️ Ordine dei Parametri

I parametri con default vanno sempre alla fine,
altrimenti saltare argomenti diventa complicato. 

// ❌ MALE - Default all'inizio
function male(nome = "Ospite", età) {
    console.log(`${nome}, ${età} anni`);
}

male(25);  // Output: "25, undefined anni" (confuso!)

// ✅ BENE - Default alla fine
function bene(età, nome = "Ospite") {
    console.log(`${nome}, ${età} anni`);
}

bene(25);  // Output: "Ospite, 25 anni" (chiaro!)

📤 Valore di Ritorno (return)

L’istruzione return restituisce un valore dalla funzione e termina l’esecuzione.

1
Return Base

Restituisci un valore per usarlo fuori dalla funzione.

Return Statement
// Funzione senza return (restituisce undefined)
function saluta() {
    console.log("Ciao!");
}

let risultato1 = saluta();
console.log(risultato1);  // undefined

// ✅ Funzione con return
function somma(a, b) {
    return a + b;
}

let risultato2 = somma(5, 3);
console.log(risultato2);  // 8

// Puoi usare il valore restituito
let totale = somma(10, 20) + somma(5, 15);
console.log(totale);  // 50

2
Return Termina la Funzione

Il codice dopo return non viene eseguito.

Return Exit
function controlla(numero) {
    if (numero < 0) {
        return "Negativo";
        console.log("Non eseguito!");  // Mai raggiunto
    }
    
    if (numero === 0) {
        return "Zero";
    }
    
    return "Positivo";
}

console.log(controlla(-5));  // "Negativo"
console.log(controlla(0));   // "Zero"
console.log(controlla(10));  // "Positivo"

// Return anticipato per validazione
function dividi(a, b) {
    if (b === 0) {
        return "Errore: divisione per zero";
    }
    return a / b;
}

console.log(dividi(10, 2));  // 5
console.log(dividi(10, 0));  // "Errore: divisione per zero"

3
Return di Tipi Diversi

Puoi restituire qualsiasi tipo di dato.

Return Vari Tipi
// Return numero
function quadrato(n) {
    return n * n;
}

// Return stringa
function nomeCompleto(nome, cognome) {
    return `${nome} ${cognome}`;
}

// Return boolean
function isPari(numero) {
    return numero % 2 === 0;
}

// Return array
function creaArray(n) {
    let arr = [];
    for (let i = 1; i <= n; i++) {
        arr.push(i);
    }
    return arr;
}

// Return oggetto
function creaUtente(nome, età) {
    return {
        nome: nome,
        età: età,
        adulto: età >= 18
    };
}

// Test
console.log(quadrato(5));                    // 25
console.log(nomeCompleto("Mario", "Rossi")); // "Mario Rossi"
console.log(isPari(4));                      // true
console.log(creaArray(5));                   // [1, 2, 3, 4, 5]
console.log(creaUtente("Anna", 25));         
// {nome: "Anna", età: 25, adulto: true}

💡 Return vs Console.log

return restituisce un valore utilizzabile,
console.log solo mostra a schermo! 

// Solo console.log - NON restituisce valore
function somma1(a, b) {
    console.log(a + b);
}

let x = somma1(5, 3);  // Stampa: 8
console.log(x);         // undefined (nessun return!)

// ✅ Con return - RESTITUISCE valore
function somma2(a, b) {
    return a + b;
}

let y = somma2(5, 3);   // Non stampa nulla
console.log(y);         // 8 (valore restituito!)
console.log(y * 2);     // 16 (posso usarlo!)

🔒 Scope (Ambito)

Lo scope determina dove le variabili sono accessibili nel codice.

1
Scope Globale vs Locale

Variabili globali: accessibili ovunque. Locali: solo nella funzione.

Global vs Local Scope
// Variabile GLOBALE
let globale = "Sono globale";

function esempio() {
    // Variabile LOCALE
    let locale = "Sono locale";
    
    console.log(globale);  // ✅ Accesso OK
    console.log(locale);   // ✅ Accesso OK
}

esempio();

console.log(globale);  // ✅ Accesso OK
// console.log(locale);   // ❌ ERRORE! Non definita fuori

// Esempio pratico
let contatore = 0;  // Globale

function incrementa() {
    let incremento = 1;  // Locale
    contatore += incremento;
}

incrementa();
incrementa();
console.log(contatore);  // 2
// console.log(incremento);  // ❌ ERRORE!

2
Parametri Come Variabili Locali

I parametri esistono solo dentro la funzione.

Scope Parametri
function saluta(nome) {
    // 'nome' esiste SOLO qui dentro
    console.log(`Ciao ${nome}!`);
}

saluta("Mario");
// console.log(nome);  // ❌ ERRORE! nome non definito

// Shadowing - variabile locale nasconde globale
let numero = 10;  // Globale

function test() {
    let numero = 5;  // Locale (diversa!)
    console.log(numero);  // 5 (locale)
}

test();
console.log(numero);  // 10 (globale invariata)

3
Block Scope con let e const

let e const hanno scope di blocco (if, for, while...).

Block Scope
function esempio() {
    let x = 1;
    
    if (true) {
        let x = 2;  // Diversa variabile (block scope)
        console.log(x);  // 2
    }
    
    console.log(x);  // 1
}

esempio();

// var NON ha block scope (evita var!)
function esempioVar() {
    var y = 1;
    
    if (true) {
        var y = 2;  // STESSA variabile!
        console.log(y);  // 2
    }
    
    console.log(y);  // 2 (modificata!)
}

esempioVar();

📊 Regole dello Scope

Globale

  • Accessibile ovunque
  • Dichiarata fuori funzioni
  • Evita troppi globali!
Funzione

  • Solo dentro la funzione
  • Parametri inclusi
  • Isolamento codice
Blocco

  • Solo nel blocco {}
  • let e const
  • if, for, while

🚀 Esempio Completo: Calcolatrice

Sistema Calcolatrice Completo
// Calcolatrice con funzioni
const calcolatrice = {
    // Operazioni base
    somma: function(a, b) {
        return a + b;
    },
    
    sottrai: function(a, b) {
        return a - b;
    },
    
    moltiplica: function(a, b) {
        return a * b;
    },
    
    dividi: function(a, b) {
        if (b === 0) {
            return "Errore: divisione per zero";
        }
        return a / b;
    },
    
    // Operazioni avanzate
    potenza: function(base, esponente) {
        return Math.pow(base, esponente);
    },
    
    percentuale: function(numero, percentuale) {
        return (numero * percentuale) / 100;
    },
    
    media: function(...numeri) {
        if (numeri.length === 0) {
            return 0;
        }
        let somma = 0;
        for (let num of numeri) {
            somma += num;
        }
        return somma / numeri.length;
    }
};

// Funzione helper per formattare risultati
function mostraRisultato(operazione, risultato) {
    console.log(`${operazione} = ${risultato}`);
    console.log("─".repeat(40));
}

// Funzione menu
function eseguiCalcolo(operazione, ...valori) {
    let risultato;
    
    switch(operazione.toLowerCase()) {
        case "somma":
            risultato = calcolatrice.somma(valori[0], valori[1]);
            mostraRisultato(`${valori[0]} + ${valori[1]}`, risultato);
            break;
        
        case "sottrai":
            risultato = calcolatrice.sottrai(valori[0], valori[1]);
            mostraRisultato(`${valori[0]} - ${valori[1]}`, risultato);
            break;
        
        case "moltiplica":
            risultato = calcolatrice.moltiplica(valori[0], valori[1]);
            mostraRisultato(`${valori[0]} × ${valori[1]}`, risultato);
            break;
        
        case "dividi":
            risultato = calcolatrice.dividi(valori[0], valori[1]);
            mostraRisultato(`${valori[0]} ÷ ${valori[1]}`, risultato);
            break;
        
        case "potenza":
            risultato = calcolatrice.potenza(valori[0], valori[1]);
            mostraRisultato(`${valori[0]}^${valori[1]}`, risultato);
            break;
        
        case "percentuale":
            risultato = calcolatrice.percentuale(valori[0], valori[1]);
            mostraRisultato(`${valori[1]}% di ${valori[0]}`, risultato);
            break;
        
        case "media":
            risultato = calcolatrice.media(...valori);
            mostraRisultato(`Media di ${valori.join(", ")}`, risultato.toFixed(2));
            break;
        
        default:
            console.log("Operazione non riconosciuta");
            return;
    }
    
    return risultato;
}

// Test della calcolatrice
console.log("=== CALCOLATRICE ===\n");

eseguiCalcolo("somma", 15, 7);
eseguiCalcolo("sottrai", 20, 8);
eseguiCalcolo("moltiplica", 6, 7);
eseguiCalcolo("dividi", 50, 5);
eseguiCalcolo("potenza", 2, 8);
eseguiCalcolo("percentuale", 200, 15);
eseguiCalcolo("media", 10, 20, 30, 40, 50);

// Output:
// === CALCOLATRICE ===
//
// 15 + 7 = 22
// ────────────────────────────────────────
// 20 - 8 = 12
// ────────────────────────────────────────
// 6 × 7 = 42
// ────────────────────────────────────────
// 50 ÷ 5 = 10
// ────────────────────────────────────────
// 2^8 = 256
// ────────────────────────────────────────
// 15% di 200 = 30
// ────────────────────────────────────────
// Media di 10, 20, 30, 40, 50 = 30.00
// ────────────────────────────────────────

💡 Concetti Utilizzati
  • Funzioni come metodi di oggetto
  • Parametri multipli
  • Return per restituire valori
  • Rest parameter (...numeri)
  • Validazione input (divisione per zero)
  • Funzioni helper per formattazione
  • Switch per routing operazioni

💪 Esercizi Pratici

📝 Esercizio 1: Convertitore Temperature

Obiettivo: Crea funzioni per convertire temperature

  • celsiusToFahrenheit(celsius) → Fahrenheit
  • fahrenheitToCelsius(fahrenheit) → Celsius
  • celsiusToKelvin(celsius) → Kelvin
  • Formule: F = (C × 9/5) + 32, K = C + 273.15

📝 Esercizio 2: Validatore Password

Obiettivo: Crea una funzione che valida password

  • Lunghezza minima 8 caratteri
  • Almeno una lettera maiuscola
  • Almeno una lettera minuscola
  • Almeno un numero
  • Return oggetto con {valida: bool, errori: array}

📝 Esercizio 3: Generatore Numeri Casuali

Obiettivo: Crea funzioni per numeri random

  • random(min, max) → numero casuale tra min e max
  • randomArray(n, min, max) → array di n numeri casuali
  • lanciaDado() → numero 1-6
  • lanciaDadi(n) → somma di n dadi

🎯 Riepilogo Lezione

Dichiarazione:

  • function nome() {}
  • Hoisting ✅
  • Uso generale
Parametri:

  • Input funzione
  • Default values
  • Rest parameter
Return:

  • Output funzione
  • Termina esecuzione
  • Qualsiasi tipo
Scope:

  • Globale
  • Funzione
  • Blocco (let/const)

Lezione 9 del Corso JavaScript Completo

Torna in alto