M

MLOG

Italiano

Padroneggia l'operatore di nullish coalescing (??) di JavaScript per assegnazioni di valori predefiniti più pulite ed efficienti. Scopri le differenze dall'operatore OR (||) e vedi esempi pratici.

Nullish Coalescing in JavaScript: Una Guida Completa all'Assegnazione di Valori Predefiniti

In JavaScript, l'assegnazione di valori predefiniti è un'operazione comune. Tradizionalmente, gli sviluppatori hanno utilizzato l'operatore OR (||) per questo scopo. Tuttavia, l'operatore di nullish coalescing (??), introdotto in ECMAScript 2020, offre un modo più preciso e affidabile per gestire le assegnazioni di valori predefiniti, specificamente quando si ha a che fare con valori null o undefined. Questa guida offre un'analisi approfondita dell'operatore di nullish coalescing, esplorandone la sintassi, il comportamento, le differenze rispetto all'operatore OR e i casi d'uso pratici.

Cos'è il Nullish Coalescing?

L'operatore di nullish coalescing (??) è un operatore logico che restituisce l'operando di destra quando l'operando di sinistra è null o undefined. Altrimenti, restituisce l'operando di sinistra. In termini più semplici, fornisce un valore predefinito solo quando una variabile è strettamente null o undefined.

Sintassi

La sintassi dell'operatore di nullish coalescing è semplice:

leftOperand ?? rightOperand

Qui, leftOperand è la variabile o l'espressione che si desidera controllare per null o undefined, e rightOperand è il valore predefinito che si desidera assegnare se leftOperand è effettivamente null o undefined.

Esempio

Considera il seguente esempio:

const username = null ?? "Guest";
console.log(username); // Output: Guest

const age = undefined ?? 25;
console.log(age); // Output: 25

const city = "London" ?? "Unknown";
console.log(city); // Output: London

In questo esempio, a username viene assegnato il valore predefinito "Guest" perché inizialmente è null. Allo stesso modo, a age viene assegnato 25 perché inizia come undefined. Tuttavia, city mantiene il suo valore originale, "London", perché non è né null né undefined.

Valori Nullish e Falsy a Confronto

È fondamentale comprendere la differenza tra valori nullish e falsy in JavaScript. Un valore nullish è o null o undefined. Un valore falsy è un valore che viene considerato falso quando incontrato in un contesto booleano. I valori falsy includono:

La distinzione chiave è che l'operatore di nullish coalescing controlla solo per null o undefined, mentre l'operatore OR (||) controlla qualsiasi valore falsy.

La Differenza tra ?? e ||

L'operatore OR (||) è un operatore OR logico che restituisce l'operando di destra se l'operando di sinistra è falsy. Sebbene possa essere utilizzato per assegnare valori predefiniti, può portare a comportamenti inaspettati quando si ha a che fare con valori come 0 o una stringa vuota.

Esempio: Le Insidie di ||

const quantity = 0 || 10; // Intendiamo un valore predefinito di 10 se la quantità è mancante
console.log(quantity); // Output: 10 (Inaspettato!) perché 0 è un valore falsy

const text = '' || 'Default Text'; //Intendiamo un testo predefinito se il testo è mancante
console.log(text); // Output: Default Text (Inaspettato!) perché '' è un valore falsy

Nel primo esempio, intendevamo assegnare una quantità predefinita di 10 solo se quantity fosse mancante (null o undefined). Tuttavia, poiché 0 è un valore falsy, l'operatore OR ha assegnato erroneamente il valore predefinito. Allo stesso modo, la stringa vuota fa sì che venga mostrato il testo predefinito anche se la stringa esiste (ma è vuota).

Usare ?? per Maggiore Precisione

Riscriviamo l'esempio precedente utilizzando l'operatore di nullish coalescing:

const quantity = 0 ?? 10;
console.log(quantity); // Output: 0 (Corretto!)

const text = '' ?? 'Default Text';
console.log(text); // Output: '' (Corretto!)

Ora, l'output è quello previsto. L'operatore di nullish coalescing controlla solo per null o undefined, quindi 0 e '' sono trattati come valori validi e i loro valori originali vengono preservati.

Casi d'Uso del Nullish Coalescing

L'operatore di nullish coalescing è utile in vari scenari in cui è necessario fornire valori predefiniti solo quando una variabile è strettamente null o undefined. Ecco alcuni casi d'uso comuni:

1. Gestire Parametri di Funzione Opzionali

Quando si definisce una funzione con parametri opzionali, è possibile utilizzare l'operatore di nullish coalescing per fornire valori predefiniti se i parametri non vengono forniti.

function greet(name, greeting) {
  const userName = name ?? "User";
  const userGreeting = greeting ?? "Hello";
  console.log(`${userGreeting}, ${userName}!`);
}

greet(); // Output: Hello, User!
greet("Alice"); // Output: Hello, Alice!
greet("Bob", "Greetings"); // Output: Greetings, Bob!

2. Impostare Opzioni di Configurazione Predefinite

Quando si lavora con oggetti di configurazione, è possibile utilizzare l'operatore di nullish coalescing per garantire che vengano utilizzati valori predefiniti se alcune opzioni di configurazione non sono specificate.

