JavaScript permet de comparer des valeurs de différentes façons. Afin d'illustrer les types de comparaisons possibles, prenons pour acquis que les deux variables suivantes existes dans le contexte de tous les exemples de cette page.

let game = "GTA";
let nbr = 6;

Égalité ==

L'opérateur == en JavaScript permet de déterminer si le deux valeurs sont identiques.

Par exemple:

game == "GTA" // true
nbr == 6 // true

game == "COD" // false
nbr == 5 // false

Égalité faible

Cependant la comparaison avec == est considérée comme étant faible, puisqu'elle ne tient pas compte du type de la valeur. Ce qui peut parfois donner lieu à d'étranges situations.

Par exemple:

nbr == "5" // true

Même si la valeur de la variable nbr vaut le nombre 5 et qu'elle est comparée à la chaine de caractères "5" la comparaison retournera quand même true, puisque JavaScript convertira "5" en nombre.

0 == false // true
1 == true // true

Les chiffres 0 et 1 sont équivalents aux booléens false et true, car il s'agit de leur valeur respective lorsque ces nombres sont convertis en booléens.

null == undefined // true

null est équivalent à undefined 🤷‍♂️

Différence !=

L'opérateur != en JavaScript permet de déterminer si le deux valeurs sont différentes.

Par exemple:

game != "GTA" // false
nbr != 6 // false

game != "COD" // true
nbr != 5 // true

Différence faible

Tout comme l'opérateur ==, l'opérateur != fait des comparaisons faibles où il tente de convertir les types des valeurs en premier lieu.

Par exemple:

nbr != "5" // false

Même si la valeur de la variable nbr vaut le nombre 5 et qu'elle est comparée à la chaine de caractères "5" pour valider si ces valeurs sont différentes, la comparaison retournera false, puisque JavaScript convertira "5" en nombre et donc considèrera que 5 n'est pas différent de 5.

Égalité stricte ===

L'opérateur === permet lui aussi de vérifier si deux valeurs sont identiques. Cependant, contrairement au double égal, le triple égal valide aussi le type de la valeur.

Par exemple:

nbr === "5" // false

Même si la valeur de la variable nbr vaut le nombre 5 et qu'elle est comparée à la chaine de caractères "5" la comparaison retournera quand même true, puisque JavaScript convertira "5" en nombre.

0 === false // false
1 === true // false

Les chiffres 0 et 1 sont équivalents aux booléens false et true.

null === undefined // false
👌

La validation du type de valeur évite plusieurs mauvaises surprises. Pour cette raison, la majorité des développeurs utilisent toujours le triple égal === plutôt que le double égal ==.

Différence stricte !==

L'opérateur !== permet lui aussi de vérifier si deux valeurs sont différentes. Cependant, contrairement a !=, le !== valide aussi le type de la valeur.

Par exemple:

nbr !== "5" // true

Si la valeur de la variable nbr vaut le nombre 5 et qu'elle est comparée à la chaine de caractères "5", la comparaison retournera true, puisqu'à la base un nombre est un type différent qu'une chaine de caractères, peu importe son contenu.

Plus petit ou grand que

Les opérateurs < et > permettent de comparer si une valeur est plus petite ou plus grande qu'une autre. Ils retournent un booléen (true/false) indiquant le statut de la comparaison.

Par exemple:

nbr < 10 // true
nbr < 1 // false
nbr < 5 // false

nbr > 1 // true
nbr > 10 //false
nbr > 5 // false

Plus petit ou grand que inclusif

Les opérateurs <= et >= permettent de comparer si une valeur est plus petite ou plus grande qu'une autre ou encore égale à cette dite valeur. Ils retournent un booléen (true/false) indiquant le statut de la comparaison.

Par exemple:

nbr <= 10 // true
nbr <= 1 // false
nbr <= 5 // true 👈

nbr >= 1 // true
nbr >= 10 //false
nbr >= 5 // true 👈

Et logique &&

Parfois deux comparaisons doivent être remplies pour déclencher une action. Pour ce faire, il est possible d'utiliser l'opérateur && qui retourne true uniquement lorsque les deux conditions retournent true.

Par exemple:

game === "COD" && nbr === 1 // false
game === "GTA" && nbr === 1 // false
game === "GTA" && nbr === 6 // true

Ou logique ||

À l'opposé de &&, l'opérateur || déclenche une action dès que l'une ou l'autre des conditions est remplie. Pour ce faire, il est possible d'utiliser l'opérateur || qui retourne true dès que l'une des deux conditions retourne true.

Par exemple:

game === "COD" || nbr === 1 // false
game === "GTA" || nbr === 1 // true
game === "GTA" || nbr === 6 // true