Salut! Avez-vous déjà été frustré d'essayer de gérer des valeurs nulles ou indéfinies dans votre code JavaScript ? La fusion nulle est une nouvelle fonctionnalité qui facilite grandement les choses. Dans cet article, nous expliquerons la coalescence nulle. Cela signifie des termes simples, des exemples amusants et pas de jargon compliqué. À la fin, vous écrirez du code JS propre et concis en un rien de temps. Alors, qu'est-ce que la coalescence nulle ? Fondamentalement, c'est un moyen court et simple de fournir une valeur par défaut lorsque quelque chose est nul ou indéfini. Au lieu d'avoir des ternaires imbriqués désordonnés ou des instructions OU logiques, vous pouvez utiliser l'opérateur de point d'interrogation double (??) pour fusionner avec une valeur par défaut. Cela vous semble déroutant ? Ne vous inquiétez pas, nous allons vous montrer comment cela fonctionne avec quelques exemples faciles à suivre. Bouclez votre ceinture, ça va être une balade amusante ! Qu'est-ce que l'opérateur de coalescence nulle ? ? Avez-vous déjà été bloqué avec des valeurs nulles en JavaScript ? Je sais que j'ai. Eh bien, mon ami, permettez-moi de vous présenter l'opérateur de coalescence nulle (??). Ce petit gars va vous rendre la vie tellement plus facile. Alors, quel est exactement l'opérateur de coalescence nul ? Fondamentalement, c'est un raccourci pour fournir une valeur par défaut lorsque quelque chose pourrait être nul ou indéfini. Au lieu d'écrire : let name = obj.name || 'default name'; Vous pouvez maintenant simplement écrire : let name = obj.name ?? 'default name'; Le ?? L'opérateur renverra le côté gauche s'il n'est pas nul (c'est-à-dire nul ou indéfini), sinon, il renverra le côté droit. Ainsi, dans l'exemple ci-dessus, si n'est pas nul ou indéfini, name sera défini sur . Mais si est nul ou indéfini, name sera 'nom par défaut'. obj.name obj.name obj.name Plutôt pratique, non ? Quelques autres exemples : let age = ageInput ?? 25; // Sets age to ageInput if not nullish, otherwise 25 let email = user.email ?? 'no email provided'; let hobbies = obj.hobbies ?? []; // Sets hobbies to obj.hobbies if not nullish, otherwise an empty array J'espère que cela aide à simplifier une partie de votre logique conditionnelle en JavaScript. Un exemple concret auquel nous pouvons tous nous identifier Êtes-vous déjà allé payer quelque chose, pour vous rendre compte qu'il vous manquait quelques dollars ? Nous y avons tous été. La fusion nulle, c'est comme trouver quelques dollars supplémentaires dans votre poche pour pouvoir réellement vous permettre ce que vous voulez acheter. Disons que vous vous dirigez vers votre café préféré pour votre infusion matinale habituelle. Vous montez au comptoir avec 3 $ dans votre main, prêt à commander. Mais lorsque le barista vous indique votre total, il s'élève à 3,50 $ après taxes. , c'est comme se rappeler soudainement que vous avez un autre dollar dans votre poche, vous pouvez donc toujours prendre votre café. Phew! La fusion nulle En JavaScript, est un moyen de fournir une valeur par défaut au cas où quelque chose se résoudrait en null ou indéfini. Par exemple, supposons que vous ayez une fonction qui peut ou non renvoyer une valeur : la fusion nulle function getCoffeePrice() { // Returns $3.50 or undefined } let price = getCoffeePrice() ?? '$3.50'; Ici, si renvoie undefined, sera par défaut grâce au opérateur de coalescence nul. Vous êtes donc assuré d'avoir un prix pour votre café de toute façon. getCoffeePrice() price '$3.50' ?? La coalescence nulle permet à votre code d'être plus résilient en fournissant des valeurs par défaut de secours lorsque les variables sont nulles ou indéfinies. Tout comme trouver ce dollar supplémentaire dans votre poche au café, cela vous assure d'avoir ce dont vous avez besoin pour effectuer la transaction. Plutôt pratique, non ? Maintenant, vous pouvez être tranquille en sachant que vous comprenez la fusion nulle comme un pro. Bon codage et bon café ! Utilisation de la coalescence nulle en JavaScript L'opérateur de coalescence nul (??) renvoie son opérande gauche s'il n'est pas nul ; sinon, il renvoie son opérande droit. Confus? Décomposons cela. Une valeur "nulle" est soit nulle soit indéfinie. Alors le L'opérateur vérifie si la valeur de gauche est nulle et, si c'est le cas, renvoie la valeur de droite à la place. ?? Par exemple: const name = bob ?? 'anonymous'; Cela affectera la valeur de name à 'bob' si bob est défini. Si bob est indéfini ou nul, il assignera la chaîne 'anonyme' à la place. Pourquoi est-ce utile ? Sans le ?? opérateur, vous auriez à faire ceci: const name = bob !== null && bob !== undefined ? bob : 'anonymous'; Le ?? L'opérateur nous donne une syntaxe plus courte et plus propre pour faire essentiellement la même chose. Il peut être utilisé n'importe où dans JavaScript - dans , , des propriétés d'objet, etc. Partout où vous utiliseriez normalement le || (ou) pour les valeurs par défaut, vous pouvez maintenant utiliser ?? pour une valeur par défaut "nulle". des variables des arguments de fonction Quelques exemples : const foo = null ?? 'default string'; // foo is 'default string' const bar = 0 ?? 42; // bar is 0 const qux = 0 || 42; // qux is 42 - || returns first truthy value function doSomething(x = 0) { x = x ?? 10; // If x is nullish, set default of 10 console.log(x); } doSomething(null); // Prints 10 doSomething(5); // Prints 5 J'espère que cela aide à expliquer l'opérateur de coalescence nul ! Pourquoi la coalescence nulle est meilleure que OU (||) L'opérateur OR (||) renverra la première valeur de vérité. L'opérateur OR (||) fonctionne en renvoyant la première valeur de vérité qu'il rencontre. Si les deux valeurs sont fausses, il renverra la dernière valeur. Par exemple: let name = null; let user = name || 'John'; // user is 'John' Ici, est nul (faux), donc obtient la deuxième valeur, 'John'. name user L'opérateur de coalescence nulle (??) est plus intelligent. L'opérateur de coalescence nulle (??) a été introduit dans ES2020 et est un peu plus intelligent que OR (||). Il renverra la première valeur définie (pas null/undefined). Donc, si la première valeur est une chaîne vide, 0 ou false, il renverra cette valeur. Par exemple: let name = ''; let user = name ?? 'John'; // user is '' Ici, est une chaîne vide, donc obtient (la première valeur définie). name user name L'opérateur Nullish Coalescing nous permet de fournir des valeurs par défaut de manière plus propre. Nous pouvons définir des valeurs par défaut pour les valeurs nulles/indéfinies sans nous soucier des fausses valeurs comme 0, des chaînes vides, faux, etc. Par exemple, supposons que nous ayons une fonction qui renvoie l'âge d'un utilisateur, mais que parfois l'âge est nul : function getAge() { return age; // could be null } let userAge = getAge() || 30; // Uses OR, not ideal Ici, si est 0, '' ou faux, serait incorrectement 30. age userAge L'utilisation de l'opérateur de coalescence nulle résout ce problème : let userAge = getAge() ?? 30; // Uses ?? Désormais, n'aura que 30 ans si est nul ou indéfini. Toute autre valeur fausse comme 0 sera utilisée. userAge age Donc, en résumé, utilisez l'opérateur de coalescence nulle (??) au lieu de OR (||) lorsque vous souhaitez fournir une valeur par défaut pour null/undefined, mais pas pour des valeurs fausses telles que 0, des chaînes vides ou false. Votre code sera plus propre et moins sujet aux bugs ! Questions fréquentes sur la coalescence nulle Vous avez donc entendu parler de ce nouvel opérateur Nullish Coalescing (??) en JavaScript et vous avez des questions. Pas de soucis, je vous ai couvert! Avec quels types de données la coalescence nulle fonctionne-t-elle ? La coalescence nulle fonctionne avec n'importe quel type de données en JavaScript, y compris : Chiffres : 0 ?? 1 // Renvoie 1 Chaînes : '' ?? 'Bonjour' // Renvoie 'Bonjour' Booléens : faux ?? vrai // Renvoie vrai Objets: {} ?? {nom : 'Jean'} // Renvoie {nom : 'Jean'} Tableaux : [] ?? [1, 2, 3] // Renvoie [1, 2, 3] Et plus! Quelle est la différence entre || (Ou et ?? (Coalescence nulle) Opérateurs ? Le || L'opérateur (OU) renverra l'opérande droit si l'opérande gauche est faux (faux, 0, chaîne vide, nul, indéfini, NaN). Le ?? (Nullish Coalescing) ne renverra l'opérande droit que si l'opérande gauche est nul ou indéfini. Donc la principale différence est que ?? considère 0 et les chaînes vides comme des valeurs valides, alors que || ne fait pas. Quand dois-je utiliser ?? Plus de || ? Utiliser lorsque vous souhaitez fournir une valeur par défaut pour null ou undefined, mais considérez 0 et les chaînes vides comme des valeurs valides. ?? Utilisez || lorsque vous souhaitez fournir une solution de secours pour toute valeur "fausse". J'espère que cela aidera à éclaircir certaines de ces questions brûlantes que vous vous posiez sur l'opérateur Nullish Coalescing ! Faites-moi savoir si vous avez d'autres questions. Conclusion Vous savez maintenant tout sur la fusion nulle et son fonctionnement en JavaScript. Assez simple, non? Ce petit opérateur peut vous faire gagner du temps et rendre votre code plus propre en fournissant des valeurs par défaut de manière concise. Alors allez de l'avant et fusionnez des valeurs nulles au contenu de votre cœur! Vous êtes sur la bonne voie pour maîtriser les fonctionnalités JavaScript modernes. Bon codage !
