DEV Community

Simplest way to compare two numbers array in JS

Shuvo on October 18, 2021

In case of string we can simply use == or === to see if they are same but we can't use those to see in two arrays are similar or in other words the...

Read full post

Kavindu Santhusa • Oct 18 '21 • Edited

Correct Algorithm

Here is the Correct Algorithm

const array1 = [1, 2, 3, 4, 5];
const array2 = [1, 2, 3, 4, 5];

// This is the function
const compare = (a1, a2) =>
  a1.length == a2.length &&
  a1.every(
    (element, index) => element === a2[index]
  );

// Example
console.log(compare(array1, array2));

// Sorted
console.log(compare(array1.sort(), array2.sort()));

Marco Steinke • Oct 19 '21

This was the solution for a subtask of a problem I recently solved in a project.

I compared two vectors element-wise and counted the amount of distinct elements

getTotalDifference(anotherVector) {
    let diff = 0;
    this.values.forEach((e,i) => { return (this.values[i] != anotherVector[i]) ? diff++ : diff = diff; })
    return diff;
}

virtualghostmck • Oct 20 '21

If a2 has more elements than a1, then this algo fails.

Kavindu Santhusa • Oct 20 '21

Thanks, Now it's upadated.

Nicolas Hervé • Oct 19 '21

You forgot to compare array sizes.

compare([1], [1, 2]); // true

Shuvo • Oct 18 '21

Yes but we are talking about the simple approach here

Shuvo • Oct 18 '21

And your function has some drawbacks also

𒎏Wii 🏳️‍⚧️ • Oct 18 '21

Whether that's a drawback or by design is questionable; whether two identical objects should be treated as actually the same completely depends on your problem domain.

Shuvo • Oct 18 '21

agreed 100%

Kavindu Santhusa • Oct 18 '21

In js your Objects are not equal
If your arrays are

const num5 = { num: 5 };
const array1 = [1, 2, 3, 4, num5];
const array2 = [1, 2, 3, 4, num5];

It works.

Lumin • Oct 19 '21

I think it would be greate if we sort the array inside compare function, so we can sure that it will compare with the right position

Valeria • Oct 18 '21

This method will not work for non-primitive values:

[{v:1},{v:2},{v:3}] + ''
// '[object Object],[object Object],[object Object]'

Although slight alteration to the algorithm will do the trick:

JSON.stringify([{v:1},{v:2},{v:3}])
// '[{"v":1},{"v":2},{"v":3}]'
JSON.stringify([1,2,3,4,5])
// '[1,2,3,4,5]'

However even the latter comparison is aimed for simple and small arrays as it can be pretty expensive and yield unexpected results for some edge-cases, e.g.:

JSON.stringify(new Set([1,2,3]))
// '{}'

In those cases one can use deep equal implementation from a variety of packages.

𒎏Wii 🏳️‍⚧️ • Oct 18 '21

This method will not work for non-primitive values

I read that as "non-prime values" at first and was severely confused 😆

Shuvo • Oct 18 '21

true, most short hacks usually have drawbacks

Kavindu Santhusa • Oct 18 '21

Your solution has too many drawbacks.

Pierre Vahlberg • Oct 21 '21

That was not very constructive really. Care to explain a bit what the drawbacks could be?

Johnny Wu • Oct 24 '21

also you can use lodash.isMatch _.isMatch

Lars Moelleken • Oct 18 '21 • Edited

Last time I needed to compare sommeting in JS I used "JSON.stringify" but its still a hack. What is the correct way to do it nowadays? 🤔

Valeria • Oct 18 '21

There is no general right or wrong as it depends on a particular use case, but if you want an optimal solution that would handle most of the cases it'll probably be a recursive iterator over indices with early return.

Shuvo • Oct 18 '21

Writing an algorithm with loop and recursion if needed

Kavindu Santhusa • Oct 18 '21

Extractly

Patrick Tingen • Oct 18 '21

What's the advantage of using the "hack" over the more straightforward way of adding .toString? The advantage of .toString is that it makes your intent more clear, which might be a tiny bit more maintenance friendly

Shuvo • Oct 18 '21

There are two types of people in this world.

People who like hacks
Other people

Patrick Tingen • Oct 18 '21

Haha, fair enough, but type-1 people then better keep working in 1-person teams

Shuvo • Oct 18 '21

Yes in corporate/serious project you have some rules to follow

blackr1234 • Oct 18 '21 • Edited

