Diff Two Arrays - JavaScript Solution & Walkthrough

02/21 Diff Two Arrays

Compare two arrays and return a new array with any items only found in one of the two given arrays, but not both. In other words, return the symmetric difference of the two arrays.

Note: You can return the array with its elements in any order.

function diffArray(arr1, arr2) {
  const newArr = [];
  return newArr;
}

diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);

Source: freeCodeCamp.org

Before we walkthrough this challenge and solve it, I will encourage you to at least attempt to solve it on your own first. If you've already done that, then let's get straight to it.

Understanding the challenge

With this challenge, you will be given two arrays arr1 and arr2 as parameters of the diffArray function.

Your task is to create a function that provides all items that cannot be found in both arrays.

In other words, if an item can be found in both arr1 and arr2, that item should not be included in the final array to be returned.

Now that we know what this challenge expects of us, let's go ahead and write some pseudocode that will guide us when writing the actual code.

Pseudocode for the challenge

First, consider arr1.
    check if there is any item in arr1 which is not present in arr2
        if any such items are found, store them in a new array 
        we can call that array arr1Filter

Next, consider arr2.
    check if there is any item in arr2 which is not present in arr1
        if any such items are found, store them in a new array 
        we can call that array arr2Filter

Create an array (newArr)
It should contain all the items in both `arr1Filter` and `arr2Filter`

Return newArr

Solving the challenge

Using .filter() and .includes() method

We can employ the .filter() method to help us solve this problem. When the .filter() method is applied on an array, it returns a new array. This new array will contain items of the array that fulfills a given condition. Let's see a simple example below

const myArray = [1, 2, 3, 4, 5, 6, 7]
const filteredItems = myArray.filter(num => num > 4);

console.log(filteredItems) // [5, 6, 7]

From our example, we get an array of 5, 6 and 7 logged in the console. This is because these are the numbers from myArray greater than 4 hence the only numbers that fulfills the condition num > 4

The .includes() method returns true or false indicating whether or not an array contains a certain item among its entries. Let's see an example

const myArray = [1, 2, 3, 4, 5, 6, 7]
console.log(myArray.includes(2)) // true
console.log(myArray.includes(8)) // false

With this understanding of the .filter() and .includes() methods, let's start writing the code to solve the problem at hand.

First, we'll filter through arr1, returning all items in arr1 not included in arr2 Then, we'll filter through arr2, returning all items in arr2 not included in arr1

  const arr1Filter = arr1.filter(item => !arr2.includes(item))
  const arr2Filter = arr2.filter(item => !arr1.includes(item))

Using the ... spread syntax

Using the spread syntax, let's create an array that will contain the contents of both arr1Filter and arr2Filter

const newArr = [...arr1Filter, ...arr2Filter];

Finally, we return newArr;

return newArr;

Our diffArray function is now complete!

Final Solution

function diffArray(arr1, arr2) {

  const arr1Filter = arr1.filter(item => !arr2.includes(item))
  const arr2Filter = arr2.filter(item => !arr1.includes(item))
  const newArr = [...arr1Filter, ...arr2Filter]

  return newArr;
}

diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);
// returns [4]

Congratulations! You just cracked the "Diff Two Arrays" algorithm challenge. Cheers and happy coding!

What do you think of this approach? Do you know of a more efficient approach to solve this? I would love to hear your feedback. Drop them in the comments section.

Let's connect on Twitter 😎

Useful Links

Explanation of the .filter() method by Programming with Mosh

Tutorial on .includes() method by Ania Kubow

A lesson on array/object destructuring from Web Dev Simplified