const config = {
  timeout: 5000,
  retries: 3
};

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Timeout predefinito di 10 secondi
  const retries = options.retries ?? 5; // 5 tentativi predefiniti
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Output: Timeout: 5000, Retries: 3
fetchData({}); // Output: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Output: Timeout: 10000, Retries: 5

3. Accedere a Proprietà di Oggetti Annidati

Quando si accede a proprietà di oggetti annidati, l'operatore di nullish coalescing può essere combinato con l'optional chaining (?.) per fornire valori predefiniti se una qualsiasi delle proprietà intermedie è null o undefined.

const user = {
  profile: {
    address: {
      city: "New York"
    }
  }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Output: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Output: Unknown

4. Lavorare con API e Dati Esterni

Quando si recuperano dati da API o fonti esterne, l'operatore di nullish coalescing può essere utilizzato per fornire valori predefiniti se alcuni campi di dati sono mancanti o hanno valori null o undefined. Considera il recupero di dati utente da diverse regioni. Supponiamo che alcune regioni potrebbero non includere il campo `country` nei loro dati utente.

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Unknown Country";
    const timezone = data.timezone ?? "UTC";
    console.log(`User is from: ${country}, Timezone: ${timezone}`);
  } catch (error) {
    console.error("Error fetching user data:", error);
  }
}

// Simulazione di diverse risposte API:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Per testare questo, avresti bisogno di un'API reale o di un mock di fetch.
// A scopo dimostrativo, simuliamo le risposte:
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("Unexpected URL");
};

getUserData(123); // Output: User is from: USA, Timezone: EST
getUserData(456); // Output: User is from: Unknown Country, Timezone: GMT

Precedenza degli Operatori

L'operatore di nullish coalescing ha una precedenza degli operatori relativamente bassa. È inferiore a quella degli operatori OR (||) e AND (&&). Pertanto, quando si combina l'operatore di nullish coalescing con altri operatori logici, è essenziale utilizzare le parentesi per definire esplicitamente l'ordine delle operazioni. Non farlo può causare errori di sintassi o comportamenti inaspettati.

Esempio: Usare le Parentesi per Chiarezza

// Senza parentesi (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// Con le parentesi (Corretto)
const result = false || (null ?? "Default");
console.log(result); // Output: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Output: null

Nel primo esempio, la mancanza di parentesi causa un SyntaxError perché il motore JavaScript non può determinare l'ordine delle operazioni previsto. Aggiungendo le parentesi, diciamo esplicitamente al motore di valutare prima l'operatore di nullish coalescing. Il secondo esempio è valido; tuttavia, l'output è diverso perché l'espressione || viene valutata per prima.

Compatibilità dei Browser

L'operatore di nullish coalescing (??) è una funzionalità relativamente nuova, quindi è fondamentale considerare la compatibilità dei browser, specialmente se si punta a browser più vecchi. La maggior parte dei browser moderni supporta l'operatore di nullish coalescing, tra cui:

Se hai bisogno di supportare browser più vecchi, puoi usare un transpiler come Babel per convertire il tuo codice in una versione compatibile di JavaScript. Babel trasformerà l'operatore ?? in codice JavaScript equivalente che funziona in ambienti più datati.

Best Practice

Ecco alcune best practice per utilizzare efficacemente l'operatore di nullish coalescing:

Considerazioni Globali

Quando si sviluppa per un pubblico globale, considera i seguenti punti relativi alle assegnazioni di valori predefiniti:

Esempio: Localizzazione con il Nullish Coalescing

Diciamo che vuoi visualizzare un messaggio di benvenuto predefinito in diverse lingue in base alla locale dell'utente. Puoi usare l'operatore di nullish coalescing per fornire un messaggio predefinito se un messaggio localizzato non è disponibile.

function getWelcomeMessage(locale) {
  const localizedMessages = {
    en: "Welcome!",
    fr: "Bienvenue !",
    de: "Willkommen!"
  };

  const message = localizedMessages[locale] ?? "Welcome!"; // Predefinito in inglese se la locale non viene trovata
  return message;
}

console.log(getWelcomeMessage("fr")); // Output: Bienvenue !
console.log(getWelcomeMessage("es")); // Output: Welcome! (Predefinito in inglese)

Conclusione

L'operatore di nullish coalescing (??) è un'aggiunta preziosa al linguaggio JavaScript. Fornisce un modo più preciso e affidabile per assegnare valori predefiniti rispetto all'operatore OR (||), specialmente quando si ha a che fare con valori come 0 o stringhe vuote. Comprendendone la sintassi, il comportamento e i casi d'uso, puoi scrivere codice più pulito e manutenibile che gestisce accuratamente le assegnazioni di valori predefiniti. Ricorda di considerare la compatibilità dei browser, la precedenza degli operatori e le considerazioni globali quando usi l'operatore di nullish coalescing nei tuoi progetti.

Seguendo le best practice delineate in questa guida, puoi sfruttare efficacemente l'operatore di nullish coalescing per migliorare la qualità e l'affidabilità del tuo codice JavaScript, rendendolo più robusto e facile da capire. Ricorda di dare sempre la priorità alla chiarezza e alla manutenibilità nel tuo codice, e l'operatore di nullish coalescing può essere uno strumento potente per raggiungere questi obiettivi.