Operatori di Assegnazione Logica in JavaScript

ES12 (ECMAScript 2021) ha introdotto diversi operatori che puntano a ridurre il codice boilerplate senza sacrificare la chiarezza. Tra questi, gli operatori di assegnazione logica (||=, &&=, ??=) risolvono un problema molto concreto: assegnare un valore solo se una certa condizione è soddisfatta, evitando blocchi if / else ripetitivi.

Per capire davvero questi operatori è fondamentale partire da una premessa:
👉 non introducono nuova logica, ma condensano pattern che usiamo da sempre.

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

Un concetto chiave: assegnazione condizionata

In JavaScript, prima dell’introduzione di questi operatori, l’unico modo per assegnare un valore in modo condizionale era scrivere qualcosa come:

if (condition) {
  a = value;
}

Questo pattern è così comune che il linguaggio ha deciso di offrirne una forma sintattica dedicata, più corta ma semanticamente equivalente. È esattamente ciò che fanno ||=, &&= e ??=.

OR Assignment (`||=`)

Iniziamo dall’operatore più intuitivo, perché deriva direttamente dall’uso storico dell’operatore || per fornire valori di fallback.

Idea di base

L’operatore ||= assegna un valore solo se la variabile attuale è falsy.

Valori falsy in JavaScript

false
0
""
null
undefined
NaN

In altre parole, stiamo dicendo a JavaScript:

“Se questo valore non è valido, sostituiscilo con un valore di default”.

Un primo esempio concreto

Immaginiamo di voler garantire che una variabile username abbia sempre un valore:

let username = "";
username ||= "Guest";

Per capire cosa succede, traduciamolo nella forma più esplicita possibile:

if (!username) {
  username = "Guest";
}

Il comportamento è identico:

"" è un valore falsy
quindi l’assegnazione avviene

L’operatore ||= non fa altro che rendere esplicita questa intenzione in una singola riga.

Quando `||=` diventa pericoloso

Il problema nasce quando un valore falsy è semanticamente valido.

Consideriamo questo caso:

let counter = 0;
counter ||= 10;

A prima vista potrebbe sembrare corretto, ma traduciamolo con if:

if (!counter) {
  counter = 10;
}

Qui il problema è evidente:

0 è falsy
ma rappresenta un valore valido

👉 In questo scenario ||= non è l’operatore giusto.

AND Assignment (`&&=`)

Se ||= assegna quando qualcosa non è valido, &&= fa l’opposto: assegna solo quando il valore attuale è valido (truthy).

Intuizione

&&= è utile quando vogliamo continuare una catena logica solo se una condizione iniziale è soddisfatta.

Esempio guidato

let isLogged = true;
isLogged &&= "utente autenticato";

Questo codice significa:

if (isLogged) {
  isLogged = "utente autenticato";
}

L’assegnazione avviene solo perché isLoggedIn era truthy.

Se invece fosse stato false, il valore sarebbe rimasto invariato.

Perché è utile?

Pensiamo alla necessità di fare refresh di una cache:

let cachedValue = cache.get("result");
cachedValue &&= refreshCache("result");

Traduzione esplicita:

let cachedValue = cache.get("result");

if (cachedValue) {
  cachedValue = refreshCache("result");
}

Analisi passo passo

cachedValue ottiene il valore dalla cache.
Con &&= diciamo:
“Se c’è già un valore (cachedValue è truthy), aggiorniamo la cache.”
Se cachedValue è falsy (null o undefined), non facciamo nulla.

In questo modo:

evitiamo errori e operazioni inutili
evitiamo if
rendiamo evidente che l’operazione è condizionata all’esistenza del valore

Nullish Assignment (`??=`)

Arriviamo ora all’operatore più importante e spesso frainteso.

Il problema che risolve

Molto spesso vogliamo assegnare un valore di default solo se una variabile non è stata inizializzata, non quando è semplicemente falsy.

Ed è qui che ||= fallisce.

Il comportamento di `??=`

??= assegna un valore solo se la variabile è null o undefined.

Non guarda la truthiness, guarda l’assenza reale del valore.

Esempio chiarificatore

let pageSize = 0;
pageSize ??= 10;

Traduciamolo:

if (pageSize === null || pageSize === undefined) {
  pageSize = 10;
}

Poiché pageSize è 0, l’assegnazione non avviene.

👉 Questo rende ??= la scelta corretta per:

numeri
booleani
stringhe vuote
configurazioni

Il grande limite di `?.` in assegnazione

Arriviamo ora a un problema reale che molti incontrano.

Codice apparentemente logico, ma errato

user?.profile?.name = "Mario";

JavaScript lo rifiuta perché:

?. serve solo per leggere
non produce un riferimento scrivibile

In termini espliciti, JavaScript non permette questo:

if (user && user.profile) {
  user.profile.name = "Mario";
}

La soluzione corretta: inizializzare prima

Il modo giusto per affrontare il problema è garantire l’esistenza della struttura, poi assegnare.

user.profile ||= {};
user.profile.name = "Mario";

Traduzione completa:

if (!user.profile) {
  user.profile = {};
}

user.profile.name = "Mario";

Qui ||= non è solo una scorciatoia sintattica: diventa uno strumento strutturale.

Pattern per oggetti annidati

Questo approccio scala molto bene:

user.settings ||= {};
user.settings.preferences ||= {};
user.settings.preferences.theme ??= "dark";

Ogni riga:

prepara il terreno
rende sicura la successiva

La versione equivalente con if/else sarebbe molto verbosa:

if (!user.settings) {
  user.settings = {};
}

if (!user.settings.preferences) {
  user.settings.preferences = {};
}

if (user.settings.preferences.theme === null ||
     user.settings.preferences.theme === undefined) {
  user.settings.preferences.theme = "dark";
}

Conclusione

Gli operatori ||=, &&= e ??= non servono solo a “scrivere meno codice”, ma a scrivere codice migliore:

più leggibile
più dichiarativo
più vicino all’intenzione reale

Se usati insieme:

eliminano il bisogno di ?. in scrittura
sostituiscono interi blocchi if/else
diventano un pattern fondamentale del JavaScript moderno

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog