Opérateur de coalescence nulle en JavaScript

Cet article explique l'opérateur de coalescence nulle en JavaScript.

YouTube Video

Opérateur de coalescence nulle en JavaScript

En JavaScript, l'opérateur de coalescence nulle (??) évalue si une valeur est null ou undefined et renvoie une valeur par défaut différente dans ce cas. Il est similaire à l'opérateur OU logique (||) communément utilisé, mais il diffère en se spécialisant dans les cas de null et undefined.

L'opérateur logique OU retourne la valeur de droite si la valeur de gauche est « falsy », tandis que l'opérateur de coalescence des nuls retourne la valeur de droite uniquement lorsque la valeur de gauche est null ou undefined. Cette fonctionnalité permet de gérer correctement des valeurs comme 0 et les chaînes vides ("").

Syntaxe de base

1let result = value ?? defaultValue;

• value est la valeur vérifiée.
• defaultValue est la valeur retournée lorsque value est null ou undefined.

Exemples d'utilisation de l'opérateur de coalescence nulle

L'exemple suivant illustre un processus qui renvoie une valeur par défaut en cas de null ou undefined.

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

Dans ce code, comme name est null, la valeur de defaultName, "Anonymous", est renvoyée. Si name est une valeur autre que null ou undefined, cette valeur est renvoyée.

Différences avec l'opérateur OU logique

L'opérateur de coalescence des nuls est similaire à l'opérateur logique OU mais présente une différence importante. L'opérateur logique OU teste les valeurs « falsy » (false, 0, NaN, "", null, undefined, etc.), tandis que l'opérateur de coalescence des nuls teste uniquement null et undefined.

Exemple d'opérateur OU logique :

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

Exemple d'opérateur de coalescence nulle :

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

De cette manière, l'opérateur de coalescence des nuls conserve des valeurs valides comme 0 et les chaînes vides ("") et ne retourne une valeur par défaut que si nécessaire. Étant donné que l'opérateur logique OU considère ces valeurs comme « falsy » et retourne la valeur par défaut, il est important de choisir l'opérateur approprié en fonction du cas d'utilisation.

Exemple lors de l'utilisation en combinaison :

L'opérateur de coalescence des nuls peut également être combiné avec d'autres opérateurs logiques, mais cela nécessite de la prudence.

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;

• Par exemple, lorsqu'il est utilisé avec l'opérateur logique OU (||) ou l'opérateur logique ET (&&), des parenthèses doivent être utilisées pour clarifier l'ordre des opérations.

1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false

• Dans cet exemple, a ?? b est évalué en premier, et comme a est null, b est renvoyé. Ensuite, b || c est évalué, et comme b est falsy, c est finalement retourné.

Cas où l'opérateur de coalescence des nuls est utile

Voici des cas où l'opérateur de coalescence des nuls est utile.

• Valeurs par défaut pour les formulaires Ceci peut être utilisé dans des scénarios où une valeur par défaut est définie pour les champs de saisie du formulaire lorsque l'utilisateur ne saisit rien.

1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18

• Gestion des réponses API Un traitement de secours peut être réalisé lorsque la valeur est null ou undefined dans les réponses de l'API.

1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

Résumé

L'opérateur de coalescence des nuls (??) est très utile pour initialiser des données et gérer les réponses d'API, car il retourne une valeur par défaut lorsqu'il rencontre null ou undefined. En particulier, il est préférable à l'opérateur logique OU traditionnel (||) lorsque vous souhaitez gérer correctement les valeurs « falsy » comme 0 ou les chaînes vides.

À propos de l'opérateur d'assignation de coalescence nullish (??=)

Aperçu

En JavaScript, l'opérateur d'assignation de coalescence nullish ??= a été introduit pour attribuer efficacement une nouvelle valeur aux variables contenant null ou undefined. Cet opérateur est un raccourci pratique pour assigner une valeur à une variable uniquement si une valeur spécifique est null ou undefined.

Utilisation de base

L'opérateur d'affectation de coalescence des nuls fonctionne comme suit :.

• Si une variable est null ou undefined, elle attribue la valeur se trouvant à droite.
• Si la variable n'est ni null ni undefined, elle ne fait rien et conserve la valeur actuelle.

Syntaxe

La syntaxe de base de l'opérateur d'affectation de coalescence des nuls est la suivante :.

1x ??= y;

• y est assigné à x si x est null ou undefined.
• Si x a déjà une valeur (non null ou undefined), la valeur de x ne sera pas modifiée.

Exemple

Regardons un exemple de base de l'opérateur d'assignation par coalescence nulle.

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"

• Dans ce code, comme userName est null, la valeur de defaultName est assignée.

Ensuite, voici un exemple où la valeur n'est ni null ni undefined.

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"

• Dans ce cas, comme "Alice" est déjà défini pour userName, aucune assignation n'est effectuée.

Comparaison avec d'autres opérateurs d'assignation

JavaScript possède également plusieurs autres opérateurs d'assignation. En particulier, la différence avec l'opérateur d'assignation logique OU (||=) est importante.

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

L'opérateur d'affectation logique OU attribue une valeur même en présence de valeurs « falsy » comme false, 0 ou une chaîne vide (""), tandis que l'opérateur d'affectation de coalescence des nuls ne fonctionne que lorsque la valeur est null ou undefined.

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

Étant donné que l'opérateur d'affectation de coalescence des nuls fonctionne uniquement sur null ou undefined, il est très utile lorsque vous souhaitez conserver des valeurs comme 0 ou false.

Cas d'utilisation dans le monde réel

Un cas d'utilisation réel pour l'opérateur d'affectation par coalescence nulle peut être le suivant :.

1. Définir des valeurs par défaut

   Il est utile pour définir des valeurs par défaut lorsque les entrées utilisateur ou les réponses de l'API peuvent être null ou undefined.

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

2. Gérer les paramètres optionnels

   Il peut également être utilisé pour effectuer des actions par défaut lorsque les arguments d'une fonction ne sont pas spécifiés.

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

Résumé

L'opérateur d'affectation de coalescence des nuls (??=) attribue une valeur uniquement lorsque la valeur de gauche est null ou undefined, rendant le code plus concis et aidant à éviter les attributions involontaires. Surtout lorsqu'il s'agit de valeurs "falsy" comme 0 ou false, il peut être plus approprié que l'opérateur OU logique traditionnel (||=).

En utilisant cet opérateur, vous pouvez créer un code plus robuste et lisible.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video