Booléens et comparaison — la différence entre == et ===

Le seuil de livraison gratuite est-il atteint ? L'utilisateur est-il connecté ? Reste-t-il du stock ? Changer ce qui s'affiche à l'écran commence toujours par vérifier si une condition est remplie.

Cet article couvre la différence entre === et == pour tester l'égalité, les opérateurs de comparaison et logiques pour construire des conditions, et les 6 valeurs falsy (des valeurs qui se comportent comme faux à l'intérieur d'une condition) que JavaScript considère comme fausses.

Vérifier l'égalité — la différence entre === et ==

Imagine que tu compares une valeur saisie dans un champ avec une valeur déjà stockée par le système. Les deux ont beau ressembler à un 0, celle du champ de saisie est la chaîne "0", tandis que celle qui est stockée est le nombre 0.

Pour décider si on traite ces deux valeurs comme « égales », JavaScript propose deux opérateurs.

=== ne renvoie true que si le type et la valeur correspondent tous les deux. Si les types diffèrent, c'est false immédiatement.

L'autre, ==, commence par convertir un opérande pour aligner les deux types quand ils diffèrent, puis compare les valeurs. La comparaison de "0" et de 0 donne false avec ===, mais true avec ==. Du côté de l'inégalité, il existe aussi deux opérateurs : !== et !=.

La conversion dont on parle ici, c'est le fait de lire le caractère "0" comme le nombre 0. Le problème, c'est que == effectue cette conversion en douce, avant de comparer.

Comme il compare les résultats convertis, le test ne correspond pas toujours à ce que tu as réellement écrit. Des valeurs qui n'ont rien à voir, comme la chaîne vide "" et 0, peuvent finir par donner true.

Le sens de la conversion est fixé à l'avance pour chaque combinaison de types, mais plutôt que de retenir cette règle, il est plus simple de suivre les résultats en utilisant === et en empêchant toute conversion. Dans le code que tu écris aujourd'hui, utilise === et !==, et aligne toi-même les types avant de comparer. Le sens dans lequel s'opère la conversion, et la façon d'aligner les types toi-même, sont traités dans le prochain article, consacré à la conversion de type.

const typedQuantity = "3";   // quantité saisie dans un champ (chaîne)
const savedQuantity = 3;     // quantité stockée (nombre)

console.log(typedQuantity === savedQuantity);  // false  types différents
console.log(typedQuantity == savedQuantity);   // true   aligne les types, puis compare

// Entre valeurs de même type, === se comporte sans surprise
console.log(savedQuantity === 3);   // true
console.log(savedQuantity !== 3);   // false  la négation de ===

console.log("" == 0);         // true   une chaîne vide se convertit aussi en 0
console.log("100" === 100);   // false  === ne convertit jamais

Compare une quantité en stock saisie dans un champ avec la quantité que le système a en mémoire. La chaîne typedStock et le nombre storedStock sont déjà déclarés.

① Affiche le résultat de la comparaison des deux avec ==.

② Affiche le résultat de la comparaison des deux mêmes valeurs avec ===.

③ Vérifie et affiche si ces deux valeurs sont différentes, en tenant compte du type.

