JavaScript’s Array find() method allows you to find the first element that matches logic provided by you.
When you have an array of values, it’s likely that you might need to find an element in that array. In particular, you might want to know which element in this array meets a certain criterion. Well, the criteria are up to you. For example, if your array contains numbers, you may want to know how many of the elements in that array have a value higher than a certain amount. Well, in this article I’ll demonstrate the JavaScript Array find() method, which provides a straightforward way to confront this problem.
Iterating an array usually requires counting. This makes sense, because in order to “do something” with every element in the array, you have to know how many elements are in there (i.e. the array’s “length”). Then you have to keep track as you count up to (or down from) the length of the array. This approach is perfectly valid, but it comes with problems.
The first problem is that setting up a loop of any kind creates boilerplate code, then you need a counter (i.e. “i” or “j”), and finally, you need logic that uses the value of your counter to determine whether or not your target elements have been found. Just discussing this in a “pseudocode” context is tedious, and writing the actual code is even more so. But the JavaScript Array find() method solves this problem, as it removes the need for tedious boilerplate code.
Using a while-loop – Example # 1
See the Pen Array.prototype.find() – Challenge by Kevin Chisholm (@kevinchisholm) on CodePen.
The tedious boilerplate code we discussed above is exactly what you find in Example # 1. We’re using a while-loop to iterate over the someNumbers array. On each iteration of the loop, we use the value of “i” to examine the currently iterated array element and determine if it meets the criteria for our search. This code is valid and it works, but it’s less than optimal.
Using the Array find() method – Example # 2
See the Pen Array.prototype.find() – Solution by Kevin Chisholm (@kevinchisholm) on CodePen.
In Example # 2, we use the Array find() method to eliminate the problems introduced in the previous example. We’ve passed an anonymous function to the Array find() method, and this method takes the currently iterated element as its first argument. Inside of this anonymous function, we provide some logic that determines the currently iterated array element, then we decide whether or not it meets the criteria for our search. The first big benefit here is that we’ve removed the “while” loop. Also, we no longer have the “i” variable. These may seem like small details, but every variable takes up memory, and has scope.
As we know, JavaScript scope is controlled by functions, or blocks. So, for any variable we use, we need to either create a function to control its scope, or carefully initialize that variable in the right function. So the main benefits of the Array find() method are the simplified syntax in which verbose boilerplate code has been removed, and working with our more elegant JavaScript, which is easier to follow.
