Lezione 5 — Operatori e Conversioni di Tipo in JavaScript: Guida Completa

Scopri come manipolare i dati in JavaScript attraverso l'uso degli operatori e come gestire il passaggio da un tipo di dato all'altro con le conversioni.

Introduzione agli Operatori e alla Tipizzazione

Benvenuti alla quinta lezione del nostro percorso "Impara JavaScript in 50 lezioni". Dopo aver compreso cos'è una variabile e quali sono i tipi di dato fondamentali, è arrivato il momento di capire come far interagire questi dati tra loro.

In programmazione, gli operatori sono simboli speciali che indicano al computer di eseguire una specifica operazione matematica, logica o di confronto. Immaginate gli operatori come i "verbi" del vostro codice: se le variabili sono i sostantivi (gli oggetti), gli operatori sono le azioni che permettono di trasformarli, confrontarli o combinarli.

Parallelamente, esploreremo il concetto di conversione di tipo (o type casting). JavaScript è un linguaggio a tipizzazione dinamica, il che significa che una variabile può cambiare tipo durante l'esecuzione. Sebbene questo offra flessibilità, può portare a errori imprevisti se non si comprende come JavaScript gestisce internamente il passaggio, ad esempio, da una stringa a un numero.

Gli Operatori Aritmetici

Gli operatori aritmetici sono i più intuitivi, poiché ricalcano gran parte della matematica che impariamo a scuola. Vengono utilizzati principalmente per operare su valori di tipo Number.

Operatori di base

  • + (Addizione): Somma due valori.
  • - (Sottrazione): Sottrae il secondo valore dal primo.
  • * (Moltiplicazione): Moltiplica due valori.
  • / (Divisione): Divide il primo valore per il secondo.
  • % (Modulo): Restituisce il resto di una divisione intera.
  • ** (Esponenziazione): Eleva un numero a una potenza.

Incremento e Decremento

Esistono poi gli operatori di incremento (++) e decremento (--), estremamente utili all'interno dei cicli (che vedremo in lezioni future) per aumentare o diminuire il valore di una variabile di 1.

Ecco un esempio pratico che illustra l'uso di questi operatori:

// Esempio di operazioni aritmetiche
let prezzoProdotto = 100;
let sconto = 20;
let iva = 0.22;

// Calcolo prezzo scontato
let prezzoScontato = prezzoProdotto - sconto;
console.log("Prezzo scontato: " + prezzoScontato); // 80

// Calcolo prezzo finale con IVA
let prezzoFinale = prezzoScontato * (1 + iva);
console.log("Prezzo finale con IVA: " + prezzoFinale); // 97.6

// Operatore Modulo: utile per capire se un numero è pari o dispari
let numero = 10;
console.log(numero % 2 === 0 ? "Pari" : "Dispari"); // Pari

// Esponenziazione
let areaQuadrato = 5 ** 2;
console.log("Area del quadrato: " + areaQuadrato); // 25

In questo codice, abbiamo visto come combinare diversi operatori per risolvere un problema reale: il calcolo del prezzo di un prodotto. Notate come l'operatore modulo % sia fondamentale per determinare la parità di un numero, un pattern ricorrente nello sviluppo software.

Operatori di Assegnazione e Concatenazione

L'operatore = non è un operatore di uguaglianza (quello lo vedremo tra poco), ma un operatore di assegnazione. Serve a dare un valore a una variabile.

Assegnazione Composta

Per scrivere codice più sintetico, JavaScript offre gli operatori di assegnazione composta. Ad esempio, invece di scrivere x = x + 5, possiamo scrivere x += 5.

  • += : Somma e assegna
  • -= : Sottrae e assegna
  • *= : Moltiplica e assegna
  • /= : Divide e assegna

Il caso ambiguo dell'operatore +

L'operatore + ha un doppio ruolo: può sommare numeri o concatenare stringhe. Quando JavaScript incontra un + e uno dei due operandi è una stringa, il linguaggio converte automaticamente l'altro operando in stringa e unisce i due testi. Questo processo si chiama coercizione.

let saluto = "Ciao";
let nome = "Mario";

// Concatenazione semplice
let messaggio = saluto + " " + nome + "!";
console.log(messaggio); // "Ciao Mario!"

// Attenzione alla coercizione!
let numero1 = 10;
let numero2 = "20";
console.log(numero1 + numero2); // "1020" (Stringa, non numero!)
console.log(numero1 - numero2); // -10 (Qui JS converte "20" in numero perché - non esiste per le stringhe)

Operatori di Confronto e Logici

Gli operatori di confronto restituiscono sempre un valore booleano (true o false). Sono il cuore di ogni struttura decisionale (if/else).

Uguaglianza: == vs ===

Questa è una delle parti più critiche per i principianti.

  1. == (Uguaglianza debole): Confronta i valori dopo aver tentato di convertirli allo stesso tipo.
  2. === (Uguaglianza stretta): Confronta sia il valore che il tipo. È l'operatore raccomandato nella quasi totalità dei casi.

Altri operatori di confronto

  • != : Diverso (debole)
  • !== : Diverso (stretto)
  • > : Maggiore di
  • < : Minore di
  • >= : Maggiore o uguale
  • <= : Minore o uguale

Operatori Logici

Gli operatori logici permettono di combinare più condizioni:

  • && (AND): Restituisce true solo se tutte le condizioni sono vere.
  • || (OR): Restituisce true se almeno una delle condizioni è vera.
  • ! (NOT): Inverte il valore booleano.
