Comprendre l'opérateur de coalescence nul JavaScript (??)

L'opérateur de fusion nul (??) est une fonctionnalité JavaScript qui a été introduite dans ECMAScript 2020. En utilisant cet opérateur, vous pouvez gérer les valeurs par défaut des variables qui peuvent être nulles ou non définies.

Avant son introduction, l'opérateur logique OU (||) était couramment utilisé à cette fin, mais il n'était pas toujours adapté car il gère toutes les valeurs fausses. Le ?? L'opérateur propose une alternative plus précise et plus claire.

Dans cet article, vous découvrirez le concept de l'opérateur de fusion nul, ses avantages, comment l'utiliser et quelques exemples.

Allons-y directement !?

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

L'opérateur de fusion nulle (??) est un opérateur logique, qui est utilisé pour vérifier si une valeur est nulle ou indéfinie.

Si son opérande de gauche est nul ou indéfini, alors il renvoie son opérande de droite (valeur de repli).

Si son opérande de gauche n'est pas nul ou indéfini, alors il renvoie l'opérande de gauche.

Par exemple :

let userInput = null;
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: default

Dans cet exemple, userInput est nul, donc le ?? L'opérateur renvoie la valeur de secours « par défaut ».

Maintenant, vous vous demandez peut-être en quoi est-ce différent du OU logique || opérateur ??

Ceci est différent du OU logique || opérateur, car le || L'opérateur renvoie l'opérande de droite si l'opérande de gauche est une valeur fausse (comme false, 0, '', NaN, etc.), pas seulement nulle ou indéfinie. Alors que le ?? L'opérateur se concentre uniquement sur le nul ou l'indéfini.

Pourquoi utiliser l'opérateur Nullish Coalescing (??) au lieu de l'opérateur Logical OR (||) ?

Le ?? L'opérateur se concentre uniquement sur les valeurs nulles et non définies, tandis que l'opérateur || L'opérateur vérifie toutes les valeurs fausses (comme false, 0, '', NaN, etc.), ce qui peut conduire à des résultats inattendus.

Par exemple :

let obj = {};
let value = obj.age ?? 'default value';
console.log(value); // Output: default value

Dans cet exemple, l'âge n'est pas défini dans l'objet, donc le ?? L'opérateur renvoie la valeur de secours « valeur par défaut ».

Maintenant, prenons un autre exemple pour mieux comprendre cela.

let userInput = '';
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: <empty string>

Dans cet exemple, userInput est une chaîne vide, qui est une valeur fausse et non nulle ou indéfinie, donc le ?? L'opérateur renvoie .

Voyons maintenant ce qui se passe si vous utilisez || au lieu de ??.

let userInput = '';
let inputValue = userInput || 'default';
console.log(inputValue); // Output: default

Ici, le || L'opérateur renvoie la valeur par défaut, car il vérifie toute valeur fausse.

Une autre raison d'utiliser ?? au lieu de || l'opérateur est la lisibilité.

Code utilisant ?? est généralement plus clair et plus lisible car son objectif est directement lié à la gestion des null et des indéfinis. Il fournit une valeur de repli lorsqu'une variable est nulle ou indéfinie, rendant le code plus lisible et moins sujet aux erreurs.

Opérateur nul ?? avec les opérateurs logiques ET/OU

Vous pouvez également utiliser le ?? opérateur avec d'autres opérateurs logiques pour vérifier plusieurs conditions.

Par exemple :

let userInput = null;
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: default

Dans cet exemple, inputValue obtient la valeur « par défaut » car l'opérande de gauche (userInput) est nul.

Voyons maintenant ce qui se passe si userInput n'est pas nul.

let obj = {};
let value = obj.age ?? 'default value';
console.log(value); // Output: default value

Oups !! Cela génère une erreur ??

Mais pourquoi cela arrive-t-il ??

Cela se produit parce que l'opérateur de fusion nul (??) ne peut pas être utilisé directement dans des opérateurs logiques comme || OR et && AND sans parenthèses appropriées autour.

La raison en est que JavaScript a des règles spécifiques pour la priorité des opérateurs, qui font référence aux niveaux de priorité des différents opérateurs, c'est-à-dire l'ordre dans lequel les opérations sont évaluées.

Par exemple : ?? a une priorité inférieure à || et &&, donc le placer entre parenthèses garantit qu'il est évalué en premier dans des expressions logiques.

Alors la bonne façon d'utiliser ?? directement avec des opérateurs logiques :

let userInput = '';
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: <empty string>

Ici, les parenthèses forcent JavaScript à évaluer le ?? opération en premier, puis le résultat est utilisé dans l'opération logique OU avec « alternative ».

Conclusion

En JavaScript, l'opérateur de fusion nul (??) fournit une manière plus claire et cohérente de gérer les valeurs par défaut pour null et non défini. Cela évite les pièges du || opérateur en ne renvoyant pas de fausses valeurs involontaires. L'utilisation de Nullish Coalescing Operator (??) peut rendre votre code plus propre, plus lisible et moins sujet aux erreurs, en particulier lorsqu'il s'agit de valeurs facultatives. Comprendre et utiliser Nullish Coalescing Operator (??) peut conduire à un code plus efficace et plus maintenable.

C'est tout pour aujourd'hui.

J'espère que cela a été utile.

Merci d'avoir lu.

Voici 45 autres trucs et astuces JavaScript pour les développeurs.

Pour plus de contenu comme celui-ci, cliquez ici.

Suivez-moi sur X(Twitter) pour des conseils quotidiens en matière de développement Web.

Continuez à coder !!

Découvrez toast.log, une extension de navigateur qui vous permet de voir les erreurs, les avertissements et les journaux au fur et à mesure qu'ils se produisent sur votre site - sans avoir à ouvrir la console du navigateur. Cliquez ici pour obtenir une réduction de 25 % sur toast.log.

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!