Ne confondez pas ?? avec || en JavaScript : voici en quoi ils diffèrent !

?? contre || en JavaScript : la différence peu connue

Introduction

JavaScript propose plusieurs façons de gérer les valeurs non définies ou nulles dans le code. Deux opérateurs courants utilisés à cette fin sont l'opérateur de coalescence nul (??) et l'opérateur logique OU (||). Si ces opérateurs peuvent sembler similaires à première vue, leur comportement peut différer considérablement dans certaines situations. Comprendre les différences entre ces deux opérateurs est essentiel, notamment pour les débutants qui souhaitent écrire du code plus précis et sans bug.

Dans ce guide, nous explorerons la différence entre ?? et || en JavaScript, en le décomposant étape par étape avec des exemples afin que vous puissiez passer de zéro à héros en un rien de temps.

Qu'est-ce que l'opérateur de coalescence nul (??) ?

L'opérateur de coalescence nul ?? est utilisé pour fournir une valeur de secours lorsqu'il s'agit de null ou undefined. Il vérifie uniquement si une valeur est nulle ou indéfinie et si c'est le cas, il renvoie la valeur de secours fournie.

Syntaxe :

let result = value ?? fallbackValue;

Dans cette expression, si la valeur est nulle ou indéfinie, la valeur de repli sera renvoyée.

Exemple 1 : Utilisation de l'opérateur de coalescence nul (??)

let name = null;
let defaultName = name ?? 'John Doe';

console.log(defaultName); // Output: 'John Doe'

Dans cet exemple, le nom est nul, donc defaultName se voit attribuer « John Doe » comme solution de secours.

Points clés :

• ?? vérifie null ou non défini.
• Il renvoie la valeur à gauche si elle est NON nulle ou indéfinie, sinon, il renvoie la valeur de secours à droite.

Qu'est-ce que l'opérateur logique OU (||) ?

L'opérateur logique OU || est un autre opérateur utilisé pour les valeurs de repli, mais il fonctionne différemment. Il vérifie si le côté gauche de l'expression est une valeur fausse. En JavaScript, les valeurs fausses incluent null, non défini, false, 0, NaN et '' (chaîne vide).

Syntaxe :

let result = value || fallbackValue;

Si la valeur est fausse, fallbackValue sera renvoyée.

Exemple 2 : utilisation de l'opérateur logique OU (||)

let age = 0;
let defaultAge = age || 18;

console.log(defaultAge); // Output: 18

Dans ce cas, age est 0, ce qui est une valeur fausse, donc defaultAge se voit attribuer 18.

Points clés :

• || vérifie toute valeur fausse.
• Si la valeur de gauche est fausse, elle renvoie la valeur de repli à droite.

La principale différence entre ?? et ||

À première vue, ?? et || peut sembler servir le même objectif : fournir des valeurs de secours, mais il y a une distinction importante :

• Le ?? l'opérateur vérifie uniquement la valeur null ou indéfini.
• Le || l'opérateur vérifie toute valeur fausse.

Cette différence subtile devient cruciale lorsque vous avez affaire à des valeurs fausses mais valides comme 0, '' ou faux.

Exemple 3 : ?? contre || avec des valeurs fausses

let result = value ?? fallbackValue;

Ici, le nombre est 0, ce qui est une valeur valide mais fausse en JavaScript.

• En utilisant ??, defaultCount1 conserve 0, car 0 n'est ni nul ni indéfini.
• En utilisant ||, defaultCount2 devient 10, car 0 est une valeur fausse.

Quand devriez-vous l’utiliser ?? ou ||?

Le choix entre ?? et || dépend du comportement spécifique que vous souhaitez.

Utiliser ?? Quand:

• Vous souhaitez gérer spécifiquement les valeurs nulles ou non définies, sans affecter les valeurs fausses telles que 0, faux ou ''.
• Vous devez conserver des valeurs fausses valides, telles que 0 (un nombre valide) ou '' (une chaîne vide valide).

Exemple :

let name = null;
let defaultName = name ?? 'John Doe';

console.log(defaultName); // Output: 'John Doe'

Dans cet exemple, une chaîne vide '' est une entrée utilisateur valide, donc ?? lui permet de passer sans le remplacer par le repli.

Utiliser || Quand:

• Vous souhaitez traiter toutes les valeurs fausses (comme 0, false, NaN, '' et non défini) comme nécessitant des valeurs de secours.
• Vous pouvez remplacer des valeurs telles que 0 ou false.

Exemple :

let result = value || fallbackValue;

Ici, false est traité comme faux et la solution de secours « Non connecté » est utilisée.

Pièges courants et comment les éviter

Maintenant que vous connaissez la différence, examinons quelques erreurs courantes que font souvent les débutants et comment les éviter.

Erreur 1 : utiliser || pour les fausses valeurs valides

let age = 0;
let defaultAge = age || 18;

console.log(defaultAge); // Output: 18

Problème : Vous vouliez afficher 0 comme score, mais || remplacé par « Aucun score » car 0 est faux.

Solution : Utiliser ?? pour laisser passer 0.

let count = 0;
let defaultCount1 = count ?? 10; // Using nullish coalescing
let defaultCount2 = count || 10; // Using logical OR

console.log(defaultCount1); // Output: 0
console.log(defaultCount2); // Output: 10

Erreur 2 : malentendu sur la fusion nulle

let userInput = '';
let fallbackInput = userInput ?? 'default input';

console.log(fallbackInput); // Output: ''

Explication : userPreference est nulle, donc le repli false est utilisé. C'est un comportement correct pour ??.

Foire aux questions

Puis-je utiliser ?? et || Ensemble?

Oui, vous pouvez utiliser les deux opérateurs dans différentes parties de la même expression si nécessaire.

Exemple :

let isLoggedIn = false;
let loginStatus = isLoggedIn || 'Not logged in';

console.log(loginStatus); // Output: 'Not logged in'

Ceci vérifie d'abord s'il y a null ou non défini en utilisant ?? puis vérifie d'autres valeurs fausses en utilisant ||.

L’opérateur de fusion Nullish est-il pris en charge dans tous les navigateurs ?

Le ?? L'opérateur est pris en charge dans les navigateurs modernes, mais pour les environnements plus anciens, vous devrez peut-être utiliser un transpileur comme Babel.

Quel est le cas d’utilisation pour chaque opérateur ?

• Utiliser ?? lorsque vous vous souciez spécifiquement de null ou d'undefined.
• Utiliser || quand vous voulez gérer une valeur fausse.

Fait ?? Travailler avec d’autres valeurs fausses ?

Non, ?? vérifie uniquement les valeurs nulles et indéfinies, pas les autres valeurs fausses comme false, 0 ou ''.

Conclusion

Comprendre la différence entre ?? et || en JavaScript est crucial pour écrire du code robuste et sans erreur. Bien que les deux opérateurs aident à fournir des valeurs de repli, leur comportement diffère lorsqu'il s'agit de gérer des valeurs fausses. Utiliser ?? lorsque vous devez vérifier null ou non défini, et utiliser || lorsque vous voulez vérifier toute valeur fausse.

En maîtrisant ces opérateurs, vous serez capable d'écrire un code plus flexible et plus précis qui se comporte exactement comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!