Operatori ed espressioni

Scopri gli operatori aritmetici, di confronto, logici e le espressioni per manipolare dati.

🎮 Mettilo in pratica: nel corso JavaScript interattivo – progetti ci sono le lezioni Lezione 3 – Giocare con i numeri e Lezione 7 – Confronti e controlli.

Cosa Imparerai in Questa Lezione

Gli operatori sono simboli che eseguono operazioni sui dati: somme, confronti, decisioni logiche. Le espressioni sono combinazioni di valori, variabili e operatori che producono un risultato. Sono gli strumenti fondamentali per scrivere logica nei tuoi programmi!

💡 Cos'è un'Espressione?

Un'espressione è qualsiasi codice che produce un valore. Ad esempio:

5 + 3          // Espressione → produce 8
x * 2          // Espressione → produce il doppio di x
età >= 18      // Espressione → produce true o false
nome + " " + cognome  // Espressione → produce stringa concatenata

Operatori Aritmetici

Gli operatori aritmetici eseguono operazioni matematiche su numeri.

Esempi Operatori Aritmetici

let a = 10;
let b = 3;

// Operazioni base
console.log(a + b);   // 13 (addizione)
console.log(a - b);   // 7  (sottrazione)
console.log(a * b);   // 30 (moltiplicazione)
console.log(a / b);   // 3.3333... (divisione)

// Modulo (resto)
console.log(10 % 3);  // 1 (10 diviso 3 = 3 con resto 1)
console.log(17 % 5);  // 2 (17 diviso 5 = 3 con resto 2)
console.log(8 % 2);   // 0 (8 diviso 2 = 4 con resto 0, pari!)

// Esponente
console.log(2 ** 3);  // 8  (2 alla terza = 2*2*2)
console.log(5 ** 2);  // 25 (5 al quadrado)
console.log(10 ** 3); // 1000 (10 al cubo)

Incremento e Decremento

1. Post-incremento/decremento (x++ / x--)

Prima usa il valore, poi incrementa/decrementa.

Post-incremento

let x = 5;

console.log(x++);  // 5 (mostra il valore, POI incrementa)
console.log(x);    // 6 (ora è incrementato)

let y = 10;
console.log(y--);  // 10 (mostra il valore, POI decrementa)
console.log(y);    // 9 (ora è decrementato)

2. Pre-incremento/decremento (++x / --x)

Prima incrementa/decrementa, poi usa il valore.

Pre-incremento

let x = 5;

console.log(++x);  // 6 (PRIMA incrementa, poi mostra)
console.log(x);    // 6

let y = 10;
console.log(--y);  // 9 (PRIMA decrementa, poi mostra)
console.log(y);    // 9

⚡ Confronto Diretto

let a = 5;
let b = 5;

console.log(a++);  // 5 (usa POI incrementa)
console.log(++b);  // 6 (incrementa POI usa)

console.log(a);    // 6
console.log(b);    // 6  (stessa fine, ma comportamento diverso!)

Operatori di Assegnazione

Gli operatori di assegnazione assegnano valori alle variabili, spesso combinando un'operazione aritmetica.

Esempi Operatori di Assegnazione

let x = 10;

// Operatori composti
x += 5;   // x = x + 5  → 15
x -= 3;   // x = x - 3  → 12
x *= 2;   // x = x * 2  → 24
x /= 4;   // x = x / 4  → 6
x %=  5;  // x = x % 5  → 1

// Esempio pratico: accumulo punteggio
let punteggio = 0;

punteggio += 10;  // Livello completato: +10
punteggio += 5;   // Bonus raccolto: +5
punteggio *= 2;   // Moltiplicatore 2x: punteggio raddoppia

console.log("Punteggio finale:", punteggio);  // 30

Operatori di Confronto

Gli operatori di confronto confrontano due valori e restituiscono true o false.

Esempi Operatori di Confronto

let x = 5;
let y = "5";

// Confronti numerici
console.log(10 > 5);   // true
console.log(10 < 5);   // false
console.log(10 >= 10); // true
console.log(10 <= 9);  // false

// Uguaglianza semplice (==) vs stretta (===)
console.log(x == y);   // true  (converte "5" a numero)
console.log(x === y);  // false (tipi diversi: number vs string)

console.log(5 == "5");   // true  (confronta solo valore)
console.log(5 === "5");  // false (confronta valore E tipo)

// Diversità
console.log(5 != "5");   // false (valori uguali dopo conversione)
console.log(5 !== "5");  // true  (tipi diversi)

⚠️ IMPORTANTE: Usa Sempre === e !==

Preferisci === e !== (strict equality) invece di == e !=. Prevengono bug causati da conversioni implicite!

// ❌ Comportamenti strani con ==
console.log(0 == false);      // true  (WTF?)
console.log("" == false);     // true  (WTF?)
console.log(null == undefined); // true (WTF?)

// ✅ Comportamento prevedibile con ===
console.log(0 === false);     // false (ok)
console.log("" === false);    // false (ok)
console.log(null === undefined); // false (ok)

Operatori Logici

Gli operatori logici combinano condizioni booleane e restituiscono true o false.

1. AND Logico (&&)

