Difference Between Two Arrays in JavaScript
Tags: tutorial, programming, javascript
Published: 2022-03-17 07:54:07

![An olive green background with the text: "JavaScript Algorithm - Difference of Two Array" in it](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulbdxwgx7mtw1w8ujj2p.png)

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:

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

Output:

```javascript
// Output
true
```

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

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

Output:

```javascript
// 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:

```javascript
// 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:

```javascript
// 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:

```javascript
// 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`.

```javascript
// 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:

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

Output:

```javascript
// 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:

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

Output:

```javascript
// 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:

```javascript
// 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:

```javascript
// 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:

```javascript
// 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:

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

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