Re-creating the Lodash Library: Trouble Understanding How The _dropWhile Method Works

I’ve been spending the past couple of days working on the project “Re-creating the Lodash Library,” found here.

It was going smoothly up until step 35, when it was time to implement the _dropWhile method. The method is meant to take 2 arguments, an array and a function, and iterate through the array dropping elements until the provided function returns falsey. After failing to come up with my own way to implement the method I did some Googling and found that the following code works:

dropWhile(array, func) {
        const cb = (element, index) => {
            return !func(element, index, array);
        }
        let dropNumber = arr.findIndex(cb);
        let droppedArray = this.drop(array, dropNumber);
        return droppedArray;
}

However I still don’t completely understand why it works. Specifically, I don’t understand where element and index are “coming from,” or how the code knows what they are. The only info that would be provided when calling the method are the array and the function so I don’t understand how element and index are provided to the callback function.

Any help understanding this is appreciated, I’ve been racking my brain for a while now trying to figure it out.

arguments to a function come from the caller of the function, so where does it get called?

1 Like

I’d wager this is a common occurrence when simply Googling for a solution to a problem you cannot solve on your own.

The solution you’ve found is probably a lot more efficient than the method I imagine most learners here would apply, though some might arrive at this implementation on their own I’m sure.

If you’re stumped about where element and index come from, I would encourage you to revisit the lessons on Higher Order Functions and Iterators as this is what you’re working with here.

Alternatively, one could take a look at the Mozilla documentation for the function your code revolves around and see why it works in the way it does. :slight_smile:

2 Likes

That code contains what is presumably a typo, that will throw a reference error.

arr is undefined.

That’s kind of an aside to your question, but worth noting in case you try to run the code as is.

Oh yeah, that was a silly mistake on on part. When I originally wrote the code I used arr as the parameter for _dropWhile, but when I posted it here in the forums I tried to change all of the arr’s to array to make the code more understandable, but I guess I missed one haha.

Okay so after reviewing the findIndex() documentation like you suggested, and thinking more about how the _dropWhile method works, I think I might’ve worked it out.

If I’m not mistaken this is done because the function (represented by the parameter func in the code I originally provided) is passed to the findIndex() method, and called within the method as a callback function. Because findIndex() can accept a callback function with three parameters we make sure that our callback function has three parameters. So if the function passed to _dropWhile has three parameters those three parameters will represent element, index, and array respectively.

However it could be passed a function with a single parameter since the index and array parameters are optional for findIndex(). I think part of my confusion arose from the Lodash Library Documentation only showed _dropWhile() being called with a single parameter.

Hopefully that makes sense. If any of that isn’t right please let me know.

Close.

In the solution you found, your callback function for .findIndex() accepts only two parameters: element and index.

The function which is passed in to dropWhile(), however, is being called with those three parameters from inside the callback function, but it is not itself the callback function.

I think, but don’t quote me, that anything other than element is optional in the callback functions for array iterators.

All the examples on that page show dropWhile() being used with two parameters, as far as I can tell?