Solving "Drop it" / freeCodeCamp Algorithm Challenges
Tags: freecodecamp, algorithms, challenge, javascript
Published: 2020-07-31 01:14:45

---
title: Solving "Drop it" / freeCodeCamp Algorithm Challenges
published: true
description: My guide, notes, and solution to freeCodeCamp's intermediate algorithm challenge, "Drop it" 
tags: #freeCodeCamp, #algorithms, #challenge, #javascript
canonical_url: https://virenb.cc/fcc-031-drop-it
series: Solving freeCodeCamp's Algorithm Challenges
---

!['Drop it'](//images.ctfassets.net/yzwpq1epaq68/1zIvTLf2PxrGIoP7M1KDeA/987083488ff3ed20748c19ad4ad010b3/ss-031.png)

Let's solve freeCodeCamp's intermediate algorithm scripting challenge, 'Drop it'.



### Starter Code

```javascript
function dropElements(arr, func) {
  return arr;
}

dropElements([1, 2, 3], function(n) {return n < 3; });
```



### Instructions

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.



### Test Cases

- `dropElements([1, 2, 3, 4], function(n) {return n >= 3;})` should return `[3, 4]`.
- `dropElements([0, 1, 0, 1], function(n) {return n === 1;})` should return `[1, 0, 1]`.
- `dropElements([1, 2, 3], function(n) {return n > 0;})` should return `[1, 2, 3]`.
- `dropElements([1, 2, 3, 4], function(n) {return n > 5;})` should return `[]`.
- `dropElements([1, 2, 3, 7, 4], function(n) {return n > 3;})` should return `[7, 4]`.
- `dropElements([1, 2, 3, 9, 2], function(n) {return n > 2;})` should return `[3, 9, 2]`.



# Our Approach

After reading the instructions, starter code, and test cases more than once, this is what we're working with:

- Our function takes in two arguments, an array (`arr`), and a function (`func`). `arr` consists of numbers. 

- We must return an array.

- We want to alter `arr` based on the constraints of `func`, then return `arr`.

  

I had to read the instructions a few times to get a better idea of what the challenge was actually asking for. We want to work with `arr`, and remove each index until we come across a truthy index. So let's explore one of the test cases first off:



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



So, based on the arguments, we want to evaluate `arr` with `func` and keep the values that are greater than or equal to 3. Seems some what straight forward. Let's look at the last test case provided though:



```javascript
dropElements([1, 2, 3, 9, 2], function(n) {return n > 2;}) // should return [3, 9, 2].
```



We want values greater than two so why is [2] being returned? Have a read at the below instruction:



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



So once we hit something truthy, we'll return all the following elements. This is a more clear example:



```javascript
dropElements([8, 1, 2, 3], function(n) {return n > 3; });

// On arr[0], we have 8. 8 is greater than 3. Even though 1 and 2 are not greater than 3, arr[0] has already met the constraint from the function so we return the rest of the elements.
```



Alright, hopefully the instructions are making a little more sense now. Let's get into the code.



The first thing I will do is set a variable equal to `arr`'s length so we know how many times to loop.



```javascript
const arrLength = arr.length;
```



I think it is time for the `for` loop. 



```javascript
for (let i = 0; i < arrLength; i++) {}

// We'll start i at 0 since array's index begins at 0
```



The next thing we'll need is an `if` statement to see if each index meets the constraint provided in the second argument, `func`. `func` takes in one argument, `n`. We can use `arr[0]` as `func`'s argument each loop to see if it will meet the constraint.



```javascript
for (let i = 0; i < arrLength; i++) {
  if (!func(arr[0])) {
    // more code coming
  }
}
```



Above, I'm using `arr[0]` instead of `arr[i]` because of the code we will be putting inside the `if` statement. If `func(arr[0])` is false, we will remove it, right? Enter the array method, `shift()`. `pop()` or `push()` are common but here we want to remove elements from the beginning of the array and that is what `shift()` does for us.



[Array.shift() on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift "MDN Docs: shift()")



```javascript
for (let i = 0; i < arrLength; i++) {
  if (!func(arr[0])) {
    arr.shift();
  }
  else {
    return arr;
  }
}
```



So let's try this step by step with one of our test cases:



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

const arrLength = arr.length // 4
for (let i = 0; i < arrLength; i++) {
  if (!func(arr[0])) {
    arr.shift();
  }
  else {
    return arr;
  }
}

// Loop 1: arr[0] = 1; is not greater or equal to 3. shift() run
// Loop 2: [2,3,4]; arr[0] = 2; not greater or equal to 3. shift() run
// Loop 3: [3,4]; arr[0] = 3; 3 is greater than or equal. return arr
```



As always, return `arr` and that is it!



# Our Solution

```javascript
function dropElements(arr, func) {
  const arrLength = arr.length;
  for (let i = 0; i < arrLength; i++) {
    if (!func(arr[0])) {
      arr.shift();
    }
    else {
      return arr;
    }
  }
  return arr;
}
```



# Links & Resources

['Drop it' Challenge on fCC](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it "Intermediate Algorithm Scripting: Drop it on fCC Website")

[freeCodeCamp](https://www.freecodecamp.org/, "freeCodeCamp")

[Donate to FCC!](https://www.freecodecamp.org/donate "fCC Donation Page")

[Solution on my GitHub](https://github.com/virenb/fcc-algorithms/blob/master/031---drop-it.js "GitHub Solution")



Thank you for reading!