Introduction to JavaScript find() Method
The JavaScript find() method is used to returns 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. The JavaScript find() method accept a testing function and if more than one function satisfied the condition of testing function only the first element which satisfied the condition will be returned.
The syntax of the JavaScript find() method
array.find( function( element, index, arr ), thisArg ) - This method is used to returns first element in an array that satisfied the provided testing function. Here array is an array on which the find() method is called.
Parameters of JavaScript find() Method
1. function: Function specifies the name of the function which is to be applied on each elements of the array or it is the testing function.
2. element: Element specify current element of an array being processed by the function.
3. index: Index parameter is an optional which specifies the current index of an element being processed by the function.
4. arr: arr parameter is an optional which specifies an array on which find() function is applied.
4.5 (5,397 ratings)
View Course
5. thisArg: thisArg parameter is an optional which specifies to function to use this value when executing argument function.
6. 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() Method
Below are the examples of JavaScript find() Method without accepting function:
Next, we write the html code to understand the javascript find() method more clearly with the following example, the find() method used return the first element of an array who satisfied the condition, where here we will pass the condition directly without using the function –
Example #1
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 using where the specified condition x>30, so in an array 40 is the first element who satisfied the condition. Therefore an output is 40.
Example of javascript find() method with function.
Next example code where the javascript find() method accept a name of the function to check the condition on each element of an array, as in the below code –
Example #2
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 check 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.
In next example code, we rewrite the above code for javascript find() method to apply on an array whose none of the element satisfied the condition for even number. As shown in the below example –
Example #3
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 number is Even or not. As in array none of the element is even. Therefore an output is undefined.
Next example code where the javascript find() method used to find the prime number, as in the below code:
Example #4
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 an built in function of javascript, which is used to identify the first element of array that satisfied the specified the testing function.
Recommended Articles
This is a guide to JavaScript find(). Here we discuss the Introduction to JavaScript find() Method and its different Parameters along with Examples and Code Implementation. You can also go through our other suggested articles to learn more –