I won't consider that a "hack" because as a Java developer I always write +"" instead of toString(), but I would consider stringifying the arrays and comparing them a hack for array comparison.

Shuvo • Oct 18 '21

Owh nice to know

Nicolas Hervé • Oct 18 '21

This is so wrong...

compareArr([1, 2, 3], [1, "2,3"]);

Shuvo • Oct 18 '21

actually I was aiming for numbers array. I updated the title
Thanks

Nicolas Hervé • Oct 18 '21

Array.prototype.toString = () => "oups";
compareArr([1, 2, 3], [4, 5, 6]);

Kavindu Santhusa • Oct 19 '21

Changing built-in Objects is a bad idea.

Nicolas Hervé • Oct 19 '21

It is a bad practice, but in the browser context you should be aware that object prototype pollution exists.

Shuvo • Oct 18 '21

didn't saw that coming

Joe Attardi • Oct 22 '21

Please don't ever do this in production code.

Shuvo • Oct 22 '21

Agreed

Joe Attardi • Oct 22 '21

So you agree that your own post is a bad idea? 🤔

Shuvo • Oct 22 '21

yes there is always drawbacks of easy hacks.
But if you're confident about your input you might as well ues this

Joe Attardi • Oct 22 '21

Sometimes hacks make it into production code and become technical debt. This is not a hack that should ever be in a real application.

There are a lot of beginners on DEV and when they see posts like this it teaches them really bad practices. Particularly here since you have tagged it with #beginners.

Besides, your "solution" is for comparing arrays of numbers only. Comparing two arrays containing just numbers is easy with a simple loop since there aren't nested properties, etc.

function arrayEquals(arr1, arr2) {
  for (let i = 0; i < arr1.length; i++) {
    if (arr1[i] !== arr2[i]) {
      return false;
    }

    return true;
}

You could also use Array.prototype.every for a one-liner:

function arrayEquals(arr1, arr2) {
  return arr1.every((el, index) => arr2[index] === el);
}

With both of the above approaches, it bails out as soon as it finds two array elements that are not unique. Stringifying and comparing strings (yuck) requires processing each array in full.

Alex Lohr • Oct 18 '21

A faster way of unsorted equality would be:

const arrayEqualsUnsorted = (array1, array2) =>
  array1.length === array2.length && 
  array1.every(item => array2.includes(item));

Nicolas Hervé • Oct 18 '21

It don"t work with duplicated values.

arrayEqualUnsorted([1, 1, 2], [1, 2, 2]); // true

Hong Phuc • Dec 14 '22

You should remove duplicated items with Set class first before comparing, for example:

const uniqueArr = [... new Set(yourArr)]

tamusjroyce • Oct 19 '21

Check the length first. That is the simplest way to tell they may not be equivalent. You have also just sorted the original array1 and array2. ‘[…array2].sort()’ would be better.

array1.length === array2.length && array1.some???

J7222 • Oct 20 '21 • Edited

let x=['1',2,5,6];
let y= [1,2,5,6];
let xlenx = x.length;
for(let i=0;i<xlenx;i++){
if(x[i]==y[i]){

console.log(x[i] + ' == ' + y[i])
}
else if(x[i]!==y[i]){
console.log('not same');
break;
}}

Andrey Gurtovoy • Oct 19 '21 • Edited

compareArr = (arr1, arr2) => {
  if(arr1.length !== arr2.length){ return false;}
  return arr1.every((item, index) => item === arr2[index]);
};

// Is better for your task

Michael R. • Oct 23 '21

Ahh! I love the smell of a lively Javascript debate thread in the morning, now to peruse (creep) on all the comments whilst remaining quiet as a church mouse. 😅😁😶

Shuvo • Oct 23 '21

I also should've done that

Jeremy Forsythe • Oct 21 '21

Your function mutates the arrays. After calling compareArr(), array2 will have been sorted. You should copy the arrays before sorting so you don't mutate the parameters

duccanhole • Oct 18 '21

but if we compare [1,'2',3] and [1,2,3]; I expect false, and result is true

Shuvo • Oct 19 '21

yes that's why in the post title I said numbers array

Charlène Bonnardeaux • Oct 18 '21

I don't think that's a good practice, only because two arrays may contain the same thing but not in the same order... I would tend to just iterate on one and do a comparison with each of the values

blackr1234 • Oct 18 '21

If order matters, don't sort them before converting to strings. Yeah of course you could loop them, or use utility libraries.

capscode • Oct 19 '21

There is one amazing Library called underscore to object comparison