Operatori in JavaScript: guida completa con esempi

Gli operatori sono il modo in cui le espressioni lavorano

Quasi ogni riga di JavaScript che faccia qualcosa di interessante è costruita con gli operatori: simboli che prendono uno o due valori e ne producono uno nuovo. + somma, === confronta, && combina booleani, ? : sceglie tra due valori. La maggior parte ti sarà familiare da altri linguaggi, ma alcuni hanno stranezze tipiche di JavaScript che conviene conoscere da subito.

Li vediamo per categoria, lasciando per ultimi quelli che userai meno ma che contano quando ti servono.

Operatori aritmetici

Quelli di base si comportano come ti aspetti:

console.log(7 + 3);    // 10
console.log(7 - 3);    // 4
console.log(7 * 3);    // 21
console.log(7 / 3);    // 2.3333...
console.log(7 % 3);    // 1   (remainder)
console.log(7 ** 3);   // 343 (exponent)

Alcune cose da tenere presenti:

• / fa sempre una divisione in virgola mobile. 7 / 2 è 3.5, non 3. Usa Math.floor(7 / 2) o Math.trunc(7 / 2) se ti serve un intero.
• % è il resto, non il vero modulo matematico. Mantiene il segno dell'operando a sinistra: -7 % 3 è -1, non 2.
• + è sovraccaricato. Se uno dei due lati è una stringa, concatena invece di sommare: "3" + 1 è "31". Ci torniamo tra un attimo.

Incremento e decremento

let count = 5;
count++;           // post-increment: count is now 6
console.log(count);

let other = ++count;  // pre-increment: count becomes 7 first, then assigned
console.log(other, count);

La differenza tra count++ e ++count conta solo quando usi il valore dell'espressione nella stessa riga. Come istruzione a sé stante fanno la stessa cosa. La maggior parte delle guide di stile preferisce count += 1 per chiarezza.

L'operatore + ha due personalità

Questa frega tutti almeno una volta:

console.log(1 + 2);         // 3
console.log("1" + 2);       // "12"
console.log(1 + "2");       // "12"
console.log("price: " + 5); // "price: 5"

Se uno dei due operandi è una stringa, + diventa concatenazione e converte l'altro lato in stringa. Tutti gli altri operatori aritmetici vanno nella direzione opposta: convertono le stringhe in numeri.

console.log("10" - 2);   // 8
console.log("10" * 2);   // 20
console.log("10" / "2"); // 5

La lezione da portare a casa: quando costruisci stringhe, preferisci i template literal (`price: ${5}`). Quando fai calcoli, assicurati che gli input siano davvero numeri: Number(x) o parseInt(x, 10) li convertono in modo esplicito.

Operatori di confronto

I confronti restituiscono booleani. Ne esistono due varianti: stretta e lasca.

console.log(5 === 5);    // true
console.log(5 === "5");  // false  (different types)
console.log(5 == "5");   // true   (== coerces)
console.log(5 !== "5");  // true
console.log(5 != "5");   // false

=== e !== sono stretti: stesso valore e stesso tipo. == e != convertono i tipi prima di confrontare, e questo porta a sorprese come null == undefined che vale true o [] == false che vale true. Usa === e !== di default. L'unica eccezione comune è x == null, una comoda scorciatoia per chiedere "x è null oppure undefined?"

Gli operatori di ordinamento funzionano come ti aspetti con i numeri, e in ordine alfabetico con le stringhe:

console.log(3 < 5);         // true
console.log(5 >= 5);        // true
console.log("apple" < "banana");  // true
console.log("Z" < "a");           // true (uppercase sorts before lowercase)

Il confronto tra stringhe si basa sui codici dei caratteri, quindi distingue tra maiuscole e minuscole. Se ti serve un ordinamento più naturale per le persone, usa String.prototype.localeCompare.

Operatori logici

&& (AND), || (OR) e ! (NOT) combinano booleani, ma sono più interessanti di quanto suggerirebbe la pura algebra booleana.

console.log(true && false);  // false
console.log(true || false);  // true
console.log(!true);          // false

Il colpo di scena: && e || non restituiscono true o false. Restituiscono uno dei loro operandi. && restituisce il primo valore falsy, oppure l'ultimo se sono tutti truthy. || restituisce il primo valore truthy, oppure l'ultimo se sono tutti falsy.

console.log("hi" && 42);      // 42     (both truthy, returns last)
console.log(0 && "hi");       // 0      (first falsy)
console.log("" || "fallback"); // "fallback"
console.log("name" || "anon"); // "name"

Ecco perché vedrai pattern come const displayName = user.name || "Guest": prendi la prima cosa che non è vuota. È conciso, ma attenzione: per || anche 0, "" e false fanno scattare il valore di riserva. Se per te sono valori legittimi, usa ?? (più sotto).

Entrambi gli operatori fanno anche cortocircuito: se il lato sinistro determina già il risultato, il lato destro non viene mai eseguito.

const user = null;
// Safe - the right side is skipped because user is falsy.
user && user.sendEmail();

L'operatore nullish coalescing ??

?? è come ||, ma scatta solo con null o undefined, non con 0, "" o false.

const count = 0;