let eta = 20;
let haPatente = true;
let haAssicurazione = false;

// Può guidare se è maggiorenne E ha la patente
let puoGuidare = (eta >= 18) && haPatente;
console.log("Può guidare? " + puoGuidare); // true

// Può circolare se può guidare E ha l'assicurazione
let puoCircolare = puoGuidare && haAssicurazione;
console.log("Può circolare? " + puoCircolare); // false

// Verifica se l'utente è minorenne (NOT maggiorenne)
console.log(! (eta >= 18)); // false

Conversioni di Tipo (Type Casting)

Come abbiamo visto, JavaScript a volte converte i tipi automaticamente (coercizione), ma spesso è necessario farlo manualmente per evitare bug. Esistono due modi principali per convertire i tipi: le funzioni globali e i costruttori.

Conversione in Numero

Quando riceviamo dati da un input HTML, questi arrivano sempre come stringhe. Per fare calcoli, dobbiamo convertirli in numeri.

  • Number(valore): Converte il valore in numero. Se non è possibile, restituisce NaN (Not a Number).
  • parseInt(valore): Analizza la stringa e restituisce il primo numero intero trovato.
  • parseFloat(valore): Simile a parseInt, ma mantiene i decimali.

Conversione in Stringa

  • String(valore): Converte qualsiasi valore in stringa.
  • .toString(): Metodo disponibile per la maggior parte degli oggetti/numeri.

Conversione in Booleano

  • Boolean(valore): Converte il valore in true o false.

In JavaScript, esistono i concetti di Truthy e Falsy. Un valore è Falsy se convertito in booleano diventa false. I valori falsy sono: false, 0, "" (stringa vuota), null, undefined e NaN. Tutto il resto è Truthy.

let inputUtente = "42";

// Errore comune: sommare una stringa e un numero
console.log(inputUtente + 8); // "428"

// Soluzione: Conversione esplicita
let numeroConvertito = Number(inputUtente);
console.log(numeroConvertito + 8); // 50

// Conversione a Booleano
console.log(Boolean("")); // false (stringa vuota)
console.log(Boolean("Ciao")); // true
console.log(Boolean(0)); // false

Esempi Pratici e Casi d'Uso Reali

Caso 1: Validazione di un Form

Immaginiamo di dover verificare se un utente ha inserito un'età valida in un campo di testo.

let etaInput = "25"; // Valore proveniente da un input HTML
let etaNumerica = Number(etaInput);

if (isNaN(etaNumerica)) {
    console.log("Errore: per favore inserisci un numero valido.");
} else if (etaNumerica < 0 || etaNumerica > 120) {
    console.log("Errore: l'età inserita non è plausibile.");
} else {
    console.log("Età accettata!");
}

Caso 2: Gestione di un Carrello Spesa

Calcolare il totale di un carrello applicando uno sconto solo se il totale supera una certa soglia.

let totaleCarrello = 150.50;
let sogliaSconto = 100;
let percentualeSconto = 0.10; // 10%

let prezzoFinale = (totaleCarrello > sogliaSconto) 
    ? totaleCarrello * (1 - percentualeSconto) 
    : totaleCarrello;

console.log("Il prezzo finale è: " + prezzoFinale.toFixed(2));

Errori Comuni e FAQ

Perché "10" == 10 è true ma "10" === 10 è false?

L'operatore == esegue la coercizione di tipo: vede che uno è un numero e l'altro è una stringa che "sembra" un numero, quindi li converte entrambi allo stesso tipo prima di confrontarli. L'operatore === invece controlla prima il tipo: stringa vs numero $
ightarrow$ sono tipi diversi $
ightarrow$ false.

Cos'è NaN?

NaN sta per Not a Number. Viene restituito quando un'operazione matematica fallisce (es. Number("ciao") o 0 / 0). Un dettaglio strano è che typeof NaN restituisce "number", poiché NaN è tecnicamente un valore numerico speciale che rappresenta un errore di calcolo.

Come posso evitare i problemi di concatenazione involontaria?

Il modo migliore è usare i Template Literals (introdotti in ES6). Invece di usare +, usa i backtick (`) e la sintassi ${variabile}. Questo rende il codice più leggibile e riduce gli errori di conversione.

let nome = "Luca";
let punti = 10;
// Invece di: "Il giocatore " + nome + " ha " + punti + " punti"
console.log(`Il giocatore ${nome} ha ${punti} punti`);

Prossimi Passi

Ora che padroneggiate gli operatori e le conversioni di tipo, avete gli strumenti per manipolare i dati e creare logiche condizionali. Tuttavia, l'informatica non è fatta solo di calcoli lineari.

Nella prossima lezione, esploreremo le Strutture di Controllo, in particolare l'istruzione if...else e lo switch. Impareremo a far prendere decisioni al nostro programma in base ai risultati degli operatori di confronto che abbiamo studiato oggi.

Per approfondire, vi suggerisco di:

  1. Fare pratica con la console del browser (F12 $
    ightarrow$ Console) provando diverse combinazioni di == e ===.
  2. Studiare la documentaion MDN (Mozilla Developer Network) sulla sezione "Expressions and Operators".
  3. Provare a creare un piccolo script che converta i gradi Celsius in Fahrenheit, gestendo l'input dell'utente come stringa e convertendolo in numero.