Coalescence des nuls en JavaScript : Un guide complet sur l'assignation de valeurs par défaut

En JavaScript, l'assignation de valeurs par défaut est une tâche courante. Traditionnellement, les développeurs utilisaient l'opérateur OU (||) à cette fin. Cependant, l'opérateur de coalescence des nuls (??), introduit dans ECMAScript 2020, offre un moyen plus précis et fiable de gérer les assignations de valeurs par défaut, en particulier lorsqu'il s'agit de valeurs null ou undefined. Ce guide propose une analyse approfondie de l'opérateur de coalescence des nuls, explorant sa syntaxe, son comportement, ses différences avec l'opérateur OU et ses cas d'utilisation pratiques.

Qu'est-ce que la coalescence des nuls ?

L'opérateur de coalescence des nuls (??) est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche est null ou undefined. Sinon, il renvoie son opérande de gauche. En termes plus simples, il fournit une valeur par défaut uniquement lorsqu'une variable est strictement null ou undefined.

Syntaxe

La syntaxe de l'opérateur de coalescence des nuls est simple :

opérandeGauche ?? opérandeDroit

Ici, opérandeGauche est la variable ou l'expression que vous voulez vérifier pour null ou undefined, et opérandeDroit est la valeur par défaut que vous voulez assigner si opérandeGauche est effectivement null ou undefined.

Exemple

Considérez l'exemple suivant :

const username = null ?? "Invité";
console.log(username); // Sortie : Invité

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

const city = "Londres" ?? "Inconnue";
console.log(city); // Sortie : Londres

Dans cet exemple, username se voit attribuer la valeur par défaut "Invité" car il est initialement null. De même, age se voit attribuer 25 car il commence comme undefined. Cependant, city conserve sa valeur d'origine, "Londres", car elle n'est ni null ni undefined.

Valeurs nulles (nullish) vs valeurs fausses (falsy)

Il est crucial de comprendre la différence entre les valeurs nulles (nullish) et les valeurs fausses (falsy) en JavaScript. Une valeur nulle est soit null, soit undefined. Une valeur fausse est une valeur considérée comme fausse lorsqu'elle est rencontrée dans un contexte booléen. Les valeurs fausses incluent :

null
undefined
0 (zéro)
NaN (Not a Number)
'' (chaîne vide)
false

La distinction clé est que l'opérateur de coalescence des nuls ne vérifie que null ou undefined, tandis que l'opérateur OU (||) vérifie n'importe quelle valeur fausse.

La différence entre `??` et `||`

L'opérateur OU (||) est un opérateur logique OU qui renvoie l'opérande de droite si l'opérande de gauche est faux. Bien qu'il puisse être utilisé pour assigner des valeurs par défaut, il peut entraîner un comportement inattendu lorsqu'il s'agit de valeurs comme 0 ou une chaîne vide.

Exemple : Les pièges de `||`

const quantity = 0 || 10; // Nous voulons une valeur par défaut de 10 si la quantité est manquante
console.log(quantity); // Sortie : 10 (Inattendu !) car 0 est une valeur fausse

const text = '' || 'Texte par défaut'; // Nous voulons un texte par défaut si le texte est manquant
console.log(text); // Sortie : Texte par défaut (Inattendu !) car '' est une valeur fausse

Dans le premier exemple, nous voulions assigner une quantité par défaut de 10 seulement si quantity était manquante (null ou undefined). Cependant, comme 0 est une valeur fausse, l'opérateur OU a incorrectement assigné la valeur par défaut. De même, la chaîne vide provoque l'affichage du texte par défaut même si la chaîne existe (mais est vide).

Utiliser `??` pour plus de précision

Réécrivons l'exemple précédent en utilisant l'opérateur de coalescence des nuls :

const quantity = 0 ?? 10;
console.log(quantity); // Sortie : 0 (Correct !)

const text = '' ?? 'Texte par défaut';
console.log(text); // Sortie : '' (Correct !)

Maintenant, la sortie est conforme aux attentes. L'opérateur de coalescence des nuls ne vérifie que null ou undefined, donc 0 et '' sont traités comme des valeurs valides, et leurs valeurs d'origine sont préservées.

Cas d'utilisation de la coalescence des nuls

L'opérateur de coalescence des nuls est utile dans divers scénarios où vous devez fournir des valeurs par défaut uniquement lorsqu'une variable est strictement null ou undefined. Voici quelques cas d'utilisation courants :

