This article will show you how to compare arrays in JavaScript and provides some ready-to-use functions to do so.
We’ve already covered a bit on how to use arrays in JavaScript:
- Looping over Array using JavaScript forEach(), With Examples
- Array slice() Method in JavaScript, with Examples()
- Check Array Contains a Value in JavaScript, with Examples
- Removing an Element From an Array in JavaScript, with Examples
What is an Array?
An array is a type of JavaScript variable that can hold other variables, or references to other variables, in a list at a certain position.
Comparing Arrays in JavaScript
As elements in an array have both a value and an index (or position), you will need to decide how you wish to compare them. Here are the options with code examples.
Checking if Arrays Contain the Same Values, Regardless of Order
Note that this will not work well if there are duplicate values in the array – only the presence of a value in each array can be compared, not how many times it appears, as the position of each element is not checked.
The following function will check whether two arrays contain the same values, regardless of frequency or position.
function compareArrayValues(array1, array2){
# Get only the unique values in each array
# This uses the new ES6 Set feature - a Set contains only unique values, so by converting an array to a Set and back, only the unique values are kept
# the ellipsis (...) expands the values of the Set, which is faster to type than a foreach loop to add each value to the array
array1 = [...new Set(array1)];
array2 = [...new Set(array2)];
# Sort the arrays so the values are in order and can be compared:
array1.sort();
array2.sort();
# The arrays can now be compared directly. A cheeky shortcut to do this is to convert them to a JSON string and compare those - if the strings match, the arrays are the same
# This is again much faster than iterating through the array and comparing each value
return JSON.stringify(array1) === JSON.stringify(array2);
}
This function will return TRUE if the arrays contain the same values or FALSE if they do not.
Checking if Arrays Contain the Same Values, In The Same Order
The following function compares the arrays directly – they must be completely identical:
function compareArrays(array1, array2){
# The arrays can be compared as-is as we want both the value and position of each element to be checked. A cheeky shortcut to do this is to convert them to a JSON string and compare those - if the strings match, the arrays are the same
# This is much faster than iterating through the array and comparing each value
return JSON.stringify(array1) === JSON.stringify(array2);
}
This function will return TRUE if the arrays are exactly the same or FALSE if they are not.
Finding Values in an Array that Aren’t in Another
Modern versions of JavaScript since the ECMA2015 release (which should be by now widely supported) provide functions for easy filtering of arrays to find differences between them.
The below example will take the elements in array1 that are not in array2 and create a new differences array with them.
var differences = array1.filter(e => array2.indexOf(e) < 0);
How does this work?
array1 is being filtered to only include values that do not appear in array2. Whether a value appears in array2 is determined by whether it has a valid index (an index greater than 0 or not).
