How To Compare Arrays in JavaScript, With Examples

Compare Arrays in JavaScript

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:

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).

SHARE:
nv-author-image

Brad Morton

I'm Brad, and I'm nearing 20 years of experience with Linux. I've worked in just about every IT role there is before taking the leap into software development. Currently, I'm building desktop and web-based solutions with NodeJS and PHP hosted on Linux infrastructure. Visit my blog or find me on Twitter to see what I'm up to.

Leave a Reply

Your email address will not be published. Required fields are marked *