loading...

Solving "Diff Two Arrays" / freeCodeCamp Algorithm Challenges

virenb profile image Viren B Originally published at virenb.cc ・4 min read

Solving freeCodeCamp's Algorithm Challenges (37 Part Series)

1) FCC Algorithm Challenges / Convert Celsius to Fahrenheit 2) FCC Algorithm Challenges / Reverse a String 3 ... 35 3) FCC Algorithm Challenges / Factorialize a Number 4) FCC Algorithm Challenges / Find the Longest Word in a String 5) FCC Algorithm Challenges / Return Largest Numbers in Arrays 6) Solving "Confirm the Ending" / FreeCodeCamp Algorithm Challenges 7) Solving "Repeat a String Repeat a String" / FreeCodeCamp Algorithm Challenges 8) Solving "Truncate a String" / freeCodeCamp Algorithm Challenges 9) Solving "Finders Keepers" / freeCodeCamp Algorithm Challenges 10) Solving "Boo who" / freeCodeCamp Algorithm Challenges 11) Solving "Title Case a Sentence" / freeCodeCamp Algorithm Challenges 12) Solving "Slice and Splice" / freeCodeCamp Algorithm Challenges 13) Solving "Falsy Bouncer" / freeCodeCamp Algorithm Challenges 14) Solving "Where do I Belong" / freeCodeCamp Algorithm Challenges 15) Solving "Mutations" / freeCodeCamp Algorithm Challenges 16) Solving "Chunky Monkey" / freeCodeCamp Algorithm Challenges 17) Solving "Sum All Numbers in a Range" / freeCodeCamp Algorithm Challenges 18) Solving "Diff Two Arrays" / freeCodeCamp Algorithm Challenges 19) Solving "Seek and Destroy" / freeCodeCamp Algorithm Challenges 20) Solving "Wherefore art thou" / freeCodeCamp Algorithm Challenges 21) Solving "Spinal Tap Case" / freeCodeCamp Algorithm Challenges 22) Solving "Pig Latin" / freeCodeCamp Algorithm Challenges 23) Solving "Search and Replace" / freeCodeCamp Algorithm Challenges 24) Solving "DNA Pairing" / freeCodeCamp Algorithm Challenges 25) Solving "Missing letters" / freeCodeCamp Algorithm Challenges 26) Solving "Sorted Union" / freeCodeCamp Algorithm Challenges 27) Solving "Convert HTML Entities" / freeCodeCamp Algorithm Challenges 28) Solving "Sum All Odd Fibonacci Numbers" / freeCodeCamp Algorithm Challenges 29) Solving "Sum All Primes" / freeCodeCamp Algorithm Challenges 30) Solving "Smallest Common Multiple" / freeCodeCamp Algorithm Challenges 31) Solving "Drop it" / freeCodeCamp Algorithm Challenges 32) Solving "Steamroller" / freeCodeCamp Algorithm Challenges 33) Solving "Binary Agents" / freeCodeCamp Algorithm Challenges 34) Solving "Everything Be True" / freeCodeCamp Algorithm Challenges 35) Solving "Arguments Optional" / freeCodeCamp Algorithm Challenges 36) Solving "Make a Person" / freeCodeCamp Algorithm Challenges 37) Solving "Map the Debris" / freeCodeCamp Algorithm Challenges

'Diff Two Arrays'

Let's solve freeCodeCamp's intermediate algorithm scripting challenge, 'Diff Two Arrays'.

Starter Code

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

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

Instructions

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.

Tests

diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]) should return an array.
["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"] should return ["pink wool"].
["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"] should return an array with one item.
["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"] should return ["diorite", "pink wool"].
["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"] should return an array with two items.
["andesite", "grass", "dirt", "dead shrub"], ["andesite", "grass", "dirt", "dead shrub"] should return [].
["andesite", "grass", "dirt", "dead shrub"], ["andesite", "grass", "dirt", "dead shrub"] should return an empty array.
[1, 2, 3, 5], [1, 2, 3, 4, 5] should return [4].
[1, 2, 3, 5], [1, 2, 3, 4, 5] should return an array with one item.
[1, "calf", 3, "piglet"], [1, "calf", 3, 4] should return ["piglet", 4].
[1, "calf", 3, "piglet"], [1, "calf", 3, 4] should return an array with two items.
[], ["snuffleupagus", "cookie monster", "elmo"] should return ["snuffleupagus", "cookie monster", "elmo"].
[], ["snuffleupagus", "cookie monster", "elmo"] should return an array with three items.
[1, "calf", 3, "piglet"], [7, "filly"] should return [1, "calf", 3, "piglet", 7, "filly"].
[1, "calf", 3, "piglet"], [7, "filly"] should return an array with six items.

Our Approach

Read everything first. Read the instructions clearly, read the starter code we're given, and read the tests and understand what has to be returned.

  • The function takes in two arguments, arr1 & arr2, both being arrays containing various data types (or being empty).
  • We need to return an array with the 'symmetric difference' of the two arrays (items found in one of the two arrays but not both).

Now that we understand what we are given and what we want to output, let's see how we can solve this.

After reading and thinking about how to approach this problem, I would conclude looping through each array and comparing each item against the other array (to check if it exists) would be a good way to go about it.

Since we've been introduced to newer array methods in the fCC curriculum, it may be a good idea to see if any of them can be implemented in this solution.