(Si tout s'exécute correctement, une explication apparaîtra.)

Construire des conditions — opérateurs de comparaison et logiques

Dans la vraie vie, un test ne se limite pas à « ces valeurs sont-elles égales ». Tu auras besoin de conditions comme « le total atteint-il 5000 ou plus » ou « connecté et, en plus, administrateur ».

Les opérateurs de comparaison (des symboles qui examinent la relation entre deux valeurs — le === vu plus haut dans cet article en fait partie) comparent les grandeurs, et les opérateurs logiques (des symboles qui combinent des booléens) relient plusieurs conditions.

Il y a 4 opérateurs de comparaison — > < >= <= — et leur résultat est toujours true ou false.

Il y a 3 opérateurs logiques. && n'est vrai que si les deux opérandes sont vrais, || est vrai dès que l'un des deux l'est, et ! inverse true et false.

La condition que tu construis est passée à une instruction if (une structure qui n'exécute le bloc qui suit que si la condition entre parenthèses est vraie). Ce qui doit s'exécuter quand la condition est fausse va dans le bloc placé après else.

Ici, on s'en sert seulement pour vérifier le résultat d'une condition : l'empilement de else if et le branchement avec switch sont traités dans l'article sur les conditions, dans la catégorie syntaxe.

const cartTotal = 4800;    // total du panier
const hasCoupon = true;    // possède un coupon
const isMember = false;    // est membre

console.log(cartTotal >= 5000);   // false  n'atteint pas 5000
console.log(cartTotal < 5000);    // true

console.log(hasCoupon && isMember);   // false  n'est pas membre
console.log(hasCoupon || isMember);   // true   possède tout de même un coupon
console.log(!isMember);               // true   inverse false

if (cartTotal >= 5000) {
  console.log("Livraison gratuite");   // ne s'exécute que si la condition est vraie
} else {
  console.log(`Encore ${5000 - cartTotal} € pour la livraison gratuite`);   // sinon, c'est cette branche
}

Change le menu affiché à l'écran selon la combinaison du statut de connexion et de l'indicateur administrateur. isLoggedIn (connecté ou non) et isAdmin (administrateur ou non) sont déjà déclarés.

① Affiche le résultat du test « connecté et administrateur ».

② Affiche le résultat du test « connecté, mais pas administrateur ».

③ Affiche « Mon compte » uniquement si la condition de ② est vraie.

Truthy et falsy — ce que if traite comme faux

Les parenthèses d'un if peuvent contenir d'autres valeurs que true / false. Dans ce cas, JavaScript relit la valeur qu'on lui donne comme l'une ou l'autre.

Une valeur relue comme fausse s'appelle falsy ; tout le reste est truthy (une valeur qui se comporte comme vraie à l'intérieur d'une condition). Tu ne rencontreras que 6 valeurs falsy dans une condition : une fois ces 6 valeurs connues, tu peux considérer tout le reste comme truthy.

Ces 6 valeurs sont false, le nombre 0, la chaîne vide "", null (une valeur posée volontairement pour signifier l'absence de valeur), undefined (une valeur qui indique qu'aucune valeur n'a encore été affectée), et NaN. Le choix entre null et undefined est repris dans un article ultérieur.

En pratique, tu rencontreras surtout 0 et "" : ce sont donc les deux à connaître en premier. NaN fait exception, puisqu'il renvoie false même comparé à lui-même avec === ; on le détecte donc avec une écriture dédiée.

Les pièges sont le nombre 0 et la chaîne vide.

Quand un nombre d'avis vaut 0, ou qu'un champ de recherche est resté vide (""), passer cette valeur directement à if fait échouer la condition. Tu voulais tester « la valeur est-elle renseignée », mais tu testes en réalité « la valeur est-elle différente de 0 et non vide ».

const reviewCount = 0;    // nombre d'avis
const searchWord = "";    // texte tapé dans le champ de recherche

if (reviewCount) {
  console.log("A des avis");
}
if (searchWord) {
  console.log("A un terme de recherche");
}
// 0 et une chaîne vide sont tous les deux falsy, donc aucun des deux ci-dessus ne s'exécute

if (reviewCount === 0) {
  console.log("Pas encore d'avis");   // celui-ci s'exécute
}

Écris la comparaison quand 0 est une valeur qui compte

Pour les valeurs où 0 a lui-même un sens — une quantité en stock, un nombre d'articles, un montant — écrire if (stock) saute le bloc précisément quand la valeur vaut 0. Écrire dans la condition ce que tu veux réellement vérifier, comme stock > 0 ou stock === 0, rend aussi ton intention claire pour celui qui te relit.

Écris le code qui affiche des quantités en stock. mugStock, en rupture, et bottleStock, qui a du stock, sont déjà déclarés.

① En utilisant mugStock directement comme condition, écris le code qui afficherait une ligne contenant la quantité en stock, du type « Mug : reste 5 ». Cette étape sert à voir ce qui se passe : le résultat correct est que cette ligne ne s'affiche PAS.

② Utilise bottleStock comme condition de la même façon, et affiche la quantité en stock dans le même format.

③ Selon que mugStock est supérieur à 0 ou non, affiche « Mug : reste X » s'il y a du stock, et « Mug : rupture de stock » sinon.

L'évaluation en court-circuit — préparer une valeur par défaut avec ||

Même un utilisateur qui s'est inscrit sans saisir de nom d'affichage doit voir quelque chose à l'écran. Ce genre de logique « prendre une valeur par défaut quand il n'y a pas de valeur » s'écrit en une ligne avec ||.

Cela fonctionne parce que && et || ne fabriquent pas un booléen : ils renvoient tel quel l'un des deux opérandes. Quand tu combines des valeurs true et false avec eux, le résultat reste true ou false : rien ne contredit donc ce que tu as vu jusqu'ici.

|| renvoie la valeur de gauche telle quelle si elle est truthy, et n'évalue même pas l'opérande de droite. Il ne renvoie la valeur de droite que si la gauche est falsy.

&& fonctionne à l'inverse : si la gauche est falsy, il renvoie cette valeur de gauche sans évaluer la droite. Ce fonctionnement « ne pas regarder la droite tant qu'on n'en a pas besoin » s'appelle l'évaluation en court-circuit (le fait de ne pas évaluer l'opérande de droite quand la gauche suffit à déterminer le résultat).

const nickname = "";   // laissé vide

// || ne renvoie l'opérande de droite que si la gauche est falsy
console.log(nickname || "Invité");    // Invité
console.log("Bob" || "Invité");        // Bob  la droite n'est pas évaluée

// && renvoie la valeur de gauche si elle est falsy, sans évaluer la droite
console.log(0 && "en stock");   // 0
console.log(5 && "en stock");   // en stock

|| ne suffit pas quand tu veux conserver 0 ou la chaîne vide

|| remplace toute valeur falsy par la valeur par défaut : les valeurs falsy qui ont un sens disparaissent donc elles aussi — un solde de points à 0, ou un "0" saisi. Pour n'appliquer la valeur par défaut que si la valeur est null ou undefined, utilise plutôt l'opérateur dédié ??, traité à l'article 9.

Applique des valeurs par défaut à un nom d'affichage et à un solde de points. guestName (laissé vide), memberName (déjà rempli) et memberPoint (un solde de points) sont déjà déclarés.

① Affiche un nom d'affichage qui vaut « Invité » quand guestName est vide.

② Applique la même écriture à memberName et affiche le résultat.

③ Applique la même écriture à memberPoint, avec 100 comme valeur par défaut, et affiche le résultat.