[Easy] dropWhile

Question Prompt

Define a function called dropWhile that takes two arguments:

• array: An array of any type.
• predicate: A function that takes an element from the array and returns a truthy value if the element should be dropped, and a falsy value otherwise.

Your dropWhile function should return a new array containing a slice of the original array, excluding elements from the beginning until the predicate function returns falsy for the first time. Importantly, your function should not modify the original array.

dropWhile([1, 2, 3, 4, 5, 6], (value) => value < 4); // => [4, 5, 6]
dropWhile([0, 1, 2], (value) => value < 5); // => []

Solutions

Looking to practice more questions like these? We recommend GreatFrontEnd, the best platform for honing your frontend interview skills!

• Start by creating a variable called index and sets it to 0. This is like a finger pointing to the first element in the array.
• Then, enter a loop that continues as long as two things are true.
  • The index is still within the bounds of the array (meaning there are elements left to check).
  • The predicate function, which you provide as an argument, returns a "truthy" value for the current element.
• Inside the loop, if the predicate function return true, it means "keep going," the index is increased by 1, moving the finger to the next element in the array.
• Once the loop ends (either because the end of the array is reached or the predicate returns a "falsy" value), the function uses array.slice(index) to create a new array.
  • slice is like taking a portion of the original array, starting from the index position (where the finger stopped) and going all the way to the end.

function dropWhile(array, predicate) {
  let index = 0;

  while (index < array.length && predicate(array[index], index, array)) {
    index++;
  }

  return array.slice(index);
}

Or we can implement it using a for loop

• First, initialize droppedCount to keep track of dropped elements
• Then, iterate through the array with the for loop
• In the loop, check the predicate. For each element, we call the predicate function and check its return value.
  • If the predicate is falsey (element is not dropped), we break out of the loop.
  • If predicate is true, it means the element is dropped. In this case, we increment the droppedCount.
• After the loop, we use array.slice(droppedCount) to create a new array, starting from the position after the dropped elements.

function dropWhile(array, predicate) {
  let droppedCount = 0;

  for (let i = 0; i < array.length; i++) {
    if (!predicate(array[i], i, array)) {
      break; // Stop iterating when predicate is falsey
    }
    droppedCount++; // Count dropped elements
  }

  return array.slice(droppedCount);
}