Lodash _.find collection method examples with vanilla js alternatives.
1 - lodash find method and alternatives
2 - Lets get started with _.find and Array.find
2.1 - Native Array.find overview
In this example I just have a simple array of primitives. I which to just find the first element in the array that is a number. I just need to use the typeof operator when making an expression that will return true when an element is found that is a number. In more complex situations involving arrays of objects for example the function that I pass might be a bot more complex, but you get the basic idea.
2.2 - Array.find with Array like objects
It also works well with array like objects when used with call. If you are not aware of what array like objects are they are it is a term that if often used to describe an object that is formated very much like an Array in that all of the object keys are numbers, and it has a length property. However the so called array like object is not an instance of the Array constructor so it does not have Array prototype methods associated with it.
2.3 - Lodash _.find will work with Arrays, Array like Objects and plain old objects in general as well.
However _.find is a collection method, not an Array prototype method like that of the native arry find method. So in addition to working just fine with Arrays _.find works with plan old objects as well, even if they are not array like. So if I pass an object with named public keys, I can then pass a function to return a value that meets a condition and it will return the value. For example say I just want to know the first number in an object that can be done with the lodash find method.
3 - What a collection is, and basic example
The lodash _.find method works not just with Arrays but also any object, so _.find is considered one of the many collection methods in lodash. So find can help solve that problem when it comes to choosing between using Arrays and plain old Objects, as in any case I can use _.find to get at what I want in an Object of any kind, not just an Array.
So the first argument that is given to _.find is a collection, which can be an Array, an Array like object, just a plain old Object, and even Strings.
4 - The iteration method
The second argument that is given to _.find is an iteration method, or some kind of short hand for such a method. This method can have three arguments, the first of which is the current element in the collection that is being looked at. In addition the second argument is the current index, and the last argument is a reference to the collection that was given.
In the body of the iteration method, if what is returned by the method evaluates to true then, then that will count as the element being found.
5 - Custom iteration methods and lodash method shorthands
As shown above I can make my own methods that are used to define the terms of whether or not an element in a collection is what it is that I am looking for. I can of course make a method that returns a iteration method that _.find can use. However I might not even have to do that if such a method is in lodash to begin with, and there are even some shorthands that can be used in _.find that allow for me to not even have to call the lodash method directly.
In addition to shorthands for _.property there are also shorthands for _.matches _.matchesProperty.
6 - FromIndex example
The lodash find method can accept a third argument that is the index where to start looking in the collection if the collection is an array rather than a object with named keys. This is another feature that is missing in the native array find method that warrants a need to use some other kind of solution in which I can set a starting index value. So then for more than one reason the lodash find method is a little more versatile than its native counterpart.
7 - Finding an Object in an Array, a basic usage example of _.find
So _.find will help with returning an element in an array, rather than it’s index. So if you have an array of objects and you want to find a single object in the array by a certain key value pare _.find is the right tools for the job. In this example I have an array of objects where each object has a name property that contains a string that is a name of a person. I can pass an object that contains the name I want to find, and the returned full result is the full object in the array with all the additional info for that name.
You do not have to give an object, you can also use a function like this.
8 - Using _.find to find the index of an element in an Array, or the key of a property in an Object.
In lodash there is the _.findIndex method, that works just fine with Arrays, as it is an Array method. However it will not work with Objects in general, as it is not a collection method. It is possible to use _.find to get the index of an element in an Array, or the key of a property in any Object. As you might have read earlier in this post the second argument that is given in the iteration method is the index, or key value if it is a plain Object.
9 - Using _.find on an array of primitives, and a single primitive.
Find is fairly robust, of course it can be used with an array of primitives. However it can also be used with a single string primitive as well.
However _.find can be used on a single stand alone String as well. The reason why is that a although a string is a primitive it can be treaded as a collection of characters.
10.1 - Using a for in loop
Making a basic find method with for in might look something like this:
The find method can then be used on an array of objects.
Or just a plain old object by itself than can be thought of as a kind of associative array.
10.2 - Using Object.keys
Another approach to making a find method might be to use an Object static method like Object.keys which can be used to get an array of key names of any object. The key names will be any public key of the object that is passed to it. This array can then be looped over, and a condition can be used to find out if this is an example of something that is to be found.
10.3 - Using array.sort to find one or more in an array
So there is also the Array.sort native array prototype method that can be used as a vanilla js alternative to the lodash find method. So when it cokes to using this there is the idea of just finding one object in an array of objects, but then there is also the idea of ranking things by some kind of process. Then once the ranking process is done, take the first element in the results of that process, or even the first few results as well maybe.
Say you have an array of text examples and you want to sort them with respect to the relevance of a certain search term such as well, how about lodash find. The array.Sort method can be used with some additional logic to rank all the text examples and then just take the first result if you only want to find the most relevant example based on that process.
11 - Conclusion
I have updated this post a few times now, and I will likely update this post again in the future once again at some point. If you are in the mood check out my other posts on lodash.