Updated April 1, 2023
Introduction to JavaScript find()
The JavaScript find() method is used to return a value of the first element in an array that satisfied the provided testing function; otherwise, the return will be undefined. The JavaScript find() method is a built-in method in JavaScript. It accepts a testing function, and if more than one function satisfied the condition of the testing function, only the first element which satisfied the condition would be returned.
Syntax of JavaScript find()
Given below is the syntax mentioned:
array.find( function( element, index, arr ), thisArg )This method is used to return the first element in an array that satisfied the provided testing function. Here array is an array on which the find() method is called.
Parameters:
- function: Function specifies the name of the function which is to be applied on each element of the array, or it is the testing function.
- element: Element specify the current element of an array being processed by the function.
- index: The index parameter is optional, which specifies the current index of an element being processed by the function.
- arr: arr parameter is an optional which specifies an array on which the find() function is applied.
- thisArg: thisArg parameter is optional, which specifies to function to use this value when executing the argument function.
- Return value: The return value of this function is the first element of an array that satisfied the given condition of the testing function; otherwise, it returns undefined as output.
Examples of JavaScript find()
Given below are the examples of JavaScript find() without accepting the function:
Example #1
Next, we write the html code to understand the javascript find() method more clearly with the following example, the find() method used to return the first element of an array that satisfied the condition, where here we will pass the condition directly without using the function.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for find function in JavaScript </title>
</head>
<body>
<p> Below is the first element of an array which satified the condtion = >30. </p>
<script>
var array = [10,20,30,40,50];
<!-- Check for even numbers and return first even number -->
var result = array.find( x=> x>30);
document.writeln(result)
</script>
</body>
</html>Output:
In the above code, an array is created of [10, 20, 30, 40, 50], and the find() method is used where the specified condition x>30, so in an array, 40 is the first element that satisfied the condition. Therefore an output is 40.
Example #2
Example of javascript finds () method with function.
Next example code where the javascript find() method accepts a name of the function to check the condition on each element of an array, as in the below code.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for find function in JavaScript </title>
</head>
<body>
<p>Below is the first even number of an array which satified the condition element%2 == 0. </p>
<script>
function isEven(element, index, arr) {
return (element%2 == 0);
}
<!-- Check for even numbers and return first even number -->
document.writeln([5, 15, 20, 25].find(isEven));
</script>
</body>
</html>Output:
In the above code, an array is created of [5, 15, 20, 25] and applied the find() method where it accepted the function that is isEven(), which checks the condition element%2 == 0 ( condition for even number) on each element of an array, so in an array 20 is the first element who satisfied the condition. Therefore an output is 20.
Example #3
In the next example code, we rewrite the above code for the javascript find() method to apply on an array whose none of the elements satisfied the condition for an even number.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for find function in JavaScript </title>
</head>
<body>
<p>Below is the first even number of an array which satified the condition element%2 == 0. </p>
<script>
function isEven(element, index, arr) {
return (element%2 == 0);
}
<!-- Check for even numbers and return first even number -->
document.writeln([5, 15, 25, 35].find(isEven));
</script>
</body>
</html>Output:
In the above code, an array is created of [5, 15, 20, 25] and applied the find() method to check whether the number is Even or not. However, as in array, none of the elements is even. Therefore an output is undefined.
Example #4
Next example code where the javascript find() method is used to find the prime number, as in the below code.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for find function in JavaScript </title>
</head>
<body>
<p>Below is the first prime number of an array which satified the condition element % first++ < 1. </p>
<script>
function isPrime(element, index, arr) {
var first = 2;
while (first <= Math.sqrt(element)) {
if (element % first++ < 1) {
return false;
}
}
return element > 1;
}
<!-- Check for prime numbers and return first prime number -->
document.writeln([5, 15, 25, 35].find(isPrime));
</script>
</body>
</html>Output:
Conclusion
The javascript is a built-in function of javascript, which is used to identify the first element of an array that satisfied the specified testing function.
Recommended Articles
This is a guide to JavaScript find(). Here we discuss the introduction to JavaScript find() and its different parameters along with examples. You can also go through our other suggested articles to learn more –
