Opérateurs de comparaison JavaScript

Les opérateurs de comparaison en JavaScript sont essentiels pour prendre des décisions dans votre code en comparant des valeurs. Ce guide propose une exploration approfondie des opérateurs de comparaison JavaScript, enrichie d'exemples pratiques, d'explications claires et d'un focus particulier sur certains comportements inhabituels pouvant survenir lors de la comparaison de certains types de données.

Cette page couvre les opérateurs relationnels (<, >, <=, >=), la différence entre l'égalité lâche (==) et l'égalité stricte (===), la façon dont la coercition de type modifie le résultat, ainsi que les cas limites liés à null, undefined, NaN et Object.is. Pour la liste complète des opérateurs JavaScript, consultez Opérateurs JavaScript ; pour combiner des comparaisons, voir Opérateurs logiques.

Introduction aux opérateurs de comparaison

Les opérateurs de comparaison comparent deux valeurs et retournent une valeur Boolean (true ou false) selon que la comparaison est vraie ou non. Il existe plusieurs opérateurs de comparaison essentiels en JavaScript :

• == (Égalité lâche)
• === (Égalité stricte)
• != (Inégalité lâche)
• !== (Inégalité stricte)
• > (Supérieur à)
• < (Inférieur à)
• >= (Supérieur ou égal à)
• <= (Inférieur ou égal à)

Chaque opérateur a un rôle spécifique, et comprendre les différences entre eux est crucial pour une programmation précise.

Comparaison lâche vs. stricte

La décision la plus importante lors de la comparaison de valeurs est de permettre ou non à JavaScript de convertir les types à votre place. L'égalité lâche (==) contraint les opérandes vers un type commun avant la comparaison ; l'égalité stricte (===) ne le fait pas.

Égalité lâche (==)

Explication : Ici, 1 et "1" semblent différents (l'un est un nombre et l'autre une string), mais == convertit les deux vers le même type avant de les comparer. C'est pourquoi ils sont considérés comme égaux. Consultez la conversion de type pour les règles exactes.

Égalité stricte (===)

Explication : Cette fois, 1 et "1" ne sont pas considérés comme égaux car === vérifie si la valeur et le type sont exactement identiques. Or, ils ne sont pas du même type.

Opérateurs d'inégalité

Inégalité lâche (!=)

Explication : 1 et "2" sont différents. != convertit également les types pour la comparaison, mais comme les valeurs diffèrent après la conversion, il retourne true.

Inégalité stricte (!==)

Explication : Ici, !== constate que les valeurs sont différentes car il vérifie sans convertir le type. Étant donné que les types (nombre vs. string) sont différents, il retourne true.

Opérateurs relationnels

Explication : Ces exemples illustrent des comparaisons de base :

• x < y est true car 5 est inférieur à 10.
• x > y est false car 5 n'est pas supérieur à 10.
• x <= 5 est true car 5 est égal à 5.
• y >= 11 est false car 10 n'est pas supérieur ou égal à 11.

Remarque sur la comparaison de strings : Lorsque < et > sont utilisés avec des strings, JavaScript les compare de manière lexicographique (par valeur Unicode). Par exemple, 'b' > 'a' est true, mais '10' < '2' est également true car la comparaison se fait caractère par caractère.

Applications pratiques des opérateurs de comparaison

Fonctions de tri

Explication : Ce code trie des nombres par ordre croissant. La fonction sort compare chaque paire de nombres et les arrange du plus petit au plus grand.

Logique conditionnelle

Explication : Ce code vérifie si age est supérieur ou égal à 18. Si c'est le cas, il affiche "You are an adult." Sinon, il affiche "You are not an adult."

Les comportements étranges de JavaScript

JavaScript présente parfois des comportements étranges lors de la comparaison de types de données inhabituels :

Explication :

• [] == 0 : Un array vide est considéré égal à zéro car lorsque l'array est converti en nombre, il devient 0.
• [] == ![] : Cela semble très étrange, mais voici ce qui se passe : ![] convertit l'array en boolean (qui est true car les arrays sont truthy), puis le nie pour obtenir false. Lors de la comparaison de [] avec false, les deux sont convertis en nombres (0 et 0), donc ils sont « égaux ».

Explorons davantage d'exemples de comportements inhabituels de JavaScript dans les comparaisons et autres opérations.

Comparaison d'arrays et d'objects

Les vérifications d'égalité lâche de JavaScript peuvent produire des résultats inattendus lors de la comparaison d'arrays et d'objects, en raison de la façon dont ces structures de données sont converties et comparées.

