Operatori logici JavaScript (&&, ||, !)

Gli operatori logici sono fondamentali per controllare il flusso e il processo decisionale in JavaScript. Questa guida spiega come utilizzare gli operatori logici di JavaScript — &&, ||, !, il correlato ?? e l'idioma !! — e, altrettanto importante, i due comportamenti che creano più confusione: la valutazione short-circuit e la semantica di restituzione del valore. Tutti gli esempi qui sotto sono eseguibili.

Panoramica degli operatori logici JavaScript

Gli operatori logici valutano uno o più operandi e restituiscono un valore. Sono una parte fondamentale degli operatori JavaScript e vengono usati più spesso all'interno di condizioni, ma fanno molto di più che produrre true/false:

• && (AND logico)
• || (OR logico)
• ?? (Operatore di coalescenza null — tecnicamente distinto, ma risolve lo stesso problema di "scegliere un valore")
• ! (NOT logico)
• !! (Doppio NOT — l'idioma per la conversione in Boolean)

Valori truthy e falsy

Prima che gli operatori abbiano senso, occorre sapere cosa JavaScript considera "vero" e "falso" in un contesto Boolean. Esistono esattamente otto valori falsy; tutto il resto è truthy.

Questo è importante perché &&, || e ! testano gli operandi per la loro truthiness, non strettamente per il Boolean true. Consulta Tipi di dati JavaScript per i tipi di valore sottostanti.

Valutazione short-circuit e restituzione del valore

Due regole governano quasi tutto ciò che questi operatori fanno:

1. Short-circuit: la valutazione si ferma non appena il risultato è noto. L'operando di destra potrebbe non essere mai eseguito.
2. Restituiscono un operando, non un Boolean: && e || restituiscono uno dei valori originali, non true/false.

È esattamente per questo che || funziona come selettore di valori predefiniti e && funziona come guardia, come mostrato in seguito.

AND logico (&&)

In un contesto Boolean, && è true solo quando entrambi gli operandi sono truthy. Più precisamente, restituisce il primo operando falsy, oppure l'ultimo operando se sono tutti truthy. Usalo quando più condizioni devono essere tutte soddisfatte, o come guardia che esegue il lato destro solo quando il lato sinistro è truthy.

In questo esempio, sia isLoggedin che hasPermissions devono essere truthy perché l'accesso venga concesso. Se uno dei due è falsy, l'accesso viene negato — e grazie allo short-circuit, se isLoggedin è false, hasPermissions non viene nemmeno valutato.

OR logico (||)

In un contesto Boolean, || è true quando almeno un operando è truthy. Più precisamente, restituisce il primo operando truthy, oppure l'ultimo operando se sono tutti falsy. È questo che lo rende un operatore di fallback / valore predefinito.

Qui, l'operazione può continuare se networkStatus è 'good' oppure savedOffline è true, fornendo un fallback quando lo stato della rete è scarso.

Operatore di coalescenza null (??)

L'operatore ?? restituisce il lato destro solo quando il lato sinistro è null o undefined (collettivamente chiamati nullish). Ignora altri valori falsy come 0, '' e false. Questa singola differenza è ciò che lo distingue da ||.

Qui itemCount è 0. Con ??, defaultCount rimane 0 perché 0 non è nullish — quindi uno zero legittimo viene preservato.

?? vs ||

|| usa il fallback per qualsiasi valore falsy; ?? usa il fallback solo per null/undefined. Quando 0, '' o false sono input validi, questa distinzione rappresenta una vera misura di prevenzione dei bug.

Usa ?? quando vuoi un valore predefinito solo per "nessun valore presente", e mantieni || quando qualsiasi valore falsy dovrebbe attivare il fallback.

NOT logico (!)

L'operatore ! inverte la truthiness del suo operando e restituisce sempre un Boolean. È utile per alternare stati o verificare la negazione di condizioni.

Questo esempio verifica se isActive è false e, in caso affermativo, indica che è richiesta l'attivazione.

Doppio NOT (!!)

Applicare ! due volte converte qualsiasi valore nel suo equivalente Boolean: il primo ! inverte (e costringe a Boolean), il secondo lo riporta allo stato originale. Il risultato rappresenta rigorosamente true o false.

!!0 restituisce false perché 0 è un valore falsy in JavaScript. Il doppio NOT chiarisce la conversione Boolean.

Usare !! per verificare lo stato Boolean di una proprietà di un object

A volte si vuole verificare se una proprietà di un object non sia solo presente ma anche truthy. L'operatore !! è perfetto per convertire qualsiasi valore in un contesto strettamente Boolean, rendendo chiaro ed esplicito se la proprietà soddisfa le condizioni.

Considera uno scenario in cui hai un object utente che potrebbe avere una proprietà chiamata isActive. Vuoi eseguire un'azione solo se isActive non è semplicemente presente, ma è truthy.

In questo esempio:

• L'object utente ha una proprietà isActive il cui valore è undefined.
• Usando !!user.isActive, undefined viene convertito in false.
• Poiché isActive è undefined (che è un valore falsy), !!undefined risulta in false e l'output sarà "John is not active."

Scenari di utilizzo pratico

Rendering condizionale

Questo frammento mostra l'uso di && per il rendering condizionale, visualizzando 'UserDashboard' solo quando isLoggedIn è true.

Gestione dei valori predefiniti con OR logico

Se currentUser è null, userName assume come valore predefinito 'Guest'. Questo garantisce che un saluto sia sempre personalizzato.

Semplificare condizioni complesse

Questo codice concede l'accesso completo solo agli utenti verificati che sono amministratori o editor, combinando sia && che ||. Le parentesi sono importanti — consulta la precedenza degli operatori di seguito.

Precedenza degli operatori

Quando gli operatori vengono mescolati, JavaScript li valuta in un ordine fisso. Dalla precedenza più alta alla più bassa tra questi:

1. ! (NOT logico) — massima precedenza
2. && (AND logico)
3. || (OR logico) e ?? (hanno la stessa precedenza, motivo per cui non possono essere mescolati senza parentesi)

Gli operatori di confronto (<, ===, ecc.) si legano più strettamente di && e ||, quindi vengono valutati prima. Consulta Operatori di confronto per quelli.

In caso di dubbio, aggiungi parentesi. Non costano nulla e rendono l'intento inequivocabile.

Best practice

• Evita la complessità: mantieni le espressioni logiche semplici. Se diventano troppo complesse, suddividile in parti più piccole e gestibili.
• Sfrutta lo short-circuit: utilizza la natura short-circuit di && e || per ottimizzare le prestazioni evitando valutazioni non necessarie.
• Conversione Boolean esplicita: usa !! per convertire chiaramente i valori in true o false, migliorando la leggibilità e la prevedibilità del codice.
• Confronti coerenti: assicura tipi di dati coerenti nei confronti per prevenire comportamenti imprevisti dovuti alla coercizione dei tipi di JavaScript.

Conclusione

Gli operatori logici sono essenziali per scrivere JavaScript efficace. Ricorda le due idee che spiegano quasi tutto ciò che fanno: la valutazione short-circuit (l'operando destro potrebbe non essere mai eseguito) e la restituzione del valore (&& e || restituiscono uno degli operandi, non un Boolean). Usa ?? invece di || ogni volta che 0, '' o false sono valori validi, e aggiungi parentesi quando la precedenza non è chiara.

Per approfondire, consulta l'Operatore condizionale (ternario) per scegliere tra due valori in linea, e gli Operatori di confronto per costruire le condizioni che alimentano le espressioni logiche.

Esercitazione