1. Gérer les paramètres de fonction optionnels

Lorsque vous définissez une fonction avec des paramètres optionnels, vous pouvez utiliser l'opérateur de coalescence des nuls pour fournir des valeurs par défaut si les paramètres ne sont pas fournis.

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

greet(); // Sortie : Bonjour, Utilisateur !
greet("Alice"); // Sortie : Bonjour, Alice !
greet("Bob", "Salutations"); // Sortie : Salutations, Bob !

2. Définir des options de configuration par défaut

Lorsque vous travaillez avec des objets de configuration, vous pouvez utiliser l'opérateur de coalescence des nuls pour vous assurer que les valeurs par défaut sont utilisées si certaines options de configuration ne sont pas spécifiées.

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

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Délai d'attente par défaut de 10 secondes
  const retries = options.retries ?? 5; // 5 tentatives par défaut
  console.log(`Délai : ${timeout}, Tentatives : ${retries}`);
}

fetchData(config); // Sortie : Délai : 5000, Tentatives : 3
fetchData({}); // Sortie : Délai : 10000, Tentatives : 5
fetchData({timeout:null, retries: undefined}); // Sortie : Délai : 10000, Tentatives : 5

3. Accéder aux propriétés d'objets imbriqués

Lors de l'accès aux propriétés d'objets imbriqués, l'opérateur de coalescence des nuls peut être combiné avec le chaînage optionnel (?.) pour fournir des valeurs par défaut si l'une des propriétés intermédiaires est null ou undefined.

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

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

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

4. Travailler avec des API et des données externes

Lors de la récupération de données à partir d'API ou de sources externes, l'opérateur de coalescence des nuls peut être utilisé pour fournir des valeurs par défaut si certains champs de données sont manquants ou ont des valeurs null ou undefined. Imaginez la récupération de données utilisateur de différentes régions. Supposons que certaines régions n'incluent pas le champ `country` dans leurs données utilisateur.

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Pays inconnu";
    const timezone = data.timezone ?? "UTC";
    console.log(`L'utilisateur vient de : ${country}, Fuseau horaire : ${timezone}`);
  } catch (error) {
    console.error("Erreur lors de la récupération des données utilisateur :", error);
  }
}

// Simulation de différentes réponses d'API :
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Pour tester cela, vous auriez besoin d'une API réelle ou d'un mock de fetch.
// À des fins de démonstration, simulons les réponses :
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("URL inattendue");
};

getUserData(123); // Sortie : L'utilisateur vient de : USA, Fuseau horaire : EST
getUserData(456); // Sortie : L'utilisateur vient de : Pays inconnu, Fuseau horaire : GMT

Priorité des opérateurs

L'opérateur de coalescence des nuls a une priorité d'opérateur relativement faible. Elle est inférieure à celle des opérateurs OU (||) et ET (&&). Par conséquent, lors de la combinaison de l'opérateur de coalescence des nuls avec d'autres opérateurs logiques, il est essentiel d'utiliser des parenthèses pour définir explicitement l'ordre des opérations. Ne pas le faire peut entraîner des erreurs de syntaxe ou un comportement inattendu.

Exemple : Utiliser des parenthèses pour plus de clarté

// Sans parenthèses (SyntaxError)
// const result = false || null ?? "Défaut"; // SyntaxError: Unexpected token '??'

// Avec parenthèses (Correct)
const result = false || (null ?? "Défaut");
console.log(result); // Sortie : Défaut

const anotherResult = (false || null) ?? "Défaut";
console.log(anotherResult); // Sortie : null

Dans le premier exemple, l'absence de parenthèses entraîne une SyntaxError car le moteur JavaScript ne peut pas déterminer l'ordre d'opérations prévu. En ajoutant des parenthèses, nous indiquons explicitement au moteur d'évaluer d'abord l'opérateur de coalescence des nuls. Le deuxième exemple est valide ; cependant, la sortie est différente car l'expression || est évaluée en premier.

Compatibilité des navigateurs

L'opérateur de coalescence des nuls (??) est une fonctionnalité relativement nouvelle, il est donc crucial de tenir compte de la compatibilité des navigateurs, surtout si vous ciblez des navigateurs plus anciens. La plupart des navigateurs modernes prennent en charge l'opérateur de coalescence des nuls, notamment :

