This is the 15th day of my participation in the August Gwen Challenge. For details, see: August Gwen Challenge.

Comparing two variables for equality is a common requirement during program development. In JavaScript, two variable types are compared differently. This article reviews how to compare two variables for equality in JavaScript.

Let’s start with the following code:

Const article1 = {title: "JavaScript object equal ", summary: "Let's review how to compare two objects equal ",}; Const article2 = {title: "JavaScript object equal ", summary: "Let's review how to compare two objects equal ",}; console.log(article1 === article1); // true console.log(article1 === article2); // false console.log(article1 == article2); // false console.log(Object.is(article1, article2)); // false console.log(Object.is(article1, article1)); // trueCopy the code

From the code above, using either == or === returns false, even if both variables have the same key and value.

There are two criteria for object equality in JavaScript:

  1. Objects have the same instance
  2. Objects have the same value

Have the same instance

There are differences in JavaScript for different types of variable comparison, as follows:

  1. For primitive types (string 、number 、bigint 、boolean,null,undefined) by their values.
  2. For reference types (objects, arrays, dates), compare by reference.

A reference comparison is a comparison of the reference memory address of a reference type variable.

Const article1 = {title: "JavaScript object equal ", summary: "Let's review how to compare two objects equal ",}; Const article2 = {title: "JavaScript object equal ", summary: "Let's review how to compare two objects equal ",}; const copyArticle = article1; console.log(article2 === copyArticle); // false console.log(copyArticle == article1); // trueCopy the code

From the above code, the variables copyArticle and article1 refer to the same memory address, so return true.

Object.is

Object.is is a static method that determines whether two values are the same value. Object.is Compares the equality of two objects. The comparison rules are as follows:

  • Are allundefined
  • Are allnull
  • Are alltrue 或 false
  • Are strings of the same length and the same characters are arranged in the same order
  • Are the same objects (meaning each object has the same reference)
  • It’s all numbers and
    • Are + 0
    • Is 0
    • Is NaN
    • Or are both non-zero and non-nan and have the same value
Const article1 = {title: "JavaScript object equal ", summary: "Let's review how to compare two objects equal ",}; Const article2 = {title: "JavaScript object equal ", summary: "Let's review how to compare two objects equal ",}; const objectIs = (obj1, obj2) => Object.is(obj1, obj2); console.log(objectIs(article1, article1)); // true console.log(objectIs(undefined, undefined)); // true console.log(objectIs(null, null)); // true console.log(objectIs(-0, -0)); // true console.log(objectIs(JSON.stringify(article1), JSON.stringify(article2))); // trueCopy the code

For primitive types, it is recommended to use === and object.is to determine whether they have the same instance

Have the same value

It is not so simple to compare values of two reference types, such as objects, by comparing keys and values that are equal. The equality of reference types is a bit more complicated and, like deep copy, can also be compared by converting json.stringify to a string as follows:

const a = { foo: "bar", bar: { baz: 2, }, a() { console.log("fun"); }}; const b = { foo: "bar", bar: { baz: 2, }, a() { console.log("fun"); }}; Const article1 = {title: "JavaScript object equal ", summary: "Let's review how to compare two objects equal ",}; Const article2 = {title: "JavaScript object equal ", summary: "Let's review how to compare two objects equal ",}; const objectIs = (obj1, obj2) => Object.is(obj1, obj2); const isObject = (object) => object ! = null && typeof object === "object"; const isFunction = (fun) => typeof fun === "function"; const equalFuns = (fun1, fun2) => { return fun1.toString() === fun2.toString(); }; const jsonEqual = (obj1, obj2) => objectIs(JSON.stringify(obj1), JSON.stringify(obj2)); const isEqual = (obj1, obj2) => { const keys1 = Object.keys(obj1); const keys2 = Object.keys(obj2); if (keys1.length ! = keys2.length) { return false; } for (let index = 0; index < keys1.length; index++) { const val1 = obj1[keys1[index]]; const val2 = obj2[keys2[index]]; const areObjects = isObject(val1) && isObject(val2); const areFuns = isFunction(val1) && isFunction(val2); if (areFuns) { return equalFuns(val1, val2); } else { if ( (areObjects && ! isEqual(val1, val2)) || (! areObjects && val1 ! == val2) ) { return false; } } } return true; }; console.log(jsonEqual(article1, article2)); // true console.log(jsonEqual(a, b)); // true console.log(isEqual(a, b)); // true console.log(isEqual(article1, article2)); // trueCopy the code

You can also use third-party libraries to do this. Lodash is one of the most useful JavaScript libraries in Lodash. It has a large set of functions, including common functions for arrays, objects, strings, numbers, etc. The syntax is easy to understand.

const _ = require("lodash"); Const article1 = {title: "JavaScript object equal ", summary: "Let's review how to compare two objects equal ",}; Const article2 = {title: "JavaScript object equal ", summary: "Let's review how to compare two objects equal ",}; console.log(_.isEqual(article1, article2)); // true const arrayArticle1 = [{title: "JavaScript object equal ", summary:" Const arrayArticle2 = [{title: "JavaScript object equal ", summary: "How to compare two objects equal ",},]; console.log(_.isEqual(arrayArticle1, arrayArticle2)); // trueCopy the code

conclusion

For comparing raw values, it is recommended to use === and object.js, while for reference types with equal depth, a simple way is to use json.stringify to convert to a string and then compare.