DEV Community

Cover image for 2 arrays of Same value are not equal in JS.

2 arrays of Same value are not equal in JS.

Shubham Tiwari on August 12, 2022

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 examp...
Read full post
Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • • Edited

It depends on what do you consider equal.

const arr1 = [1, 2, 3]
const arr2 = [3, 2, 1]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Tricky topic! 😂

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari •

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

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 •

That will do I guess 😂

Thread Thread
 
shubhamtiwari909 profile image
Shubham Tiwari •

Yeah 😂😂

Collapse
 
smlka profile image
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
Enter fullscreen mode Exit fullscreen mode
Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • • Edited

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]'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

because

JSON.stringify(arr1) // '[1,5,9,14,{"a":17}]'
JSON.stringify(arr2) // '[1,5,9,14,{"a":1700}]'
Enter fullscreen mode Exit fullscreen mode
Collapse
 
object_required profile image
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 } ]
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
joelbonetr profile image
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;
};
Enter fullscreen mode Exit fullscreen mode 
/**
 * 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;
};
Enter fullscreen mode Exit fullscreen mode

Discussing them could deal to an entire post probably 😂

Cheers!

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari •

Again complicated but beautiful

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari •

Again you showed us another example of why javascript is complicated

Collapse
 
bwca profile image
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
Enter fullscreen mode Exit fullscreen mode
Collapse
 
joelbonetr profile image
JoelBonetR 🥇 •

😂 Good one!

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari •

😂😂😂😂