Coalescence des nuls en JavaScript : Maîtriser l'assignation de valeurs par défaut

Les développeurs JavaScript ont souvent besoin d'assigner des valeurs par défaut lorsqu'une variable est nulle ou indéfinie. Avant ES2020, l'opérateur logique OU (||) était la méthode principale pour y parvenir. Cependant, l'introduction de l'opérateur de coalescence des nuls (??) offre une solution plus précise et fiable. Ce guide complet explore les nuances de la coalescence des nuls, ses avantages et des exemples pratiques pour vous aider à maîtriser cette puissante fonctionnalité.

Comprendre 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.

Syntaxe :

            leftOperand ?? rightOperand
            

              
                Copy
              
            
          

Différence clé avec l'opérateur OU logique (||) :

L'opérateur logique OU (||) renvoie l'opérande de droite si l'opérande de gauche est une valeur "falsy" (null, undefined, 0, '', NaN, false). Cela peut entraîner un comportement inattendu lorsque votre intention est de ne gérer que les valeurs null ou undefined.

Pourquoi utiliser la coalescence des nuls ?

La coalescence des nuls offre plusieurs avantages par rapport à l'opérateur OU logique traditionnel :

• Précision : Elle cible spécifiquement null et undefined, évitant les assignations par défaut non intentionnelles pour d'autres valeurs "falsy".
• Lisibilité : Elle communique clairement l'intention de ne traiter que les cas null ou undefined, améliorant la maintenabilité du code.
• Sécurité : Elle prévient les comportements inattendus causés par des valeurs "falsy" qui déclenchent involontairement des assignations par défaut.

Exemples pratiques

1. Assignation de valeur par défaut de base

Assigner une valeur par défaut à une variable si elle est null ou undefined :

            const userName = user.name ?? 'Guest';
console.log(userName); // Sortie : 'Guest' si user.name est null ou undefined, sinon le nom d'utilisateur réel
            

              
                Copy
              
            
          

2. Gérer les réponses d'API

Récupérer des données d'une API et fournir une valeur par défaut si une propriété spécifique est manquante dans la réponse :

            const apiResponse = {
  data: {
    city: null,
  },
};

const cityName = apiResponse.data.city ?? 'Unknown City';
console.log(cityName); // Sortie : 'Unknown City'
            

              
                Copy
              
            
          

3. Configurations par défaut

Définir des options de configuration par défaut pour un composant ou un module :

            const config = {
  theme: userSettings.theme,
  animationSpeed: userSettings.animationSpeed ?? 'normal',
};

console.log(config.animationSpeed); // Sortie : 'normal' si userSettings.animationSpeed est null ou undefined
            

              
                Copy
              
            
          

4. Gérer les préférences utilisateur

Permettre aux utilisateurs de personnaliser les paramètres et fournir des valeurs par défaut s'ils n'ont pas spécifié de préférence :

            let userVolume = localStorage.getItem('volume'); //peut retourner null
let volume = userVolume ?? 0.5; // définir un volume par défaut de 0.5

console.log(`Le volume de l'utilisateur est ${volume}`);
            

              
                Copy
              
            
          

5. Chaînage de la coalescence des nuls

Vous pouvez chaîner l'opérateur de coalescence des nuls pour fournir une cascade de valeurs par défaut :

            const setting = userSetting.displaySetting.theme ?? defaultSettings.theme ?? 'light';
console.log(setting); // Sortie : La première valeur non-null/undefined de la chaîne
            

              
                Copy
              
            
          

6. Travailler avec des fonctions

Assigner une fonction par défaut si la fonction fournie est nulle ou indéfinie :

            const logMessage = logger.log ?? (() => console.log('Aucun logger disponible.'));
logMessage('Ceci est un message de test.');
            

              
                Copy
              
            
          

Coalescence des nuls avec le chaînage optionnel

L'opérateur de coalescence des nuls s'associe parfaitement avec le chaînage optionnel (?.), vous permettant d'accéder en toute sécurité à des propriétés imbriquées sans causer d'erreurs si une propriété intermédiaire est null ou undefined.

Exemple :

            const user = {
  profile: {
    address: {
      city: null,
    },
  },
};

const cityName = user?.profile?.address?.city ?? 'Unknown City';
console.log(cityName); // Sortie : 'Unknown City'
            

              
                Copy
              
            
          

Dans cet exemple, si l'une des propriétés (user, profile, address ou city) est null ou undefined, le chaînage optionnel court-circuitera l'évaluation, et l'opérateur de coalescence des nuls renverra la valeur par défaut 'Unknown City'.

Cas d'usage courants dans les applications mondiales

Considérez ces scénarios internationaux où la coalescence des nuls peut être particulièrement utile :

