This post is Part 2 of a four part series:
Symmetric Difference of Multiple Arrays (Part 1)
Symmetric Difference of Multiple Arrays (Part 2) <- You are here
Symmetric Difference of Multiple Arrays (Part 3)
Symmetric Difference of Multiple Arrays (Part 4)
In this section, I’m going to go over steps one and two of the strategy outlined in the previous post.
For a brief recap, in step 1, we want to separate each argument array and create a new array in our function to store them. In step 2, we will write a function that returns the symmetric difference of two arrays.
Step 1: Creating Arguments Array
I’m going to show two ways to do this. The first is an older, hackier way. The second uses
.from() which was introduced in ES2015.
This Stackoverflow post explains this line of code very well. Here’s the most important information from that post:
.apply()methods let you manually set the value of this in a function. So if we set the value of this in
.slice()to an array-like object,
.slice()will just assume it’s working with an Array, and will do its thing.
This is a much cleaner way to get an array from an array-like object. We’ll use the
.from() approach in our final solution.
Step 2: Finding the symmetric difference of two arrays.
This step is definitely the hardest part of the solution. We could use a boat load of for loops here (which I spent a long time doing the first time I solved this), but I’ve recently discovered the beauty of higher-order functions. I’m going to skip straight to those because it’s cleaner code.
Let’s outline our function.
Okay, now we can use the
Array.prototype.filter() method to process each element in
arr1 and check if it is in
.filter() implements the callback function
isInOtherArray on each element of
arr1 and only keeps elements for which the callback function returns true. (Side note: You can use an anonymous function for the callback, as is most common, but I threw a name on there for the sake of clarity. (Side side note: Sometimes it’s a good idea to give names to callback functions because it helps with understanding the call stack and debugging)). In this callback, only elements that are not in
arr2 (i.e. their index strictly equals -1) will return true and thus remain in the
Then we give
arr2 the same treatment:
To keep our code D.R.Y., we should separate the logic of the callback function out:
Let’s concatenate these arrays using
Array.prototype.concat() to get the symmetric difference and return that symmetric difference.
Alright! We’re done with most of the heavy lifting for this algorithm. We have processed the arguments passed to the function and written an inner, private function to calculate the symmetric difference of two arrays.
On to Part 3 to learn about
.reduce() and how it works it’s magic to help us bring this solution home!