DEV Community

loading...

How to compare two arrays in javascript?

Marco Pestrin
Building web apllications
Updated on ・2 min read

Some days ago I needed to compare two arrays in Javascript and I trivially tried to compare them as if they were strings

const serviceList = ["sales_bot"]
const botType = ["sales_bot"]
console.log(serviceList == botType)
Enter fullscreen mode Exit fullscreen mode

and the result was this:

false
Enter fullscreen mode Exit fullscreen mode

It is possible to compare arrays using the "every" method in javascript. A possible solution is

botType.length === serviceList.length && serviceList.every(item => botType.indexOf(item) > -1)
Enter fullscreen mode Exit fullscreen mode

I started with length arrays comparison, to be sure to have the same items. Then, I needed to check if the items were inside the same number of times.

It is essential that the first condition is satisfied at first, since it is less elaborate than the second one. Indeed, the second condition has to cycle every element of the array.

If the first returns FALSE, then the second one won't even be executed. Therefore we are sure that the arrays will be different because they have different numbers of elements.

If the first returns TRUE, is to check even the second condition. This means to check that all the elements of arrays are actually the same

How is this comparison done?

The every method returns true just if all elements satisfy the condition and the indexOf method return the index of element. If doesn’t exist the result is -1. For this reason the condition is > -1

In this case, I knew for sure that one of my array would have never been empty, otherwise the problem would have been somewhere else. It happens other times that this thing is not obvious and then you need one more check like the following:

botType.length === serviceList.length && serviceList.length > 0 && serviceList.every(item => botType.indexOf(item) > -1)
Enter fullscreen mode Exit fullscreen mode

Enjoy your code mates!

Discussion (13)

Collapse
joshinat0r profile image
joshinat0r • Edited

I like to abuse JSON if I just want to know if they have the exact same entries (when I know that they arrays are fairly small since JSON.stringify isn't exactly fast)

JSON.stringify(serviceList.sort()) === JSON.stringify(botType.sort())
Enter fullscreen mode Exit fullscreen mode
Collapse
stereobooster profile image
stereobooster

Why do sort though? Those are not the same arrays [1, 2], [2, 1].

Collapse
joshinat0r profile image
joshinat0r

Semantics, [1, 2] and [2, 1] have the same entries but aren't the same arrays.
You're right, if you wanted to know if they have the same entries in the same order you wouldn't sort them.

Thread Thread
stereobooster profile image
stereobooster

JSON.stringify([undefined]) === JSON.stringify([null])

Thread Thread
joshinat0r profile image
joshinat0r

It's just creating two JSON strings and compares them, all of JSONs limitations (not only undefined or null but also Infinite, NaN, functions, symbols and such) apply. Shouldn't have to mention it as should be fairly obvious.

Collapse
qmenoret profile image
Quentin Ménoret

This is not working:

let botType = [1,2,3]
let serviceList = [1,1,1]
botType.length === serviceList.length && serviceList.length > 0 && serviceList.every(item => botType.indexOf(item) > -1)
// true
Enter fullscreen mode Exit fullscreen mode

Every element of the second list is in the first list, but they are definitely not equals.
A proper way to do this would be:

botType.length === serviceList.length && serviceList.length && serviceList.every((element, index) => botType[index] === element)
Enter fullscreen mode Exit fullscreen mode
Collapse
stereobooster profile image
stereobooster
x = [1,2]
y = [1,2]
x.every(item => y.indexOf(item) > 1)
// false
Enter fullscreen mode Exit fullscreen mode
Collapse
pestrinmarco profile image
Marco Pestrin Author

the condition is > -1

Collapse
stereobooster profile image
stereobooster • Edited
x = [1,2]
y = [2,1]
x.every(item => y.indexOf(item) > -1)
// true
Enter fullscreen mode Exit fullscreen mode
Collapse
pretaporter profile image
Maksim

You can make a bit improvement

botType.indexOf(item) > 1 => botType.includes(item)
Enter fullscreen mode Exit fullscreen mode
Collapse
stereobooster profile image
stereobooster • Edited

This will make code work, but it is O(n^2) (the same as the original code)

Collapse
nahinakbar profile image
Nahin Akbar

You can use the 'fast-deep-equal' library.
npmjs.com/package/fast-deep-equal

Collapse
pestrinmarco profile image
Marco Pestrin Author

for just 1 check is not good to use a library. A library have other functions that are included but not used