Comprendre les opérateurs d’égalité stricts et abstraits dans JS

Cet article couvre les similitudes et les différences entre les opérateurs d’égalité abstraite et stricte en JavaScript, et comment les utiliser en fonction du type de comparaison que vous souhaitez effectuer.

Les opérateurs de comparaison abstraite et stricte peuvent être utilisés pour vérifier l’égalité de deux opérandes en JavaScript. Les deux opérateurs vérifieront l’égalité de deux valeurs et renverront la valeur booléenne (vrai ou faux) selon que les valeurs sont égales ou non. Cet article discutera des différences entre les deux opérateurs et comment les utiliser efficacement selon le type de comparaison que vous souhaitez effectuer.

Avant de commencer, examinons les différents types de données de valeur en JavaScript et comment ils peuvent être convertis en valeurs booléennes (vrai ou faux).

Coercition

Le changement de valeurs d’un type à un autre (chaîne en nombre) est appelé coercition ou conversion de type en JavaScript. JavaScript a huit types de données de valeur de base, qui sont identifiés comme primitifs ou non primitifs.

Types primitifs

• Indéfini
• Nul
• booléen
• Chaîne de caractères
• Symbole
• Numéro
• BigInt

Types non primitifs

Vous pouvez être précis quant à votre intention de convertir une valeur d’un type à un autre (coercition explicite) en utilisant des fonctions intégrées telles que Number(), Boolean()etc., ou vous pouvez autoriser JavaScript à gérer la conversion pour vous (coercition implicite).

Dans cet esprit, la spécification JavaScript définit une liste de valeurs qui, lorsqu’elles sont contraintes en booléen, renverront false, et elles incluent les éléments suivants :

Undefined
null
false
NaN
0, -0, +0
"", " "
0n

Les valeurs répertoriées ci-dessus sont appelées valeurs fausses car elles sont évaluées comme fausses lorsqu’elles sont rencontrées dans des contextes booléens.

Prenons un exemple.

let foo = ""
if (!foo) {

  console.log("Hello, I am a falsy value")
}

Nous utilisons une instruction conditionnelle (le if clause) pour évaluer la véracité de la valeur attribuée à la foo variable. Ce qui se passe, c’est que JavaScript contraint implicitement la valeur attribuée à foo à un booléen, et voyant que la chaîne vide "" est sur la liste des valeurs fausses, il est évalué à faux.

Les éléments suivants seront enregistrés dans la console :

"Hello, I am a falsy value"

Si nous modifions la valeur attribuée au foo variable à l’une des valeurs répertoriées sur la liste fausse, elles seront toutes contraintes à la valeur booléenne false.

Les valeurs qui ne figurent pas sur la liste des valeurs fausses sont appelées valeurs véridiques. Contrairement aux valeurs fausses, les valeurs véridiques seront évaluées comme true lorsqu’il est rencontré dans des contextes booléens. Considérant que la liste des valeurs fausses est très courte, voici quelques exemples de valeurs véridiques.

{}
[]
true
10
"Hello"

La comparaison de valeurs en JavaScript avec l’un des opérateurs d’égalité se traduit généralement par une valeur booléenne indiquant le résultat de la comparaison. Elle renvoie true si les deux valeurs sont égales et false si elles ne sont pas égales. Bien que les opérateurs strict et lâche soient tous deux utilisés en JavaScript pour la comparaison d’égalité, la façon dont ils effectuent une vérification d’égalité est assez différente. Voyons les similitudes et les différences entre eux.

Opérateur d’égalité stricte

L’opérateur d’égalité stricte ===, également appelé triple égal, compare à la fois la valeur et le type de ses opérandes. C’est un opérateur binaire, et il utilise l’algorithme défini dans la spécification JavaScript pour le IsStrictlyEqual opération abstraite pour comparer des valeurs afin de vérifier si elles sont égales.

Il détermine d’abord si oui ou non les valeurs sont du même type ; s’ils ne le sont pas, il renvoie false. Si les deux valeurs sont du même type, il vérifie si les valeurs sont identiques ; il renvoie false si les valeurs ne correspondent pas, sauf dans quelques cas, que nous aborderons plus loin.

Regardons quelques exemples.

1 === 1 


"2" === 2 

Dans ce premier exemple ci-dessus, nous comparons les nombres 1 et 1. True est renvoyé car ils ont le même type de valeur (les deux nombres) et des valeurs égales. Dans le deuxième exemple, nous comparons un littéral de chaîne numérique à un nombre. Bien qu’ils aient la même valeur (le chiffre 2), false est renvoyé car ils sont de types différents.

L’opérateur d’égalité stricte vérifie si les deux opérandes sont du même type, puis il continue à comparer leurs valeurs, mais il n’effectue pas de conversion de type. S’ils ne sont pas du même type, peu importe leurs valeurs. Il renvoie immédiatement false et les valeurs sont considérées comme inégales. Ainsi, l’opérateur d’égalité stricte ne renvoie vrai que si les deux opérandes sont égaux et du même type.

