Deux façons de demander « est-ce que c'est égal ? »
En JavaScript, il existe deux opérateurs d'égalité : === (strict) et == (faible). Visuellement, ils se ressemblent comme deux gouttes d'eau. Mais leur comportement, lui, n'a rien à voir.
=== vérifie si les deux opérandes sont du même type et ont la même valeur. ==, lui, convertit d'abord les opérandes vers un type commun avant de comparer. Cette conversion — la coercition de type — c'est justement ce qui vaut à l'égalité en JavaScript sa mauvaise réputation.
En résumé : utilise === par défaut. Mais la version longue mérite d'être lue au moins une fois, histoire de savoir à quoi tu renonces.
Égalité stricte : ce que tu veux vraiment
=== renvoie true uniquement quand les deux côtés correspondent en type et en valeur. Pas de coercition, pas de mauvaises surprises :
Si les types ne correspondent pas, la réponse est immédiatement false. Sinon, JavaScript compare les valeurs. Pour les primitives, c'est une comparaison par valeur ; pour les objets, c'est une comparaison par référence (on y revient tout de suite).
!== est l'opérateur d'inégalité stricte et suit les mêmes règles, à l'envers.
Égalité faible : la coercition déguisée
L'opérateur == accepte que les deux côtés soient de types différents. Avant de comparer, il se lance dans une petite chorégraphie de coercition pour tenter de les aligner :
Les règles exactes figurent dans la spec, et elles ne sont pas franchement horribles, mais les retenir en plein debug, c'est une autre histoire. Le fait que "0" == false renvoie true piège encore les développeurs chevronnés. Pareil pour [] == false (qui vaut true aussi, parce que le tableau est converti en "", lui-même converti en 0).
C'est pour ça que la plupart des guides de style — ainsi que la règle eqeqeq d'ESLint — recommandent d'utiliser === par défaut. Tu perds un caractère à taper, mais tu gagnes des règles que tu peux réellement mémoriser.
Le seul usage vraiment utile de ==
Il existe un seul idiome avec l'égalité faible qui mérite d'être connu : x == null renvoie true si x vaut soit null, soit undefined, et false dans tous les autres cas.
L'équivalent strict, c'est x === null || x === undefined : ça marche, mais c'est plus bruyant à lire. Beaucoup de bases de code tolèrent le == null comme seule exception bénie à la règle. Choisis ta convention et tiens-t'y.
Comparer deux objets en JavaScript : comparaison par référence
Pour les objets, tableaux et fonctions, === comme == posent exactement la même question : « les deux côtés pointent-ils vers le même objet en mémoire ? ». Et surtout pas : « ont-ils le même contenu ? ».
Deux littéraux d'objet avec un contenu identique restent deux objets distincts. Tout le monde se fait avoir par ça au moins une fois.
Pour comparer les valeurs, il faut écrire son propre helper, passer par une bibliothèque (lodash.isequal), ou sérialiser avec JSON.stringify si on a affaire à des objets simples :
JSON.stringify ne fonctionne que pour des données simples : il ignore les fonctions, undefined, les symboles, et ne garantit pas l'ordre des clés de manière identique d'un moteur à l'autre pour toutes les structures. C'est un dépannage rapide, pas une solution générale.
NaN n'est égal à rien, pas même à lui-même
NaN (« not a number ») est la valeur que JavaScript renvoie quand une opération numérique n'a pas de résultat sensé — 0/0, Number("abc"), Math.sqrt(-1). Les deux opérateurs d'égalité renvoient false dès que l'un des côtés vaut NaN, y compris lorsque les deux côtés sont NaN :
Pour détecter NaN, utilisez Number.isNaN(value). Évitez l'ancien isNaN global : il commence par convertir son argument, du coup isNaN("hello") renvoie true, ce qui n'est quasiment jamais ce qu'on veut.
Object.is : presque ===, avec deux corrections
Object.is(a, b) se comporte comme ===, sauf dans deux cas particuliers :
La plupart du temps, === fait très bien le job. Tu sortiras Object.is uniquement quand tu as vraiment besoin de considérer NaN comme égal à lui-même, ou de distinguer +0 de -0 — deux cas rares, mais qui comptent parfois dans du code numérique ou dans les entrailles d'un framework (React utilise Object.is pour comparer les états).
Les opérateurs d'inégalité suivent la même logique
!== est strict, != est souple, et le même conseil tient la route :
Par défaut, utilisez !==. Si votre style autorise == null, vous pouvez tout à fait utiliser son pendant != null pour tester « ni null ni undefined ».
La checklist pour comparer deux valeurs
Avant de comparer deux valeurs, passez en revue ces questions :
- Des primitives, du même type ? Utilisez
===. - Tester null ou undefined ?
x == nullest très bien si votre guide de style l'accepte ; sinon, écrivezx === null || x === undefined. - Tester
NaN?Number.isNaN(x). - Comparer des objets par identité (même référence) ?
===fait exactement ce qu'il faut. - Comparer des objets par leur contenu ? Écrivez une fonction utilitaire, utilisez une librairie ou passez par une sérialisation. Les opérateurs natifs ne vous seront d'aucune aide.
Tenez-vous-en à ===, considérez == comme un outil spécifique réservé au cas == null, et vous éviterez la plupart des pièges d'égalité qui remplissent les FAQ JavaScript.
La suite : les opérateurs
L'égalité n'est qu'une petite partie des opérateurs JavaScript. Le prochain chapitre couvre le reste : arithmétiques, logiques, d'affectation, ainsi que les versions raccourcies sur lesquelles on s'appuie au quotidien.
Questions fréquentes
Quelle est la différence entre == et === en JavaScript ?
=== est l'égalité stricte : elle renvoie true uniquement si les deux opérandes sont du même type et ont la même valeur. == est l'égalité souple : elle convertit les opérandes dans un même type avant de comparer. Résultat : 1 === '1' vaut false, alors que 1 == '1' vaut true parce que == convertit d'abord la chaîne en nombre.
Faut-il toujours utiliser === en JavaScript ?
Par défaut, oui. === est prévisible et ses règles tiennent facilement en tête. La seule exception courante, c'est x == null, qui attrape d'un coup null et undefined. La plupart des linters (la règle eqeqeq d'ESLint) imposent === tout en autorisant ce pattern précis en option.
Pourquoi NaN === NaN renvoie false ?
La norme IEEE 754 prévoit que NaN n'est égal à rien, pas même à lui-même. Du coup, tout opérateur d'égalité renvoie false dès qu'un NaN est dans l'équation. Pour tester si une valeur est NaN, utilisez Number.isNaN(x), ou bien Object.is(NaN, NaN) qui, lui, renvoie true.
Comment comparer deux objets en JavaScript ?
== comme === comparent les objets par référence, pas par contenu. {a: 1} === {a: 1} vaut false parce qu'il s'agit de deux objets distincts. Pour comparer par valeur, il faut écrire sa propre fonction, passer par une librairie comme isEqual de Lodash, ou sérialiser avec JSON.stringify pour les objets simples.
