How To Use the .find() Method on Arrays in JavaScript

Hello!! First of all, welcome to my blog. I'm relatively new to programming, so I'm beginning to use this space to explain concepts to myself – which will hopefully have the added benefit of helping you understand certain concepts as well!

That said, we can jump into one of my most recent nightmares, the .find() method for arrays in Javascript.

The Basics: What Does .find() Do?

As the name suggests, the .find() method does exactly what you would expect it to: it looks through an array and finds a specific value. If there's more than one value in the array with the value that you're looking for, the .find() method will only return the first one that it finds in the array. This is an important factor to keep in mind because even if there are other matching values in the array that you might want to find/access, the .find() method is ONLY going to return the first one that it sees.

Using the .find() Method to find a Value in an array of Restaurants:

Let's start with a simple example. First, let's create an array of objects called restaurants. In each object, we have a restaurant's name, the type of cuisine they serve, along with a rating for that restaurant (out of 5 stars total).

const restaurants = [
    {
        name: "TacoNation",
        cuisine: "Mexican",
        ratingOutOf5: 4.5,
    }, 
    {
        name: "Sakura",
        cuisine: "Japanese",
        ratingOutOf5: 5,
    }, 
    {
        name: "Taco Bell",
        cuisine: "Mexican",
        ratingOutOf5: 2,
    }, 
    {
        name: "Little Italia",
        cuisine: "Italian",
        ratingOutOf5: 4,
    },
    {
        name: "Yummy Spaghetti Palace!",
        cuisine: "Italian",
        ratingOutOf5: 1,
    },
    {
        name: "Thai Basil",
        cuisine: "Thai",
        ratingOutOf5: 5,
    }
]

Let's find the best restaurant (the restaurant with the highest rating, which in this case is 5) and console.log() that object.

It's going to look through restaurants, and once the value returns true, it's going to return that object.

We'll start by creating a variable that we'll call bestRestaurant -- that's where we'll store the object that will eventually contain the first restaurant that has 5 stars. Then, we're going to use restaurants.find() to find a specific value in the array, which in this case, we want to be a rating of 5 stars. More simply, think of that line as saying "Within the array restaurants, find the first restaurant that has a 5-star rating".

 const bestRestaurant = restaurants.find((restaurant) => {
    return restaurant.ratingOutOf5 === 5
})

console.log(bestRestaurant) // => {name: "Sakura", cuisine: "Japanese", ratingOutOf5: 5}

For this example, that's going to log the Sakura restaurant object, since that's the first object in the array that has 5 stars. Note that even though the "Thai Basil" restaurant has a 5 ratingOutOf5, it doesn't get logged because it comes later on in the array.

Let's take this one step further and actually make use of the variable bestRestaurant.

const whereToEat = `Tonight I want to eat at ${bestRestaurant.name}.`

console.log(whereToEat) // => `Tonight I want to eat at Sakura.`

Sweet! Here, we're using the returned object of bestRestaurant and specifically using its name value to log the sentence of where we should eat tonight.

Conclusion

The .find() method in JavaScript can be a powerful tool when you're trying to find and retrieve specific values from an array. If you're still confused by the topic, continue to research, watch videos, and experiment with the method yourself until you begin to feel more confident in using it. And, as always, remember to code a little bit every day! :)