Operatore di Coalescenza Nullish in JavaScript

Questo articolo spiega l'Operatore di Coalescenza Nullish in JavaScript.

YouTube Video

Operatore di Coalescenza Nullish in JavaScript

In JavaScript, l'Operatore di Coalescenza Nullish (??) valuta se un valore è null o undefined e restituisce un valore predefinito diverso in tal caso. È simile all'operatore logico OR (||) comunemente usato, ma si differenzia in quanto si specializza in null e undefined.

L'operatore logico OR restituisce il valore di destra se il valore di sinistra è falsy, mentre l'operatore di coalescenza null restituisce il valore di destra solo quando il valore di sinistra è null o undefined. Questa funzionalità consente la gestione corretta di valori come 0 e stringhe vuote ("").

Sintassi di Base

1let result = value ?? defaultValue;

• value è il valore che viene verificato.
• defaultValue è il valore restituito quando value è null o undefined.

Esempi di Utilizzo dell'Operatore di Coalescenza Nullish

Il seguente esempio implementa un processo per restituire un valore predefinito in caso di null o undefined.

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

In questo codice, poiché name è null, viene restituito il valore di defaultName, "Anonymous". Se name è un valore diverso da null o undefined, viene restituito quel valore.

Differenze con l'Operatore Logico OR

L'operatore di coalescenza null è simile all'operatore logico OR ma presenta una differenza importante. L'operatore logico OR verifica i valori 'falsy' (false, 0, NaN, "", null, undefined, ecc.), mentre l'operatore di coalescenza null verifica solo null e undefined.

Esempio di Operatore Logico OR:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

Esempio di Operatore di Coalescenza Nullish:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

In questo modo, l'operatore di coalescenza null conserva i valori validi come 0 e stringhe vuote ("") e restituisce un valore predefinito solo quando necessario. Poiché l'operatore logico OR considera questi valori come falsy e restituisce il valore predefinito, è importante scegliere l'operatore appropriato in base al caso d'uso.

Esempio di Utilizzo in Combinazione:

L'operatore di coalescenza null può anche essere combinato con altri operatori logici, ma è necessaria cautela quando lo si fa.

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;

• Ad esempio, quando lo si utilizza insieme all'operatore logico OR (||) o all'operatore logico AND (&&), è necessario utilizzare parentesi per chiarire l'ordine delle operazioni.

1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false

• In questo esempio, a ?? b viene valutato per primo e, poiché a è null, viene restituito b. Quindi, viene valutato b || c, e poiché b è falsy, viene restituito infine c.

Casi in cui l'operatore di coalescenza null è utile

I seguenti sono casi in cui l'operatore di coalescenza null è utile.

• Valori di default per i moduli Questo può essere utilizzato in scenari in cui viene impostato un valore predefinito per i campi di input del modulo quando l'utente non inserisce nulla.

1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18

• Gestione delle risposte API È possibile eseguire un'elaborazione di fallback quando il valore è null o undefined nelle risposte dell'API.

1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

Riepilogo

L'operatore di coalescenza null (??) è molto utile per inizializzare i dati e gestire le risposte delle API, poiché restituisce un valore predefinito in presenza di null o undefined. In particolare, è una scelta migliore rispetto al tradizionale operatore logico OR (||) quando si desidera gestire correttamente i valori falsy come 0 o stringhe vuote.

Sull'operatore di assegnazione di coalescenza nullish (??=)

Panoramica

In JavaScript, è stato introdotto l'operatore di assegnazione di coalescenza nullish ??= per assegnare in modo efficiente un nuovo valore a variabili che contengono null o undefined. Questo operatore è una scorciatoia conveniente per assegnare a una variabile solo se un determinato valore è null o undefined.

Uso di base

L'operatore di assegnazione della coalescenza null funziona come segue:.

• Se una variabile è null o undefined, assegna il valore del lato destro.
• Se la variabile non è né null né undefined, non fa nulla e conserva il valore attuale.

Sintassi

La sintassi di base dell'operatore di assegnazione della coalescenza null è la seguente:.

1x ??= y;

• y viene assegnato a x se x è null o undefined.
• Se x ha già un valore (non null o undefined), il valore di x non verrà modificato.

Esempio

Diamo un'occhiata a un esempio di base dell'operatore di assegnazione a coalescenza nullish.

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"

• In questo codice, poiché userName è null, viene assegnato il valore di defaultName.

Successivamente, ecco un esempio in cui il valore non è né null né undefined.

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"

• In questo caso, poiché "Alice" è già impostato per userName, non viene eseguita alcuna assegnazione.

Confronto con altri operatori di assegnazione

JavaScript ha anche diversi altri operatori di assegnazione. In particolare, è importante la differenza con l'operatore di assegnazione logica OR (||=).

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

L'operatore di assegnazione logico OR assegna un valore anche in presenza di valori falsy come false, 0 o una stringa vuota (""), mentre l'operatore di assegnazione della coalescenza null opera solo quando il valore è null o undefined.

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

Poiché l'operatore di assegnazione della coalescenza null opera solo su null o undefined, è molto utile quando si desidera conservare valori come 0 o false.

Casi d'uso nel mondo reale

Un caso d'uso reale per l'operatore di assegnazione con coalescenza nulla può essere il seguente:.

1. Impostare valori predefiniti

   È utile per impostare valori predefiniti quando gli input dell'utente o le risposte delle API possono essere null o undefined.

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

2. Gestione dei parametri opzionali

   Può essere utilizzato anche per eseguire azioni predefinite quando gli argomenti di una funzione non sono specificati.

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

Riepilogo

L'operatore di assegnazione della coalescenza null (??=) assegna un valore solo quando il valore a sinistra è null o undefined, rendendo il codice più conciso e aiutando a prevenire assegnazioni indesiderate. Soprattutto quando si lavora con valori "falsy" come 0 o false, può essere più appropriato rispetto al tradizionale operatore logico OR (||=).

Utilizzando questo operatore, è possibile creare codice più robusto e leggibile.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video