In this article we will show you the solution of find in array JavaScript, we know that array is a finite collection of homogenous elements.
With help of this tutorial, we will learn to finding elements in the array using JavaScript. We will use two different methods in this tutorial.
- Find() method
- findIndex() method
Step By Step Guide On Find In Array JavaScript :-
let us see step by step guides of the different methods.
Method 1 - find() method
At first we are going to see the find() method. in this method, only the first element found is returned.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> find in array JavaScript </title>
<head>
<style>
h1 {
font-size: larger;
font-weight: bolder;
color: lightgreen;
}
</style>
</head>
<body>
<h1>TALKERSCODE</h1>
<h3> find in array JavaScript </h3>
<script>
const array = [
{
name : ' john ' ,
city : ' NewYork ' ,
} ,
{
name : ' peter ' ,
city : ' London ',
},
{
name : ' Mary ',
city : ' Paris '
}
] ;
console.log(array) ;
function location(people){
return people.city === ' Paris '
}
console.log(array.find(location).name) ;
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here
- Create a <script> tag to add JavaScript file.
- First, create an array containing information like name, city, etc.
- Create a console.log() to display the array.
- Create a function that returns a value that helps to find the element.
- Using find() in console.log() to return the first value that satisfy the condition.
Method 2 - findIndex()
The second method we are going to use the findIndex() method. findIndex() only used to find the index value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> find in array JavaScript </title>
<head>
<style>
h1 {
font-size: larger;
font-weight: bolder;
color: lightgreen;
}
</style>
</head>
<body>
<h1>TALKERSCODE</h1>
<h3> find in array JavaScript </h3>
<script>
var numbers = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ] ;
document.write (numbers + " <br> ") ;
function indexNumber(numbers){
return numbers>=1;
}
var findNumbers = ages.findIndex(indexNumber);
document.write (findNumbers + " <br> ") ;
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here
- Create a <script> tag to add JavaScript file.
- First, create an array containing numbers
- Create a function that returns a value that helps to find the element. Then create a variable contains findIndex().
- Using document.write() to only find the index value.
Conclusion :-
Last here in conclusion, here we can say that with the help of this article we are able to finding in an array using JavaScript.
I hope this article on find in array JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