• Localisation : Fournir des traductions par défaut basées sur la locale de l'utilisateur. Si une traduction n'est pas disponible pour une langue spécifique, une solution de repli vers une langue par défaut (par exemple, l'anglais) peut être implémentée.
• Formatage des devises : Afficher les valeurs monétaires avec un formatage approprié basé sur la région de l'utilisateur. Si les paramètres régionaux ne sont pas disponibles, un format de devise par défaut peut être appliqué.
• Formatage de la date et de l'heure : Formater les dates et les heures selon la locale de l'utilisateur. Si l'information de la locale est manquante, un format de date et d'heure par défaut peut être utilisé.
• Formatage des adresses : Afficher les informations d'adresse dans le format correct pour différents pays. Si le pays n'est pas spécifié, un format d'adresse par défaut peut être utilisé.

Exemple : Solution de repli pour la localisation

            const translatedText = localizedStrings[userLocale]?.greeting ?? localizedStrings['en-US'].greeting ?? "Hello!";
console.log(translatedText);
            

              
                Copy
              
            
          

Meilleures pratiques

• Utilisez ?? pour les vérifications null/undefined : Préférez ?? à || lorsque vous voulez spécifiquement gérer les valeurs null ou undefined.
• Combinez avec le chaînage optionnel : Utilisez ?? en conjonction avec le chaînage optionnel (?.) pour accéder en toute sécurité aux propriétés imbriquées.
• Évitez la complexité inutile : Gardez votre code propre et lisible en n'utilisant ?? que lorsqu'il offre un avantage clair.
• Tenez compte de la compatibilité des navigateurs : Assurez-vous que vos navigateurs cibles prennent en charge l'opérateur de coalescence des nuls (ES2020). Si vous devez supporter des navigateurs plus anciens, utilisez un transpileur comme Babel.
• Revues de code : Encouragez les revues de code pour garantir l'utilisation correcte de l'opérateur de coalescence des nuls, en particulier dans les grands projets internationaux où une mauvaise interprétation des valeurs "falsy" peut avoir des conséquences importantes.

Compatibilité des navigateurs

L'opérateur de coalescence des nuls est une fonctionnalité relativement nouvelle en JavaScript (ES2020). Assurez-vous que vos navigateurs cibles le prennent en charge, ou utilisez un transpileur comme Babel pour assurer la compatibilité avec les navigateurs plus anciens. Prenez en compte les données démographiques d'utilisation de votre application. Par exemple, un projet destiné à des utilisateurs dans des pays où l'adoption technologique est plus lente pourrait nécessiter une transpilation plus qu'un projet visant des utilisateurs dans des régions à la pointe de la technologie.

Pièges à éviter

• Mélanger ?? et || avec && : Lorsque vous combinez l'opérateur de coalescence des nuls (??) ou l'opérateur OU logique (||) avec l'opérateur ET logique (&&) sans parenthèses explicites, JavaScript lève une erreur de syntaxe. Utilisez toujours des parenthèses pour clarifier l'ordre des opérations.
• Confondre ?? avec || : Rappelez-vous la différence cruciale : ?? ne vérifie que null et undefined, tandis que || vérifie toute valeur "falsy".

Exemple du piège 1 (Erreur de syntaxe) :

            // Cela lèvera une SyntaxError :
// const value = a ?? b && c;

// Manière correcte (en utilisant des parenthèses) :
const value = a ?? (b && c);
const value2 = (a ?? b) && c;
            

              
                Copy
              
            
          

Alternatives à la coalescence des nuls (pour les navigateurs plus anciens)

Si vous devez prendre en charge des navigateurs plus anciens qui ne supportent pas l'opérateur de coalescence des nuls, vous pouvez utiliser les alternatives suivantes :

• Opérateur OU logique (||) : Comme mentionné précédemment, c'est l'approche traditionnelle. Cependant, soyez conscient du problème des valeurs "falsy".
• Opérateur ternaire : Une manière plus verbeuse mais explicite de vérifier null ou undefined.

Exemple : Opérateur ternaire

            const value = a === null || a === undefined ? defaultValue : a;
            

              
                Copy
              
            
          

Conclusion

L'opérateur de coalescence des nuls (??) est un ajout précieux au langage JavaScript, offrant une manière plus précise et lisible de gérer les assignations de valeurs par défaut face à des valeurs null ou undefined. En comprenant ses avantages et ses nuances, vous pouvez écrire un code plus propre, plus sûr et plus facile à maintenir. Le combiner avec le chaînage optionnel améliore encore votre capacité à gérer avec élégance des structures de données complexes. Lorsque vous développez des applications pour un public mondial, tenez compte des implications des valeurs nulles et indéfinies dans différents contextes culturels et régionaux, et tirez parti de la coalescence des nuls pour offrir une expérience cohérente et conviviale à tous.