Javascript is quite dynamic and has multiple ways to do different tasks which follows different approaches and from one of them, there is Javascript array.find

What is Javascript array.find?

In a short note, It is one more way to play with our arrays more specifically it is a way to find in an array as its name suggests

It is quite loved due to its simplicity and easy syntax

Difference Between Array.find() and Array.filter()

Before I dive into the syntax Let’s clear a little bit of the things you might be asking that what is the difference between both of these great players

Actually the answer is quite simple there is the difference between them, not a lot but huge differences they have

array.find() only results in the first occurrence where the conditions meet it doesn’t return multiple values

array.find() results undefined when it is unsuccessful to find anything

And that’s pretty much enough to find differences between both of them

Now Let’s talk about its syntax and a few examples

syntax of the array.find()

The syntax of array.find() is quite self-understanding

arrayName.find(function)

array.find only accepts a function which is as a condition to look for in the array

Maybe you can get a better understanding of it by having a look few examples

A few Examples

Let’s assume a case in which we need to find which age is greater than 18

Ahh you can have a better look of it in below code

// Creating an array to store various ages //

var ages = [10,12,15,18,20,25,40];

//Making an variable to store adult age //

var adults = 18;

//Creating an function //

function checkAdult(age) {
	// body...
	return age >= 18
}

//Checking does it have the adult age //

var gotit = ages.find(checkAdult)

//Prinitng gotit//

console.log(gotit);

Now Maybe you got it

Let’s take another example with objects

//Creating a object of Colors //
const colors = [
  { name: "red", usedon: 1 },
  { name: "blue", usedon: 2 },
  { name: "green", usedon: 3 }
];

//Storing founded to result vari
var result = colors.find(checkG)


function checkG(argument) {
	// body...
	return argument.name.startsWith("g")
}

Maybe Now this is clear to you I also want to give a shoutout to the brother we can say of .find() which is findIndex()

As now maybe you primarily guessed it that it is a way to get the index of the searched one

But Let’s have a look at it as well

Array.findIndex()

It is a way to find the index of the specific term you want it is quite easy and simple to understand

Let’s have a look at its syntax

Syntax of Array.findIndex()

The syntax is quite simple and same as same we can say but before proceeding i recommend you to have a look at my this post to understand the indexing of the array

arrayName.find(function)

Let’s have a look at other examples to give you a more understanding

// Creating an array to store various ages //

var ages = [10,12,15,18,20,25,40];

//Making an variable to store adult age //

var adults = 18;

//Creating an function //

function checkAdult(age) {
	// body...
	return age >= 18
}

//Checking does it have the adult age //

var gotit = ages.findIndex(checkAdult)

//Prinitng gotit//

console.log(gotit);

//OUTPUT //

//3//

The only difference between this and the above code is instead of .find() i used .findIndex()

Wrapping UP

Now maybe you have understood it quite better and both of them and if you liked this post i recommend checking our other posts to learn something new for you as well or if you want to learn more about it I highly recommend to check MDN DOCS as well if you have any queries or questions or appreciations i always welcome them