Prenons d’autres exemples

let a ="Ife" + "oma"
let b = "Ifeoma"

a === b 
"Ify" === "ify" 

L’opérateur d’égalité stricte considère les chaînes en JavaScript comme « égales » lorsque les caractères de la chaîne sont identiques et de même longueur. Dans le premier exemple ci-dessus, nous comparons deux valeurs de chaîne avec le même nombre de caractères et la même longueur. Dans le deuxième exemple, nous effectuons une comparaison insensible à la casse. La première chaîne Ify est en majuscule, et la deuxième chaîne ify n’est pas, donc nous obtenons faux.

Selon Spécification de JavaScript:

4. Si Type(x) est String, alors :
   un. Si x et y sont exactement la même séquence d’unités de code (même longueur et mêmes unités de code aux indices correspondants), retourne vrai; sinon, retournez faux.

L’algorithme utilisé par l’opérateur d’égalité stricte traite quelques cas différemment.

NaN === NaN 

-0 === +0 
0 === -0 
"-0" === "+0" 

Comme on le voit dans l’exemple ci-dessus, NaN n’est pas égal à lui-même ou à toute autre valeur en JavaScript. Donc si les deux valeurs sont NaNça revient false. Les zéros et les zéros signés sont considérés comme égaux même s’ils ne sont pas de la même valeur. L’opérateur d’égalité stricte ne considère les zéros signés égaux que s’ils sont tous les deux des nombres.

Si vous avez besoin de différencier les zéros signés, vous pouvez utiliser Object.is().

Pour déterminer si une valeur est NaN, utilisez Number.isNaN().

Opérateur d’égalité abstraite

L’opérateur d’égalité abstrait == est également connu sous le nom de double égal ou d’opérateur d’égalité lâche. L’utilisation de cet opérateur de comparaison permet à JavaScript d’effectuer une coercition de type lorsque les types sont différents. Lors de la comparaison de deux valeurs avec cet opérateur, si les deux opérandes ne sont pas du même type, JavaScript tente de résoudre les types de données en les convertissant implicitement dans le même type avant de les comparer. L’opérateur d’égalité abstraite utilise l’algorithme défini dans la spécification JavaScript pour le IsLooselyEqual opération abstraite pour comparer des valeurs.

Selon l’algorithme défini pour le IsLooselyEqual opération abstraite, la première chose qui se produit lorsque vous utilisez l’opérateur d’égalité abstrait pour la comparaison est qu’il vérifie si les deux valeurs sont du même type. S’ils sont du même type, il effectue la comparaison d’égalité stricte.

En dessous de IsLooselyEqual:

1. Si Type(x) est identique à Type(y), alors :
   un. Revenir Est strictement égal(x, y).

Jetons un coup d’œil à quelques exemples.

let a ="Ife" + "oma"
let b = "Ifeoma"

a == b 
15 == 15 

Comme on le voit dans les exemples ci-dessus, les deux opérandes sont du même type et ont la même valeur, donc true est renvoyé. Cependant, lorsque les types correspondent, mais que les valeurs ne sont pas les mêmes, false est retourné. On peut donc dire que si les deux valeurs sont du même type, l’opérateur d’égalité abstraite et l’opérateur d’égalité stricte font la même chose. Il ne fait aucune coercition lorsque les types correspondent, et il renvoie simplement false si les valeurs ne sont pas les mêmes.

Prenons quelques exemples pour voir ce que fait l’opérateur d’égalité abstraite lorsqu’il rencontre des valeurs dont les types ne correspondent pas.

let a
let b = null
let c = undefined

a == b 
b == c 
a == c 
a === b 
null == 0 
undefined == 0 


12 == "12" 
12 == "13" 
12 == "twelve" 

Comme nous pouvons le voir sur l’exemple ci-dessus, null et undefined par rapport à l’opérateur d’égalité abstraite sont coercitivement égaux les uns aux autres et à aucune autre valeur dans le langage.

Selon l’algorithme défini pour le IsLooselyEqual opération abstraite, si une valeur de type string est comparée à une valeur de type numberla ToNumber opération abstraite est appelée sur le string valeur pour le convertir en un number avant d’effectuer la comparaison.

Dans l’exemple ci-dessus, où nous comparons le nombre 12 à la chaîne « 12 », JavaScript effectue ce qui suit :

12 == "12"
12 == ToNumber("12") 
12 == 12
12 === 12 

Après avoir converti la chaîne en nombre, les deux opérandes sont maintenant du même type. Puisqu’ils sont du même type, JavaScript effectue la comparaison d’égalité stricte, et true est renvoyé car leur valeur est également la même.

