JavaScript Array find()
In this post, we will discuss find() method available in JavaScript Array.
find()
The find() method will return only the first element that matches the condition. We need to write a function for condition and pass the function name to the find() as a parameter. If no element matches the condition, then undefined is returned.
Syntax:
array_name.find(function_name)
Here, 'array_name' is the name of the array.It will take 'function_name' as a parameter.
Example 1:-
Let us create an array that hold 10 subjects and return the first occurrence of the element with length-4 from the subjects-array. So the condition we need to provide inside the function will be - subjects.length==4.
<html>
<body>
<script>
// Create an array that hold 10 strings
const subjects1 =["php","html","node.js","java","jsp","jsp","php","php","java","php"];
document.writeln("Subjects: <br>");
document.writeln(subjects1);
document.writeln("<br>");
document.writeln("<br>");
function condition1(subjects) {
return subjects.length==4;
}
// Return the first occurrence of elements with length-4.
document.writeln("first occurrence of the string of length-4:");
document.writeln(subjects1.find(condition1));
</script>
</body>
</html>
Output:
Subjects:
php,html,node.js,java,jsp,jsp,php,php,java,php
first occurrence of the string of length-4: html
We can see that the first element with length-4 is "html".
Example 2:-
Let us create an array that hold 10 subjects and return the first occurrence of the element with length-8 from the subjects-array. So the condition we need to provide inside the function will be - subjects.length==8.
<html>
<body>
<script>
// Create an array that hold 10 strings
const subjects1 =["php","html","node.js","java","jsp","jsp","php","php","java","php"];
document.writeln("Subjects: <br>");
document.writeln(subjects1);
document.writeln("<br>");
document.writeln("<br>");
function condition1(subjects) {
return subjects.length==8;
}
// Return the first occurrence of elements with length-8.
document.writeln("first occurrence of the string of length-8:");
document.writeln(subjects1.find(condition1));
</script>
</body>
</html>
Output:
Subjects:
php,html,node.js,java,jsp,jsp,php,php,java,php
first occurrence of the string of length-8: undefined
We can see that no element in the subjects array with length-8. So undefined is returned.
Example 3:-
Let us create an array that hold 10 integers and return the first occurrence of element which is greater than 20. So the condition we need to provide inside the function will be - marks>20.
<html>
<body>
<script>
// Create an array that hold 10 integers
const marks =[12,34,22,45,67,89,0,0,7,56];
document.writeln("Marks: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("<br>");
function condition1(marks) {
return marks>20;
}
// Return the first occurrence of element which is greater than 20
document.writeln("first occurrence of element which is greater than 20:");
document.writeln(marks.find(condition1));
</script>
</body>
</html>
Output:
Marks:
12,34,22,45,67,89,0,0,7,56
first occurrence of element which is greater than 20: 34
We can see that the first element which is greater than 20 is 34.
Example 4:-
Let us create an array that hold 10 integers and return the first occurrence of element which is greater than 600. So the condition we need to provide inside the function will be - marks>600.
<html>
<body>
<script>
// Create an array that hold 10 integers
const marks =[12,34,22,45,67,89,0,0,7,56];
document.writeln("Marks: <br>");
document.writeln(marks);
document.writeln("<br>");
document.writeln("<br>");
function condition1(marks) {
return marks>600;
}
// Return the first occurrence of element which is greater than 600
document.writeln("first occurrence of element which is greater than 600:");
document.writeln(marks.find(condition1));
</script>
</body>
</html>
Output:
Marks:
12,34,22,45,67,89,0,0,7,56
first occurrence of element which is greater than 600: undefined
We can see that no element in the marks array is greater than 600. So undefined is returned.
