Opérateurs de comparaison

== vs === : la différence cruciale

C'est une des questions les plus posées en entretien technique. La différence est simple mais fondamentale.

== (égalité faible)

L'opérateur == compare les valeurs avec coercion de type. JavaScript va essayer de convertir les types pour pouvoir comparer.

"5" == 5      // true (la string "5" est convertie en nombre)
0 == false    // true (false est converti en 0)
null == undefined // true (cas spécial)
"" == 0       // true (string vide convertie en 0)

=== (égalité stricte)

L'opérateur === compare les valeurs ET les types. Pas de conversion, pas de surprise.

"5" === 5     // false (string vs number)
0 === false   // false (number vs boolean)
null === undefined // false (null vs undefined)
"" === 0      // false (string vs number)

Tableau récapitulatif

La règle d'or

Utilise toujours === sauf si tu as une raison spécifique d'utiliser ==.

Avec ===, tu évites les bugs liés à la coercion de type. Le code est plus prévisible et plus facile à débugger.

// Mauvaise pratique
if (value == null) { ... }

// Bonne pratique
if (value === null || value === undefined) { ... }

// Ou encore mieux avec nullish
if (value == null) { ... } // seul cas où == est acceptable

Truthy et Falsy

En JavaScript, toutes les valeurs ont une "vérité" implicite quand elles sont évaluées dans un contexte booléen (comme un if).

Valeurs Falsy (évaluées à false)

Il n'y en a que 6 à retenir :

false      // le booléen false
0          // le nombre zéro
""         // string vide
null       // absence de valeur
undefined  // variable non définie
NaN        // Not a Number

Valeurs Truthy (évaluées à true)

Tout le reste est truthy, y compris des choses surprenantes :

true       // évidemment
42         // tout nombre non-zéro
"hello"    // toute string non-vide
[]         // tableau vide (piège classique !)
{}         // objet vide
"0"        // string "0" (c'est une string non-vide)
"false"    // string "false" (c'est une string non-vide)

Exemples pratiques

// Vérifier si un tableau a des éléments
if (array.length) {
  // length > 0 est truthy
}

// Vérifier si une string n'est pas vide
if (username) {
  // string non-vide est truthy
}

// Attention aux pièges
if ([]) {
  console.log("Ceci s'affiche !") // [] est truthy
}

if ([].length) {
  console.log("Ceci ne s'affiche pas") // 0 est falsy
}

Les opérateurs !== et !=

Même logique que pour l'égalité :

// != avec coercion
"5" != 5    // false (après coercion, ils sont égaux)

// !== sans coercion (strict)
"5" !== 5   // true (types différents)

Utilise toujours !== pour les mêmes raisons que ===.

Quiz rapide

Que retournent ces expressions ?

[] == false     // ?
[] === false    // ?
"" == false     // ?
"" === false    // ?
null == false   // ?

<details> <summary>Réponses</summary>

[] == false     // true ([] converti en "", puis en 0, false converti en 0)
[] === false    // false (types différents)
"" == false     // true ("" converti en 0, false converti en 0)
"" === false    // false (types différents)
null == false   // false (null n'est == qu'à undefined)

</details>

En résumé

1. === et !== : toujours les utiliser par défaut
2. == et != : seulement si tu sais exactement ce que tu fais
3. Falsy : false, 0, "", null, undefined, NaN
4. Truthy : tout le reste (attention à [] et {})