Introduction

JavaScript, étant l'un des langages de programmation les plus populaires, offre aux développeurs une gamme d'opérateurs pour gérer diverses opérations logiques. Parmi ceux-ci, les opérateurs Logical OR (||) et Nullish Coalescing (??) sont des outils fondamentaux pour gérer les valeurs par défaut et gérer les valeurs nulles. Cet article approfondira les différences entre ces deux opérateurs, leurs cas d'utilisation et des exemples pratiques et complexes pour illustrer leur utilisation.

Comprendre l'opérateur logique OU (||)

L'opérateur OU logique (||) en JavaScript est largement utilisé pour renvoyer la première valeur véridique parmi ses opérandes ou la dernière valeur si aucune n'est véridique. Il est principalement utilisé pour définir les valeurs par défaut.

Syntaxe

result = operand1 || operand2;

Comment ça fonctionne

Le || l'opérateur évalue de gauche à droite, renvoyant le premier opérande s'il est véridique ; sinon, il évalue et renvoie le deuxième opérande.

Exemple 1 : Définition des valeurs par défaut

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput || defaultText;
console.log(message); // Output: 'Hello, World!'

Dans cet exemple, userInput est une chaîne vide (fausse), donc defaultText est renvoyé.

Exemple 2 : gestion de plusieurs valeurs

let firstName = null;
let lastName = 'Doe';

let name = firstName || lastName || 'Anonymous';
console.log(name); // Output: 'Doe'

Ici, firstName est nul (faux), donc lastName est renvoyé car il est véridique.

Limites de l'opérateur logique OU (||)

La principale limitation du || L'opérateur est qu'il traite plusieurs valeurs comme fausses, telles que 0, NaN, '', false, null et indéfini. Cela peut conduire à des résultats inattendus lorsque ces valeurs sont censées être valides.

Présentation de l'opérateur de fusion nulle (??)

L'opérateur Nullish Coalescing (??) est un ajout plus récent à JavaScript, introduit dans ES2020. Il est conçu pour gérer les cas où null ou undefined sont explicitement censés être les seules valeurs nulles prises en compte.

Syntaxe

result = operand1 ?? operand2;

Comment ça fonctionne

Le ?? L'opérateur renvoie l'opérande de droite lorsque l'opérande de gauche est nul ou indéfini. Sinon, il renvoie l'opérande de gauche.

Exemple 1 : Définition des valeurs par défaut

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput ?? defaultText;
console.log(message); // Output: ''

Dans cet exemple, userInput est une chaîne vide, qui n'est ni nulle ni indéfinie, elle est donc renvoyée.

Exemple 2 : gestion des valeurs nulles

let firstName = null;
let lastName = 'Doe';

let name = firstName ?? lastName ?? 'Anonymous';
console.log(name); // Output: 'Doe'

Ici, firstName est nul, donc lastName est renvoyé car il n'est ni nul ni indéfini.

Comparaison des opérateurs logiques OU (||) et de fusion nulle (??)

Exemple 1 : Comparaison de valeurs fausses

let value1 = 0;
let value2 = '';

let resultOR = value1 || 'default';
let resultNullish = value1 ?? 'default';

console.log(resultOR); // Output: 'default'
console.log(resultNullish); // Output: 0

Dans cet exemple, 0 est considéré comme faux par le || opérateur mais est-ce une valeur valide pour le ?? opérateur.

Exemple 2 : utilisation des deux opérateurs ensemble

let userInput = null;
let fallbackText = 'Default Text';

let message = (userInput ?? fallbackText) || 'Fallback Message';
console.log(message); // Output: 'Default Text'

Ici, userInput est nul, donc fallbackText est utilisé par le ?? opérateur. Ensuite, le résultat est vérifié par le || opérateur, mais comme fallbackText est véridique, il est renvoyé.

Exemples complexes d'opérateurs logiques OU (||) et de fusion nulle (??)

Exemple 3 : Opérations imbriquées avec des objets

Envisagez un scénario dans lequel vous devez définir des valeurs par défaut pour les propriétés d'objets imbriqués.

let userSettings = {
  theme: {
    color: '',
    font: null
  }
};

let defaultSettings = {
  theme: {
    color: 'blue',
    font: 'Arial'
  }
};

let themeColor = userSettings.theme.color || defaultSettings.theme.color;
let themeFont = userSettings.theme.font ?? defaultSettings.theme.font;

console.log(themeColor); // Output: 'blue'
console.log(themeFont); // Output: 'Arial'