Instead of (for) looping, another approach is possibly to combine the arrays and then see which item exists more than once. If there is such a case, we can then remove the item which is there multiple times.

Reading through documenation on my favorite website, Mozilla Developer Network (MDN), we can see what array methods can help us out.

Array.concat()

Array.concat() combines two or more arrays. It will return you a new array (instead of altering your existing ones).

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

let newArr = arr1.concat(arr2);

newArr = [ 1, 2, 3, 4, 5, 1, 2, 3, 5 ]

We now have all our items from arr1 and arr2 combined into a new array. We now have to figure out if an item exists more than once and also how to remove it from the array.

The next useful new method we stumble upon is filter().

Array.filter()

filter() will return a new array with all items which pass the constraint (or 'test implemented'). Small example as follows:

const nums = [1, 4, 9, 16, 25, 36, 49];

const doubleDigits = nums.filter(num => num > 9);

console.log(doubleDigits);
// Array(4) [ 16, 25, 36, 49 ]

We need to write a test within our filter() method to check if each item is from/in both arrays, arr1 and arr2.

Another method which we will be using along with filter() is includes(). includes() checks if the value is in the array and returns a true or false.

So our filter() method will go through each item in our newArr and then check, using includes(), if the item is not in arr1 or arr2. If it returns (true), that will mean the item is only in one of the arrays, which is what we want. So if it works correctly, each true value will be in an array.

Array.includes()

newArr.filter(item => !arr1.includes(item) || !arr2.includes(item))
// We're filtering the item if is NOT in arr1 OR it is NOT in arr2

So, to sum it up:

  • Combine arr1 and arr2 into a new array, newArr, using concat()
  • On newArr, run filter()
  • In filter() method, check if each item is not in arr1 OR not in arr2 using includes()
  • Return newArr

Our Solution

⚠️
⚠️ Answer Below
⚠️

function diffArray(arr1, arr2) {
  let newArr = arr1.concat(arr2);
  return newArr.filter(item => !arr1.includes(item) || !arr2.includes(item));
}

Links & Resources

'Diff Two Arrays' Challenge on fCC

freeCodeCamp

Donate to FCC!

Solution on my GitHub

Thank you for reading!

Solving freeCodeCamp's Algorithm Challenges (37 Part Series)

1) FCC Algorithm Challenges / Convert Celsius to Fahrenheit 2) FCC Algorithm Challenges / Reverse a String 3 ... 35 3) FCC Algorithm Challenges / Factorialize a Number 4) FCC Algorithm Challenges / Find the Longest Word in a String 5) FCC Algorithm Challenges / Return Largest Numbers in Arrays 6) Solving "Confirm the Ending" / FreeCodeCamp Algorithm Challenges 7) Solving "Repeat a String Repeat a String" / FreeCodeCamp Algorithm Challenges 8) Solving "Truncate a String" / freeCodeCamp Algorithm Challenges 9) Solving "Finders Keepers" / freeCodeCamp Algorithm Challenges 10) Solving "Boo who" / freeCodeCamp Algorithm Challenges 11) Solving "Title Case a Sentence" / freeCodeCamp Algorithm Challenges 12) Solving "Slice and Splice" / freeCodeCamp Algorithm Challenges 13) Solving "Falsy Bouncer" / freeCodeCamp Algorithm Challenges 14) Solving "Where do I Belong" / freeCodeCamp Algorithm Challenges 15) Solving "Mutations" / freeCodeCamp Algorithm Challenges 16) Solving "Chunky Monkey" / freeCodeCamp Algorithm Challenges 17) Solving "Sum All Numbers in a Range" / freeCodeCamp Algorithm Challenges 18) Solving "Diff Two Arrays" / freeCodeCamp Algorithm Challenges 19) Solving "Seek and Destroy" / freeCodeCamp Algorithm Challenges 20) Solving "Wherefore art thou" / freeCodeCamp Algorithm Challenges 21) Solving "Spinal Tap Case" / freeCodeCamp Algorithm Challenges 22) Solving "Pig Latin" / freeCodeCamp Algorithm Challenges 23) Solving "Search and Replace" / freeCodeCamp Algorithm Challenges 24) Solving "DNA Pairing" / freeCodeCamp Algorithm Challenges 25) Solving "Missing letters" / freeCodeCamp Algorithm Challenges 26) Solving "Sorted Union" / freeCodeCamp Algorithm Challenges 27) Solving "Convert HTML Entities" / freeCodeCamp Algorithm Challenges 28) Solving "Sum All Odd Fibonacci Numbers" / freeCodeCamp Algorithm Challenges 29) Solving "Sum All Primes" / freeCodeCamp Algorithm Challenges 30) Solving "Smallest Common Multiple" / freeCodeCamp Algorithm Challenges 31) Solving "Drop it" / freeCodeCamp Algorithm Challenges 32) Solving "Steamroller" / freeCodeCamp Algorithm Challenges 33) Solving "Binary Agents" / freeCodeCamp Algorithm Challenges 34) Solving "Everything Be True" / freeCodeCamp Algorithm Challenges 35) Solving "Arguments Optional" / freeCodeCamp Algorithm Challenges 36) Solving "Make a Person" / freeCodeCamp Algorithm Challenges 37) Solving "Map the Debris" / freeCodeCamp Algorithm Challenges

Posted on by:

virenb profile

Viren B

@virenb

Self-taught developer, always looking to learn more.

Discussion

markdown guide