Difference Between Two Arrays in JavaScript

Introducing the .includes Array entity method that is used to determine if an element belongs to an array, we will make use of it to determine which elements of the first array, is included too in the second array.

With this, we will use it inside the condition() function within the .filter method. This callback function can be either an arrow function or a common function as a callback function. The .filter can be used literally to filter array elements based on a condition, and the callback function will dictate what elements the .filter will add or not to the returned array.

Difference Between Two Arrays in JavaScript

The .include is a method of the Array entity. It returns true if the element passed as parameter is included in the array that the method is called, or false if the element is not included. As a simple example:

// Input
let array = ['a', 'b', 'c', 'd'];
console.log(array.includes('a'))

Output:

// Output
true

And if the element doesn't belongs to the array, we have:

// Input
let array = ['a', 'b', 'c', 'd'];
console.log(array.includes('z'))

Output:

// Output
false

This method can only receive two parameters. If you pass more than one, it can return a wrong value to the set of elements that was passed as parameter. The first parameter is the element, as seen above; the second is the index or the fromIndex, that is optional.

The fromIndex is the index that the .includes will start "searching" for the element. Let's see the example below:

// Input
let array = [1, 2, 3, 4, 5];
console.log(array.includes(3, 3))

As the 3 value is on the index array[2], it is false that the array have an element equals to 3 starting from the index array[3] to the end:

// Output
false

Now for the .filter method, it is also a method of the Array entity and this method returns a new array filtered by a condition, that is provided by the condition() function within it. Returning a new array, means that the original array which the method is called will stand immutable.

Also, this condition() function is a callback function. A callback function is a function passed as parameter to another function or method which is called "outer function". The callback function will be called by the outer function to do something; in the case of the .filter method, it will call the condition callback function to filter the array based on this condition.

The .filter method will call the callback function for each element in the array. So the .filter will have array.length iterations and will finally return a new array with a number of elements equal to the number of iterations that the callback function return a value equivalent to true.

For example, if we want all elements that have their size equal to 3, we can use the .filter as below:

// Input
let array = ['one', 'two', 'three', 'four', 'five']
array = array.filter(element => element.length == 3)
console.log(array)

In this case, it receives an element as parameter, and if this element have its size equal to 3, it returns true and if not, returns false. So, the .filter method add any of the element that the condition results in true.

// Output
[ 'one', 'two' ]

As expected, the .filter method returned an array based on the element.length == 3 condition. Each value of the array that have its size equals to 3, was added to the returned array.

But we want to get the difference between two arrays, and this will be possible putting all together.

Will use the .filter method on the array that we want to get the difference, and inside it, we will use the .include as the condition, verifying if the element on the array that the .filter is called is included in the second element. Let's see this example:

// Input
let array1 = ['a', 'b', 'c', 'd', 'e'];
let array2 = ['a', 'b', 'c'];
console.log(array1.filter(element => array2.includes(element)))

Output:

// Output
[ 'a', 'b', 'c' ]

Well, see that the output is not the difference between the two array, but their intersection. Not that the condition array2.includes(element) is comparing if the element is included in the second array, and if it is true, the .filter will add this element to the resultant array.

But if we put a logical "not" or ! in the condition? This way, the .filter will add only elements that are not included in the second array. Check the example:

// Input
let array1 = ['a', 'b', 'c', 'd', 'e'];
let array2 = ['a', 'b', 'c'];
console.log(array1.filter(element => !array2.includes(element)))

Output:

// Output
[ 'd', 'e' ]

Finally, we have the difference between the two arrays.

As a plus, if we want to get all elements that are not in the intersection, we can just do the following:

// Input
let array1 = ['a', 'b', 'c', 'd', 'e', 'f'];
let array2 = ['a', 'b', 'c', 'x', 'y', 'z'];
let array3 = array1.filter(element => !array2.includes(element)).
    concat(array2.filter(element => !array1.includes(element)))
console.log(array3)

In this example, we want all elements that are not 'a', 'b' or 'c', so the output is:

// Output
[ 'd', 'e', 'f', 'x', 'y', 'z' ]

And finally, as the last thing we can add our solution to the difference between two arrays in a prototype method of the Array entity. The .prototype is a property of the Array entity that allow us to add custom properties and methods to an entity.

To make a .difference method to the Array entity, we can use the following structure:

// Input
// Declaring the prototype .difference method
Array.prototype.difference = function(array2){
    return this.filter(element => !array2.includes(element))
}
let array1 = ['a', 'b', 'c', 'd', 'e'];
console.log(array1.difference(['a', 'b', 'c']))

Output:

// Output
[ 'd', 'e' ]

This way, we can use .difference each time that is necessary to, instead to rewriting the logic every time.