N’oubliez pas que la spécification JavaScript indique qu’elle effectue la comparaison d’égalité stricte lors de la comparaison avec l’opérateur d’égalité abstraite et que les types correspondent. De plus, une fois que l’opérateur d’égalité abstraite a effectué la coercition de type et que les types correspondent, il effectue une comparaison d’égalité stricte sur les deux valeurs. Si les valeurs sont les mêmes, true est retourné ; Par ailleurs, false est retourné.

En JavaScript, les valeurs booléennes true et false sont à peu près égaux à des nombres 1 et 0 par rapport à l’opérateur d’égalité abstraite.

Selon l’algorithme de la IsLooselyEqual opération abstraite:

5. Si Type(x) est Number et Type(y) est String, retourne Est plus ou moins égal(X, ! ÀNuméro(y)).
6. Si Type(x) est String et Type(y) est Number, retourne Est plus ou moins égal(! ÀNuméro(x), y).

Prenons quelques exemples pour voir comment les booléens se comportent par rapport à l’opérateur d’égalité abstrait.

true == 1 
ToNumber(true) == 1
1 == 1
1 === 1 

0 == false 
ToNumber(false) == 0
0 == 0
0 === 0 

L’exemple ci-dessus montre que le ToNumber() L’opération abstraite est appelée pour contraindre les valeurs booléennes à des nombres avant de les comparer. Étant donné que les types sont maintenant égaux après la coercition, il effectue la comparaison d’égalité stricte.

Comparaison d’objets avec des opérateurs d’égalité abstraits et stricts

Lors de la comparaison de deux objets du même type avec l’opérateur d’égalité abstraite ou stricte, ils sont égaux si les deux opérandes référencent le même objet.

Prenons quelques exemples :

let a = ["Hello", "world"]
let b = a
let c = ["Hello", "world"]

let d = { a: 1, b: 2 }
let e = d
let f = { a: 1, b: 2 }

a == b 
a === b 
a == c 
b == c 

d == e 
d === e 
d == f 
e == f 

Comme on le voit dans l’exemple ci-dessus, les variables a et b les deux pointent vers le même objet tableau, donc lorsque nous les avons comparés avec l’opérateur d’égalité abstraite ou stricte, true a été renvoyé. Les variables a et c sont du même type et ont même la même valeur, mais false a été renvoyé car ils pointent vers deux objets en mémoire.

Les variables d et e pointe également vers le même objet, donc true est retourné lors de la comparaison. Lors de la comparaison d’objets, les types des deux opérandes doivent correspondre et ils doivent référencer le même objet pour être considérés comme égaux.

D’autre part, lorsque vous comparez une valeur primitive à un objet à l’aide de l’opérateur d’égalité abstraite, l’objet est d’abord converti en son équivalent primitif avant que la comparaison ne soit effectuée.

L’algorithme de la IsLooselyEqual opération abstraite indique que :

11. Si Type(x) est soit String, Number, BigInt ou Symbol et Type(y) est Object, retourne Est plus ou moins égal(X, ? VersPrimitive(y)).

var a = new String("Hello")
var b = "Hello"

a == b 
a === b 

Dans l’exemple ci-dessus, nous avons créé un objet chaîne en appelant le constructeur de chaîne avec le nouveau mot-clé et en l’affectant à la variable a. Nous comparons cet objet de chaîne à un littéral de chaîne que nous avons attribué à la variable
b. En les comparant avec l’opérateur d’égalité abstrait, le ToPrimitive() L’opération abstraite est appelée pour convertir l’objet en chaîne avant que la comparaison ne soit effectuée, et c’est pourquoi true est renvoyé. L’opérateur d’égalité stricte voit que la comparaison est entre deux valeurs de types différents, et il retourne immédiatement false.

Conclusion

En JavaScript, les opérateurs d’égalité abstraite et stricte sont tout aussi utiles pour déterminer l’égalité. Nous pouvons conclure que l’opérateur d’égalité stricte nécessite à la fois que les types et les valeurs correspondent pour être considérés comme égaux, mais l’opérateur d’égalité abstraite permet la coercition lorsque les opérandes ne sont pas du même type.

Nous avons également vu que lorsque l’opérateur d’égalité abstraite effectue une coercition de type, il préfère convertir en nombre avant de procéder à la comparaison. Enfin, l’opérateur d’égalité abstrait préfère la comparaison entre les primitives. Lorsqu’un primitif est comparé à un non primitif, le non primitif est d’abord converti en son équivalent primitif.

De nombreux livres et blogs recommandent d’utiliser l’opérateur d’égalité stricte comme une meilleure option ; cependant, cela dépend de ce que vous voulez (voulez-vous autoriser la coercition ou non). Lors de l’écriture de JavaScript, vous utiliserez très probablement la coercition sans y penser. Peu importe donc celui que vous choisissez, connaître la différence et comprendre comment ils fonctionnent ne fera que de vous un meilleur développeur.

Ensuite, vous voudrez peut-être explorer les différents producteurs de données en JavaScript—Fonctions, Promesses, Itérables et Observables.