How to Get the Difference Between Two Arrays in JavaScript ?

The problem is to find the difference between two arrays in JavaScript. The objective is to identify the elements that exist in one array but not in the other and return them as a new array.

These are the approaches to achieve differences between two arrays are:

Approach 1: Using the filter() and includes() methods

In this approach, we use the filter() method on the first array and check if each item is not present in the second array using the includes() method. The resulting array contains the elements that are present in the first array but not in the second array.

Syntax:

array1.filter((element) => !array2.includes(element));

Example: In this example, we are using the above-explained approach.

Javascript

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

const difference =
    array1.filter((element) => !array2.includes(element));

console.log(difference);

Output

[ 1, 2 ]

Approach 2: Using for Loop and indexOf() Method

To find the difference between two arrays in JavaScript, you can iterate over one array using a for loop and check if each element exists in the other array using the indexOf() method. If an element is not found, it is added to the result array.

Syntax:

function arrayDiff(a, b) {
    let difference = [];
    for (let i = 0; i < a.length; i++) {
        if (b.indexOf(a[i]) === -1) {
            difference.push(a[i]);
        }
    }
    return difference;
};

Example: In this example, we define a function called arrayDifference that takes in two arrays as parameters. We initialize an empty array called difference to store the elements that are present in arr1 but not in arr2. We then use a for loop to iterate over each element in arr1. For each element, we use the indexOf() method to check if it exists in arr2. If the indexOf() returns -1, indicating that the element is not found in arr2, we push it into the difference array.

Javascript

function arrayDifference(arr1, arr2) {
    const difference = [];

    for (let i = 0; i < arr1.length; i++) {
        if (arr2.indexOf(arr1[i]) === -1) {
            difference.push(arr1[i]);
        }
    }

    return difference;
}

const array1 = [1, 2, 3, 4, 5, 0];
const array2 = [3, 4, 5, 6, 7, 9];
const difference = arrayDifference(array1, array2);
console.log(difference);

Output

[ 1, 2, 0 ]

Approach 3: Using Set and filter() Method

In this approach, the arrays are converted to Sets using the Set constructor. The Set data structure only allows unique values. By filtering out the elements from the first set that also exist in the second Set, we can obtain the difference.

Syntax:

const difference = [...set1].filter((element) => !set2.has(element));

Example: In this example, we are using the above-explained approach.

Javascript

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

const set1 = new Set(array1);
const set2 = new Set(array2);

const difference = [...set1].filter(
    (element) => !set2.has(element));

console.log(difference);

Output

[ 1, 2 ]

Approach 4: Using reduce() and includes() Methods

This method iterates over the first array and checks if each element is present in the second array using the includes() method. It accumulates the elements that are not found in the second array, resulting in the difference between the two arrays.

Syntax:

const difference = array1.reduce((result, element) => {
    if (array2.indexOf(element) === -1) {
        result.push(element);
    }
    return result;
}, []);

Example: In this example, we are using the above-explained approach.

Javascript

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

const difference = array1.reduce((result, element) => {
    if (array2.indexOf(element) === -1) {
        result.push(element);
    }
    return result;
}, []);

console.log(difference);

Output

[ 1, 2 ]

Approach 5 : Using Lodash _.difference() Function

Lodash _.difference() function is used to remove a single element or the array of elements from the original array. This function works pretty much the same as the core function of JavaScript i.e. filter.

Syntax:

_.difference(array, [values]);

Example: In this example, we are using the _.difference() method to find the difference of the array. 

Javascript

// Requiring the lodash library
let _ = require("lodash");

// Original array
let array = ["a", 2, 3];

// Values to be removed from
// the original array
let values = [2, 3]
let newArray = _.difference(array, values);
console.log("Before: ", array);

// Printing array
console.log("After: ", newArray);

Output:

Before: [ 'a',2,3 ]
After: [ 'a' ]