Dans cet exemple, userSettings.theme.color est une chaîne vide, donc defaultSettings.theme.color est utilisé. userSettings.theme.font est nul, donc defaultSettings.theme.font est utilisé.

Exemple 4 : Paramètres de fonction avec valeurs par défaut

Lorsque vous traitez des paramètres de fonction, vous souhaiterez peut-être fournir des valeurs par défaut pour les arguments manquants.

function greet(name, greeting) {
  name = name ?? 'Guest';
  greeting = greeting || 'Hello';

  console.log(`${greeting}, ${name}!`);
}

greet(); // Output: 'Hello, Guest!'
greet('Alice'); // Output: 'Hello, Alice!'
greet('Bob', 'Hi'); // Output: 'Hi, Bob!'
greet(null, 'Hey'); // Output: 'Hey, Guest!'

Dans cet exemple, le paramètre name utilise le ?? opérateur pour définir une valeur par défaut de « Invité » si le nom est nul ou non défini. Le paramètre de salutation utilise le || opérateur pour définir une valeur par défaut de « Bonjour » si le message d'accueil est une valeur fausse autre que null ou indéfini.

Exemple 5 : Combinaison avec un chaînage facultatif

Le chaînage facultatif (?.) peut être combiné avec || et ?? pour gérer en toute sécurité les propriétés d'objets profondément imbriquées.

let user = {
  profile: {
    name: 'John Doe'
  }
};

let userName = user?.profile?.name || 'Anonymous';
let userEmail = user?.contact?.email ?? 'No Email Provided';

console.log(userName); // Output: 'John Doe'
console.log(userEmail); // Output: 'No Email Provided'

Dans cet exemple, le chaînage facultatif garantit que si une partie du chemin de propriété n'existe pas, elle renvoie undéfini, évitant ainsi les erreurs. Le || et ?? Les opérateurs fournissent ensuite des valeurs par défaut appropriées.

Meilleures pratiques et cas d'utilisation

1. Utiliser || pour les valeurs par défaut larges : 

   • Lorsque vous devez fournir des valeurs par défaut pour une plage de conditions fausses (par exemple, chaînes vides, 0, NaN).

2. Utiliser ?? pour des contrôles nuls précis : 

   • Lorsque vous souhaitez spécifiquement gérer les valeurs nulles ou indéfinies sans affecter les autres valeurs fausses.

3. Combiner les deux :

   • Utilisez une combinaison de || et ?? pour les scénarios complexes dans lesquels vous devez gérer distinctement les valeurs véridiques/fausses et les valeurs nulles.

FAQ

Que fait l'opérateur OU logique (||) ?
L'opérateur OU logique (||) renvoie la première valeur véridique parmi ses opérandes ou le dernier opérande si aucun n'est véridique.

Quand dois-je utiliser l'opérateur Nullish Coalescing (??) ?
Utilisez l'opérateur Nullish Coalescing (??) lorsque vous devez gérer spécifiquement null ou undefined sans traiter d'autres valeurs fausses comme 0 ou des chaînes vides comme nullish.

Puis-je utiliser les deux opérateurs ensemble ?
Oui, vous pouvez utiliser les deux || et ?? ensemble pour gérer différents types de valeurs et garantir que la logique de votre code couvre efficacement différents cas.

Comment || gérer les chaînes vides ?
Le || L'opérateur traite les chaînes vides comme fausses, il renverra donc l'opérande suivant si le premier est une chaîne vide.

L'opérateur Nullish Coalescing (??) est-il pris en charge dans tous les navigateurs ?
Le ?? L’opérateur est pris en charge dans les navigateurs et environnements modernes prenant en charge ES2020. Pour les environnements plus anciens, vous devrez peut-être utiliser un transpilateur comme Babel.

Quelles sont les différences entre || et ?? les opérateurs?
La principale différence est que || considère plusieurs valeurs comme fausses (par exemple, 0, '', false), tandis que ?? ne traite que les valeurs nulles et non définies comme des valeurs nulles.

Conclusion

Comprendre les différences entre les opérateurs Logical OR (||) et Nullish Coalescing (??) en JavaScript est crucial pour écrire du code robuste et sans bug. Le || L'opérateur est idéal pour les grands scénarios de défaut, tandis que ?? est parfait pour gérer des valeurs nulles avec précision. En utilisant ces opérateurs de manière appropriée, vous pouvez vous assurer que votre code gère efficacement divers états de données, offrant ainsi une expérience utilisateur transparente.