Difference Between Two Arrays in JavaScript

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

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 passed as a parameter. As seen above, the first parameter is the element; the second is the index or the fromIndex, which is optional.

The fromIndex is the index where the .includes will search 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 value 3 is on the index array[2], it is false that the array has an element equal 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 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 passed as a parameter to another function or method called “outer function”.

The outer function will call the callback 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 an array.length iterations and will finally return a new array with several elements equal to the number of iterations that the callback function returns 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 a parameter, and if this element has its size equal to 3, it returns true and returns false if not. So, the .filter method adds any element that the condition results true.

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

As expected, the .filter method returned an array based on the element.length == 3 condition. Each value of the array with its size equal 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 arrays but their intersection. Not that the condition array2.includes(element) compares 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 allows 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 necessary, instead of rewriting the logic every time.