AppDividend
Latest Code Tutorials

Javascript Array Find Example | Array.prototype.find() Tutorial

1

Javascript Array Find Example | Array.prototype.find() Tutorial is today’s leading topic. The Javascript Array find() method returns a value of the first item in an array that satisfies a provided testing function. Otherwise undefined will be returned. The Javascript Array find() method returns the value of the first element in an array that passes a test of provided function. If it finds an item where the function returns a true value, then find() returns the value of that array item immediately and does not check the remaining values of that array.

If you want to learn more about the latest Javascript tutorials then check out this The Complete Javascript Course.

Javascript Array Find Example

The syntax is following.

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

#Javascript Array Find Method 

We will use the Node.js to write the Javascript files. So let us create a file called app.js and add the following code.

// app.js

var data = [20, 18, 15, 10, 9];

var found = data.find(function(element) {
  return element < 12;
});

console.log(found);

So, we have written one condition, and if any array item satisfies this condition then it will return a value of that element, and the further checking of elements inside an array will be stopped.

Here, both the values 10 and are less than 12 but still, we got the 10 because 10 value of an element is first inside an array. So only 10 will return and not 9. So, if the satisfying condition element is found inside an array, then it will immediately return, and no further checking is required.

Javascript Array Find Example | Array.prototype.find() Tutorial

We can write the above function in ES6 standard like following.

// app.js

const data = [20, 18, 15, 10, 9];

let found = data.find(element => element < 12);

console.log(found);

The answer will be the same as previous but, it is the much lighter syntax.

Now let us take a scenario where undefined is found.

// app.js

const data = [20, 18, 15, 10, 9];

let found = data.find(element => element < 9);

console.log(found);

In the above example, all the elements are greater than 9 that is why the output will be undefined.

#Pure Function

Javascript Array Find method is a pure function because it does not mutate an array on which it is called. Instead, it will return a value that satisfies its condition.

#Find an item using Find() Method in Javascript

Now, write the following code.

// app.js

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

const getFruit = fruits.find(fruit => fruit.name === 'apples');

console.log(getFruit);

Here, only one object will be returned if the condition is met successfully.

Javascript Array Find Example

So, whenever we have a scenario where we need to get a value of the first element in an array that satisfies the provided testing function, we can use Array.find() method in JavaScript.

#Search in array Javascript

Let’s take an example of whether the person is an adult or not. If we find the first value from the array which satisfies the criteria then it will return that value.

See we are searching item in the array using javascript find() function.

// app.js
let ages = [6, 18, 19, 21];

let checkAdult = age => {
  return age >= 18;
}

console.log(ages.find(checkAdult));

In the above code, if the first array element found greater than or equal to 18 then it will return in the output. Now, see the output.

Search in array Javascript

#Find if an item is in a JavaScript array

As of ECMAScript 2018, we can use Javascript includes() function. Javascript Array includes() method determines whether an array contains the specified item. It returns true if it includes an element, otherwise false as not including the item in the array.

If you want to support IE or other older browsers then try the following code.

// app.js
 function include(arr,obj) {
    return (arr.indexOf(obj) != -1);
}

In the above code, we have used the Javascript indexOf method. So, this is how to search value in array in javascript.

#Find value in an array of objects in Javascript

Let’s say, I have an array of unnamed objects, which contain the array of named objects, and we need to get the object where “name” is “some string“. See the following programming example.

// app.js
 search = (key, inputArray) => {
  for (let i=0; i < inputArray.length; i++) {
      if (inputArray[i].name === key) {
          return inputArray[i];
      }
  }
}

let arr = [
  { name:"Krunal", value:"Engineer", other: "Author" },
  { name:"Ankit", value:"MCA", other: "Author" }
];

let resultObject = search("Krunal", arr);
console.log(resultObject);

Okay, so in the above code, first we have a user-defined function called search function which accepts two arguments. One is the input object key and other is input array.

It iterates the inputArray and compares the key with the array’s name property. If it matches then returns the whole object. See the below output.

Find value in an array of objects in Javascript

We can also use find() function to get the exact same value. See the following code.

// app.js
 let arr = [
  { name:"Krunal", value:"Engineer", other: "Author" },
  { name:"Ankit", value:"MCA", other: "Author" }
];

let obj = arr.find(data => data.name === 'Krunal');

console.log(obj);

It will give us the same output, but it is in ES6 style arrow function.

 #Conclusion

  1. The test must be provided as the function.
  2. The find() method executes a callback function once for each element in the array until it finds a value that returns true.
  3. If nothing passes a test then undefined is returned.
  4. The find() does not mutate or change the original Array. So it is a pure function.

Finally, Javascript Array Find Example | Array.prototype.find() Tutorial is over.

1 Comment
  1. indra says

    it`s a great tutorial thanks

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.