⚙️ Lezione 7: Funzioni JavaScript – Dichiarazione e Utilizzo

Scopri i diversi modi per dichiarare funzioni, parametri, return e scope

Tipi di Funzioni in JavaScript

1. Dichiarazione di Funzione

js
// Sintassi classica - HOISTING
function somma(a, b) {
    return a + b;
}

// Può essere chiamata prima della dichiarazione
let risultato = somma(5, 3);  // 8
console.log(risultato);

// Funzione senza return restituisce undefined
function saluta(nome) {
    console.log(`Ciao ${nome}!`);
}

let valore = saluta("Mario");  // "Ciao Mario!"
console.log(valore);           // undefined

2. Espressione di Funzione

js
// Funzione anonima assegnata a variabile
let moltiplica = function(a, b) {
    return a * b;
};

// NO HOISTING - deve essere definita prima dell'uso
let prodotto = moltiplica(4, 2);  // 8

// Funzione con nome (migliore per debug)
let dividi = function divisione(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. Arrow Function (ES6+)

js
// Sintassi concisa per funzioni semplici
let quadrato = x => x * x;

// Con più parametri (parentesi obbligatorie)
let somma = (a, b) => a + b;

// Senza parametri
let saluta = () => "Ciao Mondo!";

// Con corpo multi-riga (parentesi graffe e return obbligatori)
let calcolaArea = (base, altezza) => {
    let area = base * altezza;
    return `L'area è: ${area}`;
};

console.log(quadrato(5));      // 25
console.log(somma(2, 3));      // 5
console.log(saluta());         // "Ciao Mondo!"
console.log(calcolaArea(4, 5)); // "L'area è: 20"

Parametri delle Funzioni

js
// Parametri di default (ES6)
function saluta(nome = "Utente") {
    return `Ciao ${nome}!`;
}

// Rest parameters per numero variabile di argomenti
function sommaNumeri(...numeri) {
    return numeri.reduce((totale, numero) => totale + numero, 0);
}

// Destrutturazione nei parametri
function stampaDatiPersona({nome, età, professione = "Non specificata"}) {
    console.log(`${nome} ha ${età} anni - ${professione}`);
}

// Test
console.log(saluta());                 // "Ciao Utente!"
console.log(saluta("Alice"));          // "Ciao Alice!"
console.log(sommaNumeri(1, 2, 3, 4)); // 10

let persona = {nome: "Mario", età: 30, città: "Roma"};
stampaDatiPersona(persona); // "Mario ha 30 anni - Non specificata"

Closures e Scope

js
// Closure: funzione che "ricorda" il suo ambiente
function creaContatore() {
    let conteggio = 0;  // Variabile privata
    
    return function() {
        conteggio++;    // Accede alla variabile del contesto esterno
        return conteggio;
    };
}

let contatore = creaContatore();
console.log(contatore());  // 1
console.log(contatore());  // 2  
console.log(contatore());  // 3

// "conteggio" non è accessibile dall'esterno
// ma la funzione ritornata la "ricorda" attraverso la closure

🎯 Esercizio Pratico: Calcolatrice con Funzioni

Obiettivo: Crea una calcolatrice usando diversi tipi di funzioni

js
// 1. Dichiarazione di funzione
function somma(a, b) {
    return a + b;
}

// 2. Espressione di funzione  
let moltiplica = function(a, b) {
    return a * b;
};

// 3. Arrow function
let dividi = (a, b) => b !== 0 ? a / b : "Errore";

// 4. Funzione con parametri default
function calcola(operazione, a, b = 1) {
    switch(operazione) {
        case '+': return somma(a, b);
        case '*': return moltiplica(a, b);
        case '/': return dividi(a, b);
        default: return "Operazione non supportata";
    }
}

// Test
console.log(calcola('+', 5, 3));   // 8
console.log(calcola('*', 4, 2));   // 8
console.log(calcola('/', 10, 2));  // 5
console.log(calcola('/', 5, 0));   // "Errore"

Sfida avanzata: Crea queste funzioni aggiuntive:

  1. calcolatriceAvanzata() che accetta un oggetto con operazione e numeri
  2. creaOperazione() che restituisce una funzione per una specifica operazione
  3. storicoCalcoli che tiene traccia di tutti i calcoli effettuati

Torna in alto