Drop It - JavaScript Solution & Walkthrough

15/21 Drop it

Given the array arr, iterate through and remove each element starting from the first element (the 0 index) until the function func returns true when the iterated element is passed through it.

Then return the rest of the array once the condition is satisfied, otherwise, arr should be returned as an empty array.

Credit: FreeCodeCamp.org

Understanding the Challenge

The dropElements function takes two parameters. An array arr and a function func.

We're told to iterate through the array. For each iteration, we have to pass the element as a parameter to the given function func.

And we keep iterating through the array until we get to a number that returns true when passed to func.

When we get a number that returns true, then all numbers in the array that comes before that number should be removed. Then return the rest of the array.

For example, let's see one of the test cases below.

dropElements([1, 2, 3, 4], function(n) {return n >= 3;}) 

should return [3, 4]

This test case takes an array of numbers from 1 to 4. And a function that returns the condition n >= 3.

The first number in the array that satisfies the condition is 3. So the function deletes all numbers that come before 3. Leaving only [3, 4]

Let's see one more test case before we start solving the challenge.

dropElements([1, 2, 3, 4], function(n) {return n > 5;}) 

should return []

Why does the second test case return an empty array? Because none of the numbers in the array satisfies the condition in the function.

Pseudocode

1. Given an array (arr) and a function (func)
2. Loop through the given array (arr)
3. For each iteration
    3a. Check if func returns true when the number is passed as a parameter 
    3b. - If it does, return an array that contains
       the number and all numbers that comes after it
    3c. - if it returns false, repeat steps 3b and 3c.
4. If none of the numbers returns true,
      return an empty array.

Solving the Challenge

First let's define two variables, initialArray and finalArray.

  let initialArray = arr
  let finalArray = []

Assing the given array to the initialArray variable. finalArray is the array we will return from our function.

The next step is to loop through the array. And find the first number that returns true when passed to func.

To do that we can use .find(). The .find() method returns the first item in an array that returns true to a given condition. If no item in the array returns true to the condition, .find() will return undefined.

const trueNum = initialArray.find(num => func(num))

The trueNum variable will be one of two things. It will be a number (the first number that returns true when passed to func). Or it will be undefined(when none of the numbers returns true).

If trueNum is undefined, then our work is done. We return finalArray which is an empty array.

  if (trueNum === undefined) {
    return finalArray
  }

If trueNum is not undefined, then it's a number in the array. In that case, we should do 2 things.

Find the index of trueNum.
Return an array of trueNum and all the numbers that come after it.

To find the index of trueNum, we can use .indexOf(). This is a method that returns the index of the first instance of the element passed to it.

  let trueNumIndex = initialArray.indexOf(trueNum)

Now we'll loop through our initialArray. And push into the finalArray all numbers whose index are equal to or greater than trueNumIndex.

    for(let i = 0; i < initialArray.length; i++) {
      if (i >= trueNumIndex) {
        finalArray.push(initialArray[i])
      }
    }

We can return finalArray which is now made up of trueNum and all the numbers that come after it in our initialArray.

Our dropElements() function is now complete!

Final Solution

function dropElements(arr, func) {
  let initialArray = arr
  let finalArray = []

  const trueNum = initialArray.find(num => func(num))

  if (trueNum === undefined) {
    return finalArray
  } 
    else {
    let trueNumIndex = initialArray.indexOf(trueNum)

    for(let i = 0; i < initialArray.length; i++) {
      if (i >= trueNumIndex) {
        finalArray.push(initialArray[i])
      }
    }
    return finalArray
  }
}

Congratulations

You just cracked the 15th challenge in this series.

congratulations 001.gif

Cheers and happy coding!