Chrome 80+
Firefox 72+
Safari 13.1+
Edge 80+
Node.js 14+

Si vous devez prendre en charge des navigateurs plus anciens, vous pouvez utiliser un transpileur comme Babel pour convertir votre code en une version compatible de JavaScript. Babel transformera l'opérateur ?? en code JavaScript équivalent qui fonctionne dans des environnements plus anciens.

Meilleures pratiques

Voici quelques meilleures pratiques pour utiliser efficacement l'opérateur de coalescence des nuls :

Utilisez ?? pour les vérifications de nullité : Utilisez l'opérateur de coalescence des nuls (??) lorsque vous voulez spécifiquement fournir une valeur par défaut uniquement lorsqu'une variable est null ou undefined.
Utilisez des parenthèses pour les expressions complexes : Lorsque vous combinez l'opérateur de coalescence des nuls avec d'autres opérateurs logiques, utilisez des parenthèses pour définir clairement l'ordre des opérations.
Tenez compte de la compatibilité des navigateurs : Vérifiez la compatibilité des navigateurs et utilisez un transpileur si nécessaire pour prendre en charge les navigateurs plus anciens.
Utilisez de manière cohérente : Adoptez l'opérateur ?? le cas échéant pour un style de codage plus prévisible dans tout le projet.
Combinez avec le chaînage optionnel : Utilisez ?? en conjonction avec le chaînage optionnel ?. pour accéder en toute sécurité et assigner des valeurs par défaut aux propriétés imbriquées des objets.

Considérations globales

Lors du développement pour un public mondial, tenez compte des points suivants relatifs aux assignations de valeurs par défaut :

Localisation : Les valeurs par défaut peuvent devoir être localisées en fonction de la langue ou de la région de l'utilisateur. Par exemple, un symbole monétaire ou un format de date par défaut.
Normes culturelles : Certaines valeurs par défaut peuvent devoir être ajustées en fonction des normes culturelles. Par exemple, un message d'accueil par défaut pourrait devoir être différent dans différentes cultures.
Accessibilité : Assurez-vous que les valeurs par défaut sont accessibles et compréhensibles pour les utilisateurs handicapés. Fournissez des étiquettes claires et descriptives pour les valeurs par défaut dans les interfaces utilisateur.
Fuseaux horaires et dates : Lorsque vous travaillez avec des dates et des heures, utilisez les fuseaux horaires et les formats de date appropriés pour vous assurer que les valeurs par défaut sont affichées correctement aux utilisateurs dans différentes régions.

Exemple : Localisation avec la coalescence des nuls

Disons que vous souhaitez afficher un message de bienvenue par défaut dans différentes langues en fonction de la locale de l'utilisateur. Vous pouvez utiliser l'opérateur de coalescence des nuls pour fournir un message par défaut si un message localisé n'est pas disponible.

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

  const message = localizedMessages[locale] ?? "Welcome!"; // Par défaut en anglais si la locale n'est pas trouvée
  return message;
}

console.log(getWelcomeMessage("fr")); // Sortie : Bienvenue !
console.log(getWelcomeMessage("es")); // Sortie : Welcome! (Passe à l'anglais par défaut)

Conclusion

L'opérateur de coalescence des nuls (??) est un ajout précieux au langage JavaScript. Il offre un moyen plus précis et fiable d'assigner des valeurs par défaut par rapport à l'opérateur OU (||), en particulier lorsqu'il s'agit de valeurs comme 0 ou des chaînes vides. En comprenant sa syntaxe, son comportement et ses cas d'utilisation, vous pouvez écrire un code plus propre, plus maintenable qui gère avec précision les assignations de valeurs par défaut. N'oubliez pas de tenir compte de la compatibilité des navigateurs, de la priorité des opérateurs et des considérations globales lors de l'utilisation de l'opérateur de coalescence des nuls dans vos projets.

En suivant les meilleures pratiques décrites dans ce guide, vous pouvez tirer parti efficacement de l'opérateur de coalescence des nuls pour améliorer la qualité et la fiabilité de votre code JavaScript, le rendant plus robuste et plus facile à comprendre. N'oubliez pas de toujours privilégier la clarté et la maintenabilité dans votre code, et l'opérateur de coalescence des nuls peut être un outil puissant pour atteindre ces objectifs.