Explanation: Intermediate Algorithm Scripting: Drop it

JavaScript
1

Tell us what’s happening:
If Array.shift() removes first element from an arrray then how is it working here ? Can someone explain it at every iteration by using this example ( dropElements([1, 2, 3], function(n) {return n < 3; }); )

Your code so far


function dropElements(arr, func) {
  // Drop them elements.
  for(var i=0; i<arr.length; i++){
    if(func(arr[0])){
      break;
    }else{
      arr.shift();
    }
  }
  return arr;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it

2

The challenge is to drop the elements from the array until the function is true, so running shift over and over while the function is true will just keep dropping the first element each time - for your example, anything less than 3:

[1,2,3]
1 is less than 3, shift
[2,3]
2 is less than 3, shift
[3]
3 is not less than 3, break, return [3]

Edit: should have been

so running shift over and over while the function is false

3

You said when function is not true, then break the loop,i.e., 3 is not less than 3 then break.

But the quoted code above shows that if function is true, then break

4

Three is not less than 3, so the function is true, so break??

…drop the elements from the array until the function is true

5

Ah, I see, that was a mistype. But if you knew that, and understand when the function breaks, I’m not sure where you’re getting stuck?

6

This is not about the solution. I am just trying to understand that how Array.shift() is working in the loop here. It is still confusing for me.

The basic code solution for this challenge is below:

function dropElements(arr, func) {
// drop them elements.
var times = arr.length;
for (var i = 0; i < times; i++) {
if (func(arr[0])) {
break;
} else {
arr.shift();
}
}
return arr;
}

If we apply the below test based on this solution:

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

then let’s break it into parts…
[1,2,3]
1 is less than 3 = true ,then break
Since the statement break then again the array will be [1,2,3] , is it right ?

7

Ah, I’m really sorry, I’ve messed up.on my code. That function should return [1,2,3], as you say it returns true for the first element (1 is less than 3), so loop stops, array gets returned as-is with no elements dropped.

Loop runs for the length of the original array, if the function returns true on the current first element of the array it breaks, if it doesn’t then it removes the first element in the array. It’s a complicated way to do it because it modifies the incoming array as it’s being looped over.

1 Like
8

Now, I understand it. What made it confusing was the var times ,because it seems that the loop is running (arr.length - 1) times, but it is not checking the condition for all elements in the array. The loop breaks as soon as any element meet the condition true.

Hence, If array is [1,2,4] and condition is function(n) {return n < 3} ,it will return [1,2,4] even if 4 is not less than 3.

9

Yea times is just there because the length of the array changes, so using array.length in the loop would generate incorrect results most times due to it missing out values.