Restituisce true solo se ENTRAMBE le condizioni sono vere.

Operatore AND (&&)

let età = 25;
let haPatente = true;

// Entrambe devono essere vere
console.log(età >= 18 && haPatente);  // true (entrambe vere)
console.log(età >= 18 && !haPatente); // false (una è falsa)

// Esempio pratico
if (età >= 18 && haPatente) {
    console.log("Può guidare!");  // Questo viene eseguito
}

// Tabella verità AND
console.log(true  && true);   // true
console.log(true  && false);  // false
console.log(false && true);   // false
console.log(false && false);  // false

2. OR Logico (||)

Restituisce true se ALMENO UNA delle condizioni è vera.

Operatore OR (||)

let èWeekend = true;
let èFestivo = false;

// Basta che una sia vera
console.log(èWeekend || èFestivo);  // true (almeno una vera)

// Esempio pratico
if (èWeekend || èFestivo) {
    console.log("Non si lavora!");  // Questo viene eseguito
}

// Tabella verità OR
console.log(true  || true);   // true
console.log(true  || false);  // true
console.log(false || true);   // true
console.log(false || false);  // false

3. NOT Logico (!)

Inverte il valore booleano: true diventa false e viceversa.

Operatore NOT (!)

let èLoggato = true;

console.log(!èLoggato);  // false (inverte true → false)

// Doppia negazione
console.log(!!èLoggato); // true (inverte due volte)

// Esempi
console.log(!true);   // false
console.log(!false);  // true

// Uso pratico
if (!èLoggato) {
    console.log("Devi fare login");
} else {
    console.log("Benvenuto!");  // Questo viene eseguito
}

Operatori Speciali

1. Operatore Ternario (? :)

If-else in una sola riga! Sintassi: condizione ? valoreSeVero : valoreSeFalso

Operatore Ternario

let età = 20;

// Sintassi: condizione ? valoreSeVero : valoreSeFalso
let stato = età >= 18 ? "adulto" : "minorenne";
console.log(stato);  // "adulto"

// Equivale a:
let stato2;
if (età >= 18) {
    stato2 = "adulto";
} else {
    stato2 = "minorenne";
}

// Altri esempi
let prezzo = 100;
let scontato = prezzo > 50 ? prezzo * 0.9 : prezzo;

let punti = 150;
let livello = punti >= 100 ? "Gold" : punti >= 50 ? "Silver" : "Bronze";

Esercizi Pratici (Interattivi!)

Ora tocca a te!

Prova questi esercizi che usano tutti gli operatori che hai imparato. Ogni esercizio mostra risultati visivi nella pagina, non solo in console!

Esercizio 1: Calcolatore Sconto

Obiettivo: Calcola il prezzo finale con sconto usando input utente.

🎯 Cosa imparerai:

• Usare prompt() per input utente
• Operatori aritmetici (*, /)
• Operatore ternario per messaggi condizionali
• Mostrare risultati visivi nella pagina

Codice di Base

let prezzo = parseFloat(prompt("Prezzo originale:"));
let scontoPercentuale = parseFloat(prompt("Percentuale sconto:"));

let importoSconto = prezzo * (scontoPercentuale / 100);
let prezzoFinale = prezzo - importoSconto;

let messaggio = scontoPercentuale > 30 ? "Ottimo affare!" : "Buon acquisto!";

// Mostra risultato nella pagina
document.getElementById('risultato').innerHTML = `
    <div>Prezzo: €${prezzo}</div>
    <div>Sconto: €${importoSconto}</div>
    <div><strong>Finale: €${prezzoFinale}</strong></div>
`;

Esercizio 2: Verifica Accesso

Obiettivo: Verifica se una persona può entrare usando operatori logici.

🎯 Cosa imparerai:

• Operatori logici (&&, ||)
• Usare confirm() per scelte sì/no
• Espressioni booleane complesse
• Interfaccia utente dinamica e reattiva

Codice di Base

let età = parseInt(prompt("Età:"));
let haDocumento = confirm("Ha documento?");
let èInListaVIP = confirm("È in lista VIP?");

// Logica: (età >= 18 E documento) OPPURE lista VIP
let puòEntrare = (età >= 18 && haDocumento) || èInListaVIP;

// Mostra risultato nella pagina
document.getElementById('risultato').innerHTML = `
    <div style="color: ${puòEntrare ? 'green' : 'red'}">
        ${puòEntrare ? '✅ Accesso consentito' : '❌ Accesso negato'}
    </div>
`;

🎯 Riepilogo Lezione

Aritmetici:

• • • * / % **
• ++ -- (pre/post)
• += -= *= /=

Confronto:

• == vs ===
• != vs !==
• < > <= >=
• Usa sempre ===

Logici:

• && (AND)
• || (OR)
• ! (NOT)
• Short-circuit

Speciali:

• ? : (ternario)
• ?? (nullish)
• typeof
• Precedenza

💡 Ricorda:

JavaScript non è solo console.log()! Puoi:

• ✅ Modificare contenuti HTML in tempo reale
• ✅ Cambiare stili CSS dinamicamente
• ✅ Rispondere alle azioni utente (click, input)
• ✅ Creare interfacce interattive complete