2 arrays of Same value are not equal in JS.

Hello Guys today i am going to discuss a very little thing that you might have not noticed in Javascript.
I will show you that thing using an example.

Example 1 -

let array1= [1,5,9,14,17];
let array2= [1,5,9,14,17];

console.log(array1 == array2);
console.log(array1 === array2);

Can you guess what will be the output?

Output -

false
false

• It returned false in both comparsion although the values are equals, number of elements are also equal so, why it returned false? because everything in javascript is an object and arrays are also objects therefore instead of comparing the values or number of elements , it checks the reference of those array which is different that's why it returned false in both the cases.

Example 2 -

let array1= [1,5,9,14,17];
let array2= [1,5,9,14,17];
let array3 = array1
console.log(array3 === array1);
console.log(array3 === array2);

Can you guess now what will be the output?

Output -

true
false

• Well the reason it returned true while comparing array3 with array1 is because we stored the reference of array1 in array3 so, both are pointing to the same reference while array3 and array2 comparison returned false because they have different references.

How you can then compare these arrays?

The answer is simple , use the toString method to convert the array into strings and then compare them

Example 3-

let array1= [1,5,9,14,17];
let array2= [1,5,9,14,17];
console.log(array1.toString() === array2.toString());

Output -

true

• So, now it is comparing string values which is equal that's why it returned true this time.

It looks quite confusing and i tried my best to explain and if you find any point wrong please correct it in the comment section.

THANK YOU FOR CHECKING THIS POST
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/javascript-map-with-filter-2jgo

https://dev.to/shubhamtiwari909/e-quotes-3bng

https://dev.to/shubhamtiwari909/deploy-react-app-on-netlify-kl

Comments

[JoelBonetR 🥇]

It depends on what do you consider equal.

const arr1 = [1, 2, 3]
const arr2 = [3, 2, 1]

Both have the same length and values, are they "equal"?

/**
 * Checks whether two arrays are equal (same length, same values, same value order)
 * @param {Array<any>} arr1 
 * @param {Array<any>} arr2 
 * @returns {boolean}
 */
const isStrictEqual = (arr1, arr2) => arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);

isStrictEqual([1, 2, 3], [1, 2, 3]) // true
isStrictEqual([1, 2, 3], [3, 2, 1]) // false

There are a bunch of workarounds to cover all meanings depending on what do you consider equal.

/**
 * Checks whether two arrays are equal (same length, same values)
 * @param {Array<any>} arr1 
 * @param {Array<any>} arr2 
 * @returns {boolean}
 */
const isEqual = (arr1, arr2) => {
  const arr2Sorted = arr2.slice().sort();
  return arr1.length === arr2.length && arr1.slice().sort().every( (value, index) =>
      arr2Sorted[index]);
}

isEqual([1, 2, 3], [1, 2, 3]) // true
isEqual([1, 2, 3], [3, 2, 1]) // true

Tricky topic! 😂

[Shubham Tiwari]

All i wanted to show how complicated Javascript language is 😂😂

[JoelBonetR 🥇]

That will do I guess 😂

[Shubham Tiwari]

Yeah 😂😂

[Andrey Smolko]

toString() is a not good way (or is good is array's element are primitives). Check that example:

let array1= [1,5,9,14,{a:17}];
let array2= [1,5,9,14,{a:1700}];
console.log(array1.toString() === array2.toString());
// true

[JoelBonetR 🥇]

Agree. And we can see the reason why doing

const arr1= [1, 5, 9, 14, {a:17}];
const arr2 = [1, 5, 9, 14, {a:1700}];
arr1.toString()  // '1,5,9,14, [object Object]'
arr2.toString()  // '1,5,9,14, [object Object]'

JSON.stringify on the other hand, works better on this:

const arr1= [1, 5, 9, 14, { a: 17 }];
const arr2 = [ 1, 5, 9, 14, { a: 1700 }];
JSON.stringify(arr1) === JSON.stringify(arr2) // false

because

JSON.stringify(arr1) // '[1,5,9,14,{"a":17}]'
JSON.stringify(arr2) // '[1,5,9,14,{"a":1700}]'

[Nikolai Kim]

And with JSON.stringify these two will not be equal:

const arr1 = [ 1, { foo: 2, bar: 3 } ]
const arr2 = [ 1, { bar: 3, foo: 2 } ]

[JoelBonetR 🥇]

Actually they are somewhat different (some props are not in the same order).
That's why this question is so tricky 😂

I let you a couple of snippets that can be useful in certain situations:

/**
 * Retrurns the depth of an Object
 * @param {Object} object 
 * @returns {number}
 */
const depthOf = (obj) => {
  let level = 1;
  for (const key in obj) {
    if (!obj.hasOwnProperty(key)) continue;

    if (typeof obj[key] == 'object') {
      let depth = depthOf(obj[key]) + 1;
      level = Math.max(depth, level);
    }
  }
  return level;
};

/**
 * Transforms Object into Array Recursively
 * @param {Object} obj
 * @returns {Array}
 */
const deepObjectToArray = (obj) => {
  let result = obj;
  if (typeof obj === 'object' && !Array.isArray(obj)) {
    result = Object.entries(obj);
    result.forEach((attr) => {
      attr[1] = deepObjectToArray(attr[1]);
    });
  } else if (Array.isArray(obj)) obj.forEach((v, i, a) => (a[i] = deepObjectToArray(v)));

  return result;
};

Discussing them could deal to an entire post probably 😂

Cheers!

[Shubham Tiwari]

Again complicated but beautiful

[Shubham Tiwari]

Again you showed us another example of why javascript is complicated

[Volodymyr Yepishev]

Javscrtipt is fabulous:

const a = [1, undefined];
const b = [1];

a[0] === b[0]; // true
a[1] === b[1]; // true
a.toString() === b.toString() //false

[JoelBonetR 🥇]

😂 Good one!

[Shubham Tiwari]

😂😂😂😂