Back

Mastering The JavaScript Find() Method

#javascript
Mastering The JavaScript Find() Method

Searching specific values in arrays is easy with the JavaScript find() method. It doesn't matter if you want to find a string, number, boolean, or property of an object in an array. In this post, I will show you how to find values very easily.


The find() method

The find() Array method in JavaScript is super easy to use. The method returns the first item in the array that matches your condition. (check the documentation on MDN Web Docs)

In the find method, you pass an Arrow function with a parameter that will be equal to each item in the array. Internally the find() method will loop through all the items in the array trying to find your search value.

In the arrow function, we check if student is equal to 'Jake' or 'Rob'. It will return the string immediately when the value is found. It will return undefined when the value isn't found.

Find a string in an array

js
const students = [
    'Jake',
    'Ray',
    'Lisa',
    'Isabella',
    'Tom',
    'Kevin',
    'Armin'
]

students.find((student) => student === 'Jake'); // Returns 'Jake'
students.find((student) => student === 'Rob'); // Returns undefined

Try it on RunKit

Now we are searching for 'Jake' in the students array. This method will return 'Jake' when it is found. When we search for 'Rob', it will return undefined because 'Rob' is not in the array.


Find a number in an array

js
const numbers = [
    5000,
    538,
    78123,
    2,
    45,
    34097
]

numbers.find((number) => number === 538); // Returns '538'
numbers.find((number) => number === 1); // Returns undefined

Try it on RunKit

Now we are searching for 538 in the numbers array. This method will return 538 when it is found. When we search for 1 it will return undefined because 1 is not in the array.


Find an object property value in the array.

When you want to find a property value in an array of objects, it is as easy as with singular values. In the example below, we try to find the first project with the type of 'development'. With the second example, we try to find a project where '2024-01-27' is between the startDate and the endDate.

A few years ago, I created a package is-between-js for my personal usage. You can calculate if a specific value is between a minimal and a maximum number. You are free to use it because it's free on NPM and GitHub πŸ˜‰

js
import { isBetween } from "is-between-js";
const dateNumber = (date) => new Date(date).getTime();

const projects = [
    {
        startDate: '2022-11-26',
        endDate: '2023-11-26',
        layout: article
navigation: false
title:  'Build an API',
        type: 'Development',
    },
  {
        startDate: '2022-11-26',
        endDate: '2023-11-26',
        layout: article
navigation: false
title:  'Build Frontend',
        type: 'Development'
    },
  {
        startDate: '2023-03-05',
        endDate: '2024-03-26',
        layout: article
navigation: false
title:  'Create marketing content',
        type: 'Marketing'
    },
  {
        startDate: '2022-11-26',
        endDate: '2024-03-26',
        layout: article
navigation: false
title:  'Project management',
        type: 'Management'
    },
]

console.log(projects.find((project) => project.type.toLowerCase() === 'development'))
console.log(projects.find((project) => isBetween(dateNumber('2024-01-27')).min(dateNumber(project.startDate)).max(dateNumber(project.endDate)).calc()))

Try it on RunKit

You can check if a property value equals a value by returning this with the arrow function project.type === 'value'. In this case, we modify the string to lowercase characters in the example above to match even though the capitalization isn't equal.

In the example above, we compare a few property values in the isBetween function, which returns a boolean to the find method. It's that easy!

As you've seen, you can find values of every data type in a JavaScript array. It is not difficult to learn JavaScript; just practice practice, and practice πŸ‘


Thanks

After reading this post, I hope you learned something new or are inspired to create something new! πŸ€—

If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a DM on Twitter @DevByRayRay when you want to keep it private. My DM’s are always open 😁.

Suggestions

Mastering The JavaScript Includes() Method

Learn how to use the includes() method in JavaScript to search an array and return a boolean value indicating whether a specific value is present. Quick and easy guide for beginners."

#javascript

How To Sum Total From Array Of Object Properties With JavaScript Reduce Method

Calculating the total price for your shopping cart was a hassle in the days before the JavaScript reduce method. In this post, I will show you how easy it is to use the reduce method to calculate the total price of a product array in the shopping cart. The JavaScript reduce method is powerful and can calculate a total price based on an array of object properties.

#javascript

Mastering The JavaScript Find() Method

Searching specific values in arrays is easy with the JavaScript `find()` method. It doesn't matter if you want to find a string, number, boolean, or property of an object in an array. In this post, I will show you how to find values very easily. The find() Array method in JavaScript returns the first item in the array that matches your condition.

#javascript