Array.find Method in JavaScript

Lakshmi Ramasamy 26th June 2020 Leave a Comment

In this post let’s take a look at how the Array.find() method works with some easy examples.

Array.find() is a JavaScript method that can searches through the array or an array of Objects based on the defined function. In ES5 to find a value in an array, we use indexOf() or lastIndexOf() methods. ES6 make our job more easy with enhanced capability by introducing a new method Array.find().

Syntax

array.find(function(currentValue, index, arr),thisValue)

Parameters

function(currentValue, index, arr)

currentValue – Required. Function to execute over each value in array.
index – Optional. Index of current value.
arr – Optional. Array which is currently being processed.

thisValue

We can also pass an argument as the second parameter to be used as the this value in the callback

Return Value

It will return only one element of array which satisfies the condition, Otherwise it will return undefined.

So if we need only one value to be returned we can use Array.find() method. We we like to return the all matched condition value or to return more than one value use Array.filter() method. See the below post to know about Array.filter() method.

Filter values from Object Arrays in JavaScript

Simple Example for array of Strings

Below code snippet will clearly shows how the Array.find() method works, it return the first match of string which starting letter is ‘A’

const fruitList = [ 
		  "apple", 
		  "Mango", 
		  "Avocado", 
		  "Cherry",
		  "Kiwifruit"
		];

const matchedStr = fruitList.find(fruit => fruit.startsWith("A"));
console.log(matchedStr); //Avocado

Simple Example for array of Objects

Let see how the Array.find() working with array of Objects.

let users = [
  {Username: "Harry", User_id: 1},
  {Username: "Sugi", User_id: 2},
  {Username: "Kavi", User_id: 3},
  {Username: "Pritha", User_id: 4}
];

let result = users.find(user => user.Username === "Kavi");
console.log(result); //{Username: "Kavi", User_id: 3}

Using the same array of object, if we use Array.find() when a test has multiple results, we only get the first value found:

let result = users.find(user => user.User_id > 2);
console.log(result); //{Username: "Kavi", User_id: 3}

Using the index parameter

With the find() method we can fetch an array item using a specific index value of the item.

const car = ['BMW', 'Bugatti', 'Ford', 'Jaguar'];

// find array item with index of 1
const atIndex = car.find(function(element, index){
  return index === 3
})

// display array item found
console.log(atIndex) //Jaguar