CodeAnalogies Blog

Over 2+ years of writing on the CodeAnalogies blog, I have gotten one consistent piece of feedback about the content I could be writing.

After reading one of my tutorials about HTML, CSS and JavaScript principles, readers will say:

“It’s great that you are teaching these concepts at a high level. But how do I actually apply them? How can you teach me to ‘think like a programmer’?”

I have thought long and hard about how to address this, and finally, I decided that the best option is to walk through specific examples that use analogies alongside traditional explanation tactics.

I want to help you understand what is happening in the code on every single line.

So, with that, let’s get into one of these challenges!

I am going to explain algorithm challenges from the freeCodeCamp curriculum. Here is how I think about the challenge called “Diff Two Arrays“. Please note, this tutorial will only work on desktop and tablet.

The Challenge

“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.”

Let’s quickly turn this into an example. Let’s say that two kids bring their lunchboxes to school. You are trying to find the unique items- the ones that only one child has in their lunchbox.

let box1= ["juice", "sandwich", "chips", "yogurt"];
let box2 = ["milk", "sandwich", "carrots", "chips"];

In this example, the answer would be carrots, yogurt, juice and milk. This ultimately boils down to counting- we need to count which elements only appear one time between both arrays.

That means that we first need to combine the arrays into one larger array so that we only need to iterate through the combined elements once.

In a previous tutorial, I compared arrays to books. We are smashing two books together to create one larger book. That means we need the concat() method, which combines arrays. It is pretty straightforward.

Use this interactive code block to visualize the concat method().

Choosing Between Map, Filter and Reduce

Now that we have the combined array, we need to figure out how we are going to extract the correct values. This is where map, filter and reduce come into play.

• Map lets you transform every element from a beginning array into a final array
• Filter lets you select only the elements in an array that meet certain criteria
• Reduce lets you sum up array elements based on certain criteria.

Out of those three options, which seems most appropriate for the situation?

Filter should be the winner. We only want to select elements from the total array that meet specific criteria.

This interactive diagram shows how filter will work.

Figuring Out Which Values To Return

Now, we can iterate through each item in the total array. But how do you know which ones to return?

Let’s think about the two possible cases where we would want to return a value.

1. An item is part of array 1 but not array 2
2. An item is part of array 2 but not array 1

If we didn’t use concat in the previous step, we would have to run two loops and compare the values. Now, we only need one.

So, if an item is in the total array BUT not in array 2, then it must be only in array 1.

And if an item is in the total array BUT not in array 1, then it must be only in array 2.

This is where the includes method comes in. “Includes” lets you check if a specific element is contained in an array. We can use this to check each element in the total array against the elements in the individual arrays.

Let’s walk through this example for array 1. We want to find all the items that are in array 1 and not array 2. Here is how we might do that in code.

That means that for every item in total, we check in the box2 array to see if it exists. If it does not, that means it is just in array 1, and therefore fits our original condition.

I added an image of an open book because this is kind of like flipping through a book. Your code is quickly flipping through the array to see if an element exists in it.

Here’s the video of that, in case you didn’t see it above.

Notice how our justArr1 variable evaluates to true or false. This is the concept of truthiness– if the item is not part of box2, the statement is true, and the item will be included in the answer array. That is why we end with two items in the array- the statement was true twice (so far)

Using Multiple Conditions

We have satisfied one of two conditions needed to compare these arrays. Now, we just need to figure out how to include both conditions within our filter() method.

As we go through the total array, we also need to check whether each individual element is part of array 2 and not array 1. We can use a similar syntax to the previous example.

Our final output must include all elements that satisfy one condition OR the other. We can use the OR operator (||) to consider both cases for each element within total.

Here is what that looks like:

And here is the visualization for the final part.

Our final output is:  [“juice”, “yogurt”, “milk”, “carrots”];

This means that for each item in total, we check for whether it is included in box1 or box2. If it is NOT included in either, that means it is unique to one of the arrays, and it makes one of the two statements true.

Get The Latest Tutorials

Did you enjoy this challenge? Sign up here to get the latest tutorials on HTML, CSS and JavaScript topics.