JavaScript: How to use Array find() Method in JavaScript

Array find() method is usually the go-to method if we need to iterate through to perform the same validation code on all elements and return the first element with validation true on the condition. Array find() is introduced since ES5.

What is Array find Method

Array refers to standard built-in object in JavaScript and find() or Array.proto.find() method is part of Array as shown in the documentation. It is design to have a callback function execute over every element and return the first value where the condition is met.

find() method takes in a callback function that have up to 3 argument inputs. 1st argument being the element data is compulsory where it is the element. 2nd argument is the index and 3rd argument is the original array where these are optional.

// Syntax of find() method
// passObject is optional, its purpose is for us to pass values in
myArray.find(callback[,passObject]);

// Syntax of callback function
function(currentElement)
function(currentElement, index)
function(currentElement, index, originalArray)

There are 3 ways of how we can define the callback function. There are:

• Arrow function
• Callback function
• Inline callback function

Let’s look at the illustration below. Since we do not need to pass data into the callback function, there is no need for passObject.

// Arrow Function Type
myArray.find((currentElement) => { 
  return true;
});

// Callback Function Type
myArray.find(callbackFn);

// Inline Callback Function Type
myArray.find(function(currentElement) { 
  return true;
});

Features of find()

• Process on all elements and return the first element that meet the condition.
• Before the first execution of callback, it will capture and fix the array size to process.
  • Will not process new array elements.
• If the array reference is changed in any iteration, the old array reference will still be used by the callback function for all iterations.
• If a subsequent array element is updated in the earlier iteration, this new value will pass to the callback function when come to its iteration.
• It no element meet the condition, the return value is undefined.
• If array is empty, the return value is undefined.

Usage of Array find() Method

Pre-ES5 Style

To write it with pre-ES5 style, we will first need to create a result variable. Subsequently, if any of the element meet the condition, we will assign the variable to the variable and break out of the loop.

In the illustration below, we will get the first elements in personArray have age less than 10.

var personArray = [
  { name: 'Person1', age: 6 },
  { name: 'Person2', age: 30 },
  { name: 'Person3', age: 80 },
];

var result;
for (var i = 0; i < personArray.length; i++) {
  if (personArray[i].age <= 9) {
    result = personArray[i];
    break;
  }
}

console.log(result); // { name: 'Person1', age: 6 }

ES5 Style

Let’s look into how to use find() method with the below example.

First, let’s define a basic array consisting of person and their age. Next, we will validate the age of everyone to be greater than 10 and 80. We will just need to use the element here. No need to use index and original array data.

We can see that even thought the condition is different, the return value is the same since it return the first element in the array meeting the condition. Thus, Person1 will always be the return value.

const personArray = [
  { name: 'Person1', age: 6 },
  { name: 'Person2', age: 30 },
  { name: 'Person3', age: 80 },
];

const ageAbove10Validation = personArray.find((currentElement) => {
  if (currentElement.age < 10) {
    return true;
  }
  return false;
});

const ageAbove5Validation = personArray.find((currentElement) => currentElement.age < 80);

console.log(ageAbove10Validation); // { name: 'Person1', age: 6 }
console.log(ageAbove5Validation);  // { name: 'Person1', age: 6 }

Conclusion

From the above illustration, we can see that we will require less code if we use find() method instead of a traditional for-loop. In addition, there is no need for external variable and a loop control mechanism.

More Reading

• every() Method
• filter() Method
• forEach() Method
• map() Method
• reduce() Method