Explication :

• [] == [] et {} == {} : Même si les deux côtés de la comparaison semblent identiques, ce sont des instances différentes en mémoire. JavaScript vérifie l'égalité des objects et des arrays en fonction de leur adresse mémoire, et non de leur contenu.
• [] == ![] : Ce cas suit les mêmes règles de coercition expliquées dans la section précédente.

Null vs. Undefined

La comparaison entre null et undefined avec l'égalité lâche présente également un comportement inhabituel, bien qu'ils partagent certaines similitudes en JavaScript.

Explication :

• null == undefined : JavaScript traite null et undefined comme étant lâchement égaux, ce qui constitue une exception dans les règles d'égalité lâche.
• null === undefined : Étant donné qu'ils sont de types différents, l'égalité stricte retourne false.
• null == 0, null > 0 et null >= 0 : Dans les comparaisons relationnelles, null est contraint vers 0, donc null >= 0 devient 0 >= 0, ce qui est évalué à true. Cependant, null == 0 et null > 0 restent false car null n'est contraint vers 0 que dans les contextes relationnels, pas dans l'égalité lâche.

Comparaisons boolean et non-boolean

Comparer des boolean à des valeurs non-boolean avec l'égalité lâche peut conduire à des résultats contre-intuitifs en raison de la coercition de type vers des nombres.

Explication :

• true == 1 et false == 0 : En JavaScript, true se convertit en 1 et false en 0, ces comparaisons retournent donc true.
• true == 2 : Étant donné que true se convertit en 1, il n'est pas égal à 2.
• true == "1" et false == "0" : Les strings sont converties en nombres, correspondant aux nombres vers lesquels true et false se convertissent.

Comparaison avec NaN

NaN (« Not a Number ») est la seule valeur en JavaScript qui n'est pas égale à elle-même. Toute comparaison avec NaN, y compris NaN === NaN, retourne false. Utilisez Number.isNaN() (ou Object.is) pour le détecter.

Explication : Comme NaN est inégal à tout (y compris à lui-même), vous ne pouvez pas le détecter avec == ou ===. Number.isNaN() est la vérification fiable.

Utilisation de Object.is pour les comparaisons

Pour ceux qui ont besoin de comparaisons précises, notamment dans les cas limites comme NaN et +0 vs. -0, JavaScript fournit Object.is.

Explication :

• Object.is(NaN, NaN) : Contrairement aux opérateurs d'égalité, Object.is identifie correctement deux valeurs NaN comme identiques.
• Object.is(+0, -0) : Object.is fait la distinction entre zéro positif et zéro négatif, ce que les opérateurs d'égalité ne font pas.
• Object.is(false, false) : Illustre l'égalité exacte sans coercition, retournant true pour des valeurs primitives identiques.

Comprendre ces comportements étranges de JavaScript aide non seulement à éviter les pièges potentiels, mais renforce également la capacité à déboguer efficacement des problèmes complexes.

Ces exemples illustrent pourquoi il est souvent plus sûr d'utiliser les opérateurs de comparaison stricts (=== et !==) qui ne convertissent pas les types automatiquement. Cela permet d'éviter des résultats inattendus dans votre code JavaScript.

Résumé des pièges

Gardez à l'esprit ces résultats surprenants. La plupart disparaissent si vous utilisez === et !== :

Une règle pratique : ==/=== et !=/!== comparent l'(in)égalité, tandis que <, >, <=, >= sont relationnels et contraignent les opérandes vers des nombres (ou comparent les strings de manière lexicographique). Les opérateurs relationnels ont une priorité plus élevée que les opérateurs d'égalité, donc a < b == c est évalué comme (a < b) == c.

Bonnes pratiques

• Privilégiez les opérateurs stricts : Utilisez === et !== pour éviter les erreurs dues à la conversion automatique de types.
• Conditions claires : Rendez vos conditions claires et directes, en particulier lorsqu'elles impliquent des comparaisons.
• Testez les cas limites : Vérifiez toujours les cas limites dans vos comparaisons, surtout lorsque vous traitez des entrées utilisateur ou des types de données variables.

Conclusion

Comprendre les opérateurs de comparaison en JavaScript est crucial pour prendre les bonnes décisions dans vos programmes. En suivant ces recommandations et en comprenant les comportements typiques comme atypiques, vous pouvez écrire du code plus fiable et prévisible. Au fil de votre exploration de JavaScript, utilisez ces opérateurs avec discernement pour gérer efficacement les différents défis de programmation.

Pratique