ARRAY.PROTOTYPE.FIND() - JAVASCRIPT | MDN
=========================================

BASELINE WIDELY AVAILABLE

The find() method of Array
[/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array] instances returns
the first element in the provided array that satisfies the provided testing
function. If no values satisfy the testing function, undefined
[/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined] is returned.

 * If you need the index of the found element in the array, use findIndex()
   [/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex].
 * If you need to find the index of a value, use indexOf()
   [/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf]. (It's
   similar to findIndex()
   [/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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()
   [/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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() [/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some].
 * If you need to find all elements that satisfy the provided testing function,
   use filter()
   [/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter].


TRY IT


SYNTAX

find(callbackFn)
find(callbackFn, thisArg)



PARAMETERS

callbackFn

A function to execute for each element in the array. It should return a truthy
[/en-US/docs/Glossary/Truthy] value to indicate a matching element has been
found, and a falsy [/en-US/docs/Glossary/Falsy] value otherwise. The function is
called with the following arguments:

element

The current element being processed in the array.

index

The index of the current element being processed in the array.

array

The array find() was called upon.

thisArg Optional

A value to use as this when executing callbackFn. See iterative methods
[/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods].


RETURN VALUE

The first element in the array that satisfies the provided testing function.
Otherwise, undefined
[/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined] is returned.


DESCRIPTION

The find() method is an iterative method
[/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods].
It calls a provided callbackFn function once for each element in an array in
ascending-index order, until callbackFn returns a truthy
[/en-US/docs/Glossary/Truthy] value. find() then returns that element and stops
iterating through the array. If callbackFn never returns a truthy value, find()
returns undefined
[/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined]. Read the
iterative methods
[/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#iterative_methods]
section for more information about how these methods work in general.

callbackFn is invoked for every index of the array, not just those with assigned
values. Empty slots in sparse arrays
[/en-US/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays] behave the
same as undefined.

The find() method is generic
[/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#generic_array_methods
]. It only expects the this value to have a length property and integer-keyed
properties.


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
[/en-US/docs/Web/JavaScript/Reference/Global_Objects/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



USING THE THIRD ARGUMENT OF CALLBACKFN

The array argument is useful if you want to access another element in the array,
especially when you don't have an existing variable that refers to the array.
The following example first uses filter() to extract the positive values and
then uses find() to find the first element that is less than its neighbors.

const numbers = [3, -1, 1, 4, 1, 5, 9, 2, 6];
const firstTrough = numbers
  .filter((num) => num > 0)
  .find((num, idx, arr) => {
    // Without the arr argument, there's no way to easily access the
    // intermediate array without saving it to a variable.
    if (idx > 0 && num >= arr[idx - 1]) return false;
    if (idx < arr.length - 1 && num >= arr[idx + 1]) return false;
    return true;
  });
console.log(firstTrough); // 1



USING FIND() ON SPARSE ARRAYS

Empty slots in sparse arrays are visited, and are treated the same as undefined.

// 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);
});
// 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

// 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);
});
// 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



CALLING FIND() ON NON-ARRAY OBJECTS

The find() method reads the length property of this and then accesses each
property whose key is a nonnegative integer less than length.

const arrayLike = {
  length: 3,
  "-1": 0.1, // ignored by find() since -1 < 0
  0: 2,
  1: 7.3,
  2: 4,
};
console.log(Array.prototype.find.call(arrayLike, (x) => !Number.isInteger(x)));
// 7.3



SPECIFICATIONS

SpecificationECMAScript Language Specification
# sec-array.prototype.find
[https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.
find]


BROWSER COMPATIBILITY

BCD tables only load in the browser


SEE ALSO