Mastering The JavaScript Find() Method
Tags: javascript
Published: 2022-12-19 20:11:55

---
title: Mastering The JavaScript Find() Method
published: true
date: 2022-12-14 09:59:42 UTC
tags: ['JavaScript']
canonical_url: https://byrayray.dev/posts/2022-12-14-mastering-javascript-find-array-method
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nw7f461uupn3n1s9x8yb.png
---

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.

**_Originally published on_** [**_ByRayRay.dev_**](https://byrayray.dev/posts/2022-12-14-mastering-javascript-find-array-method) **_._**

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find))

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.

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## Find a string in an array

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

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

```

_Check_ [_runkit example_](https://runkit.com/devbyrayray/how-to-find-string-in-javascript-array-with-find-method)_._

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.

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## Find a number in an array

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

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

```

_Check_ [_runkit example_](https://runkit.com/devbyrayray/how-to-find-number-in-javascript-array-with-find-method)_._

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.

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## 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](https://www.npmjs.com/package/is-between-js) and [GitHub](https://github.com/devbyray/is-between-js) 😉

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

const projects = [
    {
        startDate: '2022-11-26',
        endDate: '2023-11-26',
        title: 'Build an API',
        type: 'Development',
    },
  {
        startDate: '2022-11-26',
        endDate: '2023-11-26',
        title: 'Build Frontend',
        type: 'Development'
    },
  {
        startDate: '2023-03-05',
        endDate: '2024-03-26',
        title: 'Create marketing content',
        type: 'Marketing'
    },
  {
        startDate: '2022-11-26',
        endDate: '2024-03-26',
        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()))

```

_Check_ [_runkit example_](https://runkit.com/devbyrayray/find-a-object-property-value-in-a-javascript-array)_._

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 👍

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png)

## Thanks!

![hashnode-footer.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629789655319/nBF6anHH4w.png)

_After reading this story, I hope you learned something new or are inspired to create something new! 🤗 If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode._

> Did you know that you can create a [Developer blog like this one, yourself](https://hashnode.com/@devbyrayray/joinme)? It's entirely for free. 👍💰🎉🥳🔥

_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_](https://twitter.com/@devbyrayray) _when you want to keep it private. My DM's are always open 😁_