Search object in array javascript

The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

Try it

  • If you need the index of the found element in the array, use findIndex().
  • If you need to find the index of a value, use indexOf(). (It's similar to findIndex(), but checks each element for equality with the value instead of using a testing function.)
  • If you need to find if a value exists in an array, use includes(). Again, it checks each element for equality with the value instead of using a testing function.
  • If you need to find if any element satisfies the provided testing function, use some().

Syntax

// Arrow function
find((element) => { /* … */ } )
find((element, index) => { /* … */ } )
find((element, index, array) => { /* … */ } )

// Callback function
find(callbackFn)
find(callbackFn, thisArg)

// Inline callback function
find(function(element) { /* … */ })
find(function(element, index) { /* … */ })
find(function(element, index, array){ /* … */ })
find(function(element, index, array) { /* … */ }, thisArg)

Parameters

callbackFn

Function to execute on each value in the array.

The function is called with the following arguments:

element

The current element in the array.

index

The index (position) of the current element in the array.

array

The array that find was called on.

The callback must return a truthy value to indicate a matching element has been found.

thisArg Optional

Object to use as this inside callbackFn.

Return value

The first element in the array that satisfies the provided testing function. Otherwise, undefined is returned.

Description

The find method executes the callbackFn function once for each index of the array until the callbackFn returns a truthy value. If so, find immediately returns the value of that element. Otherwise, find returns undefined.

callbackFn is invoked for every index of the array, not just those with assigned values. This means it may be less efficient for sparse arrays, compared to methods that only visit assigned values.

If a thisArg parameter is provided to find, it will be used as the this value inside each invocation of the callbackFn. If it is not provided, then undefined is used.

The find method does not mutate the array on which it is called, but the function provided to callbackFn can. If so, the elements processed by find are set before the first invocation of callbackFn. Therefore:

  • callbackFn will not visit any elements added to the array after the call to find begins.
  • Elements which are assigned to indexes already visited, or to indexes outside the range, will not be visited by callbackFn.
  • If an existing, yet-unvisited element of the array is changed by callbackFn, its value passed to the callbackFn will be the value at the time find visits that element's index.
  • Elements that are deleted are still visited.

Warning: Concurrent modification of the kind described in the previous paragraph frequently leads to hard-to-understand code and is generally to be avoided (except in special cases).

Examples

Find an object in an array by one of its properties

const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];

function isCherries(fruit) {
  return fruit.name === 'cherries';
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }

Using arrow function and destructuring

const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];

const result = inventory.find(({ name }) => name === 'cherries');

console.log(result) // { name: 'cherries', quantity: 5 }

Find a prime number in an array

The following example finds an element in the array that is a prime number (or returns undefined if there is no prime number):

function isPrime(element, index, array) {
  let start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
console.log([4, 5, 8, 12].find(isPrime)); // 5

The following examples show that nonexistent and deleted elements are visited, and that the value passed to the callback is their value when visited:

// Declare array with no elements at indexes 2, 3, and 4
const array = [0,1,,,,5,6];

// Shows all indexes, not just those with assigned values
array.find((value, index) => {
  console.log('Visited index ', index, ' with value ', value);
});

// Shows all indexes, including deleted
array.find((value, index) => {
  // Delete element 5 on first iteration
  if (index === 0) {
    console.log('Deleting array[5] with value ', array[5]);
    delete array[5];
  }
  // Element 5 is still visited even though deleted
  console.log('Visited index ', index, ' with value ', value);
});
// expected output:
// Visited index 0 with value 0
// Visited index 1 with value 1
// Visited index 2 with value undefined
// Visited index 3 with value undefined
// Visited index 4 with value undefined
// Visited index 5 with value 5
// Visited index 6 with value 6
// Deleting array[5] with value 5
// Visited index 0 with value 0
// Visited index 1 with value 1
// Visited index 2 with value undefined
// Visited index 3 with value undefined
// Visited index 4 with value undefined
// Visited index 5 with value undefined
// Visited index 6 with value 6

Specifications

Specification
ECMAScript Language Specification
# sec-array.prototype.find

Browser compatibility

BCD tables only load in the browser

See also

How do you search objects in an array?

Javascript: How to find an object in an Array of objects.
Method 1: Array. findIndex() to find the search index..
Method 2: Array. find() to find the search object..
Find object by Unique id / Property value..
Find object with Min & Max value in array..
Based on Latest or Oldest Date..

How do you search an array in JavaScript?

There are different methods in JavaScript that you can use to search for an item in an array..
element - the element being iterated on (required).
index - the index/position of the current element (optional).
array - the array that find was called on (optional).

How do you check if an array contains an object JavaScript?

Using includes() Method: If array contains an object/element can be determined by using includes() method. This method returns true if the array contains the object/element else return false. Example: html.

How do you find an object in an array of objects react?

To find an object in an array in React: Call the find() method on the array, passing it a function. The function should return an equality check on the relevant property. The find() method returns the first value in the array that satisfies the condition.