JavaScript ES6 by Example — Array.find() & Array.findIndex()

Array.find() and Array.findIndex() are two new methods in JavaScript ES6. They make searching arrays more easier than before without writing cumbersome code and loops.

Let's see them in more details with simple examples.

The Array.find() Method by Example

The Array.find() method is used to search for the first element in the array that verifies the passed predicate.

Let's take this simple example of an array of numbers:

let myArr = [9, 3, 2, 4, 9, 11, 19];

myArr.find((v)=>{
    return  v % 2 === 0;
});

In this example, we are looking for the first even number (can be divided by zero) in the array. In this case, this will return 2.

the find() method calls the (v)=>{ return v % 2 === 0;} predicate for each element in the array until the predicate returns true. In this case the element is returned. If no element is found, undefined is returned.

Note: A predicate is simply a function that returns a boolean value i.e true or false.

The Array.findIndex() Method by Example

The findIndex() method is quite similar to the find() method but returns the index of the element instead of the element itself.

It takes a predicate and returns the index of the first element in the array that satisfies the predicate. If no element exists -1 is returned.

Let's take the previous example:

let myArr = [9, 3, 9, 4, 9, 11, 19];

let ind = myArr.findIndex((v)=>{
    return  v % 2 === 0;
});    

if(ind !== -1) {
      console.log("There exists at least one even number in the array: ", myArr[ind])
}

Instead of returning 4, the findIndex() method returns its index which is 3.

We save the index in the ind variable then we check if it's different than -1. In this case, we display There exists at least one even number in the array: in the console along with the element corresponding to the returned index.

Wrap-up

We've seen examples of using ES6 Array.find() and Array.findIndex() method which provides easy ways to search for an element in JavaScript arrays.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status