console.log(count || 10);   // 10  (0 is falsy, so fallback wins)
console.log(count ?? 10);   // 0   (0 isn't nullish, so kept)

const name = undefined;
console.log(name ?? "Anon"); // "Anon"

Usa ?? quando un valore legittimo potrebbe essere falsy: contatori, stringhe vuote, un false esplicito. Usa || quando qualsiasi valore falsy deve significare "mancante". Nel codice moderno ?? è la scelta di default più sicura per i valori opzionali con un default non nullo.

Operatori di assegnazione

= assegna. Le forme composte uniscono l'assegnazione a un altro operatore:

let x = 10;
x += 5;    // x = x + 5  → 15
x -= 3;    // 12
x *= 2;    // 24
x /= 4;    // 6
x %= 4;    // 2
x **= 3;   // 8
console.log(x);

Esistono anche gli operatori di assegnazione logica, ||=, &&= e ??=, che assegnano solo se il valore attuale soddisfa una condizione:

const config = { timeout: 0, retries: null };

config.timeout ??= 5000;   // only assigns if null/undefined; 0 stays
config.retries ??= 3;      // null, so assigned
config.host ||= "localhost"; // undefined is falsy, so assigned

console.log(config);

Sono comodi per impostare valori di default senza istruzioni if prolisse.

L'operatore ternario

condition ? a : b è la versione in forma di espressione di if/else. Restituisce a quando la condizione è truthy, altrimenti b:

const age = 20;
const status = age >= 18 ? "adult" : "minor";
console.log(status);

const count = 1;
const label = count === 1 ? "item" : "items";
console.log(`${count} ${label}`);

I ternari danno il meglio quando devi scegliere tra valori brevi. Diventano difficili da leggere appena li annidi: se ti ritrovi a scrivere a ? b : c ? d : e, passa a if/else o a un oggetto di lookup.

typeof e instanceof

typeof restituisce una stringa che descrive il tipo del suo operando:

console.log(typeof 42);         // "number"
console.log(typeof "hi");       // "string"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"
console.log(typeof null);       // "object"  ← historical bug, can't be fixed
console.log(typeof []);         // "object"
console.log(typeof function(){}); // "function"

Due tranelli da memorizzare: typeof null è "object" (un bug del 1995 ormai permanente), e anche gli array restituiscono "object". Usa Array.isArray(x) per gli array e x === null per null.

instanceof controlla se un oggetto è stato creato da un certo costruttore:

class Dog {}
const rex = new Dog();

console.log(rex instanceof Dog);     // true
console.log(rex instanceof Object);  // true (every object is)
console.log([] instanceof Array);    // true

Spread e rest usano lo stesso ...

Vedrai ... in due contesti. Come spread, espande un iterabile in singoli elementi:

const nums = [1, 2, 3];
const more = [0, ...nums, 4];
console.log(more);                // [0, 1, 2, 3, 4]

const user = { name: "Ada" };
const full = { ...user, age: 30 };
console.log(full);                // { name: "Ada", age: 30 }

console.log(Math.max(...nums));   // 3

Come rest, raccoglie più valori in un unico array, di solito nei parametri di una funzione o nella destrutturazione:

function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4));  // 10

const [first, ...others] = [10, 20, 30, 40];
console.log(first, others);    // 10 [20, 30, 40]

Stessa sintassi, compiti opposti. Lo spread spacchetta, il rest raccoglie. Quale dei due sia lo decide il contesto: in una chiamata o in un letterale espande, in una lista di parametri o in un pattern di destrutturazione raccoglie.

Precedenza degli operatori (nel dubbio, usa le parentesi)

Gli operatori hanno una precedenza che decide quale viene eseguito per primo quando li mescoli. La moltiplicazione batte l'addizione, il confronto batte gli operatori logici, e così via:

console.log(1 + 2 * 3);          // 7,  not 9
console.log((1 + 2) * 3);        // 9
console.log(true || false && false);  // true, because && binds tighter than ||

La tabella completa è lunga e nessuno la ricorda tutta. Una semplice abitudine copre il 99% dei casi: quando mescoli operatori e non sei sicuro dell'ordine, aggiungi le parentesi. Il codice si legge meglio e non dipende dalla memoria di chi lo legge.

Operatori bit a bit (raramente quello che ti serve)

Per completezza: &, |, ^, ~, <<, >> e >>> lavorano sulla rappresentazione binaria degli interi. Li vedrai nel codice grafico, nei protocolli a basso livello e in qualche API che usa maschere di bit come flag.

console.log(5 & 3);   // 1   (0101 & 0011 = 0001)
console.log(5 | 3);   // 7
console.log(5 ^ 3);   // 6
console.log(~5);      // -6
console.log(1 << 3);  // 8

Un trucco diffuso ma discutibile: n | 0 tronca un numero a un intero a 32 bit, e un tempo se ne abusava come Math.trunc più veloce. Non farlo: Math.trunc è più chiaro e funziona anche con numeri fuori dall'intervallo a 32 bit.

Prossimo passo: if/else

Gli operatori producono valori; if/else usa quei valori per scegliere quale ramo di codice eseguire. Gran parte di ciò che farai con gli operatori di confronto e logici visti sopra sarà passare i loro risultati alle condizioni, ed è proprio l'argomento della prossima pagina.