Opérateur de coalescence nul `??` en JavaScript

Dans ce blog, nous explorerons l'opérateur de coalescence nul ?? en JavaScript. Nous le comparerons avec l'opérateur logique OU ||, discuterons de sa priorité et fournirons des exemples pratiques pour vous aider à comprendre son utilisation. Allons-y !

Opérateur de coalescence nul ??

L'opérateur de coalescence nul ?? est utilisé pour fournir une valeur par défaut lorsqu'il s'agit de null ou non défini. Il renvoie l'opérande de droite lorsque l'opérande de gauche est null ou indéfini. Sinon, il renvoie l'opérande de gauche.

Syntaxe :

result = value1 ?? value2;

Exemple :

let user = null;
let defaultUser = "Guest";

let currentUser = user ?? defaultUser;
console.log(currentUser); // Output: "Guest"

Explication :

• utilisateur est null.
• L'opérateur ?? renvoie defaultUser car user est null.

Comparaison avec ||

L'opérateur logique OU || renvoie la première valeur véridique qu'il rencontre. Cela signifie qu'il renverra l'opérande de droite si l'opérande de gauche est faux (faux, 0, "", null, non défini, NaN).

Exemple :

let user = "";
let defaultUser = "Guest";

let currentUser = user || defaultUser;
console.log(currentUser); // Output: "Guest"

Explication :

• user est une chaîne vide "" (faux).
• L'opérateur || renvoie defaultUser car user est faux.

Différences clés

• ?? : considère uniquement null et non défini comme des valeurs fausses.
• || : considère toutes les valeurs fausses (false, 0, "", null,  undefined, NaN).

Exemple :

let user = 0;
let defaultUser = "Guest";

let currentUser1 = user ?? defaultUser;
let currentUser2 = user || defaultUser;

console.log(currentUser1); // Output: 0
console.log(currentUser2); // Output: "Guest"

Explication :

• utilisateur est 0 (faux pour || mais pas pour  ??).
• L'opérateur ?? renvoie 0 car l'utilisateur n'est pas null ou non défini.
• L'opérateur || renvoie "Invité" car utilisateur est faux.

Précédence

L'opérateur de coalescence nul ?? a une priorité inférieure à celle de la plupart des autres opérateurs, y compris l'opérateur logique OU ||. Cela signifie que les expressions impliquant ?? sont évaluées après les expressions impliquant ||.

Exemple :

let a = null;
let b = false;
let c = "Hello";

let result1 = a ?? b || c;
let result2 = a || b ?? c;

console.log(result1); // Output: "Hello"
console.log(result2); // Output: "Hello"

Explication :

• un ?? b renvoie false car a est null et b est faux.
• faux || c renvoie "Bonjour" parce que false est faux et c est véridique.
• un || b renvoie false car a est null et b est faux.
• faux ?? c renvoie "Bonjour" car false n'est pas null ou indéfini.

Exemples pratiques

Rassemblons le tout avec quelques exemples pratiques :

Vous utilisez ?? pour les valeurs par défaut

function getUserName(user) {
  return user.name ?? "Guest";
}

let user1 = { name: "Alice" };
let user2 = { age: 25 };

console.log(getUserName(user1)); // Output: "Alice"
console.log(getUserName(user2)); // Output: "Guest"

Explication :

• Si user.name est null ou non défini, l'opérateur ?? renvoie "Invité" .

Utiliser || pour les valeurs par défaut

function getUserName(user) {
  return user.name || "Guest";
}

let user1 = { name: "" };
let user2 = { age: 25 };

console.log(getUserName(user1)); // Output: "Guest"
console.log(getUserName(user2)); // Output: "Guest"

Explication :

• Si user.name est faux (par exemple, ""), le || opérateur renvoie "Invité".

Résumé

• ?? (Opérateur de fusion nul) : renvoie l'opérande de droite si l'opérande de gauche est null ou non défini.
• || (Opérateur OU logique) : renvoie la première valeur véridique qu'il rencontre.
• Précédence : l'opérateur ?? a une priorité inférieure à celle de l'opérateur || .

Conclusion

L'opérateur de coalescence nul ?? est un outil puissant en JavaScript pour fournir des valeurs par défaut lorsqu'il s'agit de null ou non défini. En comprenant ses différences avec l'opérateur logique OU || et sa priorité, vous serez en mesure d'écrire un code plus robuste et sans erreur. Continuez à pratiquer et à explorer pour approfondir votre compréhension de l'opérateur de coalescence nul en JavaScript.

Restez à l'écoute pour des blogs plus approfondis sur JavaScript ! Bon codage !

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!