Array.Prototype.find() – Made Easy – Ecmascript 6

Jitu Chauhan 3 years ago Comments

The JavaScript array.find method is an interesting feature introduced in ES6.The ES6 find method look through each element in an array in search of the first item that passes the conditions in its callback function and when found, that element is returned else a value of undefined is returned.

Syntax

const foundItem = myArray.find(callbackFunction);

Callback Function

callback(element, index, array);

The callback function houses the conditions to be executed over each element of the array. The first item that meets the conditions is returned.

The callback function receives 3 parameters which includes:

• array: the array that is currently being processed. It is optional.
• index: the index of the current item. It is optional.
• element: this is the element currently being executed. It is usually required.

const usersDatabase = [
  {Name: 'Emmanuel', id: 1, Password: '12345'},
  {Name: 'Paul',id: 2, Password: '6789'},
  {Name: 'Paul', id: 3, Password: '6789'},
  {Name: 'Ronald',id: 4, Password: '1245'},
];

function confirmUser(user) { 
  return user.Name === 'Paul' && user.Password === '6789' ;
}
const foundUser = usersDatabase.find(confirmUser);
console.log(foundUser);
//  {Name: "Paul", Password: "6789", id: 2}

The code snippet above mimics a typical user authentication implementation. Let’s walk through the snippet to understand how the find() method works.The usersDatabase is an array of objects. The confirmUser function is the callback function.Working principle of the find() methodThe find() method executes the conditions stated in the callback function on each item in the array and returns only the first item that meets the conditions. In the code snippet above, the usersDatabase array contains two objects with a similar name and password properties with the difference in their id properties. The find() method returns the object with the id of 2 since it is the first object that meets the condition in the callback function.

Index

The index parameter of the callback function is applicable in getting an element in an array at a specific index. Let us illustrate with the code snippet below:

const items = ['bread', 'butter', 'milk', 'coffee'];
// find array item with index of 2

const itemAtIndex = items.find((element, index)=> index === 2)

// display array item found

console.log(itemAtIndex)
// milk

In this snippet, the find() method is implemented with the ES6 arrow function.

How the find Method Handles Uninitialised Values in an Array(sparse arrays)

const arraySparse = ["Messi", "Ronaldo",, "Ozil"]
let numCallbackRuns = 0

arraySparse.forEach(function(element){
  console.log(element)
  numCallbackRuns++
})

console.log("numCallbackRuns: ", numCallbackRuns)

// Messi
// Ronaldo
// undefined
// Ozil
// numCallbackRuns: 4
// comment: as you can see the missing value between Ronaldo and Messi also invoked the callback function.

Conclusion

Consequently, the find() method is a great method for searching for a certain item in an array in JavaScript.

This article was originally published by WrapPixel, who is offering high quality free and premium Angular Templates and React Templates.