Iterate Over Object JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of iterate over object JavaScript, in JavaScript, we cannot directly iterate over an object. when we want to iterate over an object, we have different options depending on what we want to loop over.
Now in this tutorial, we will iterate over object using three different methods.
- Using Forin Loop: the forin loop used to iterate through object
- Using Keys() Method: by using this method we will get return an array. the array will contain the property name or the keys of the object
- Using Entries() Method: using method we will get return of an array of arrays contain the keys and values of objects.
Step By Step Guide On Iterate Over Object JavaScript :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iterate over object javascript</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> iterate over object javascript </h3>
</center>
<script>
const person = {
firstName: 'akash' ,
lastName: 'singh' ,
age: 30 ,
gender: 'male' ,
} ;
//using forin loop
for(const key in person) {
console.log(key, person[key]) ;
}
//using object keys method
const keys = Object.keys(person) ;
keys.forEach(key => {
console.log(key, person[key]) ;
})
//using object entries method
const entries = Object.entries(person) ;
for(let [key, val] of entries) {
console.log(`${key}: ${val}`) ;
}
</script>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- we will use an external CSS file to style the html page
- using <style> tag to add CSS
- <h1> tag used to add a heading close it with </h1> tag
- Create a <Script> tag to write JavaScript within it.
- Using const to create an object with some key and values
- Now using forin loop to iterate over object.
- Console.log() to display the keys of the object
- Const to create a constant key and used object.keys() property.
- Using console.log() to display the array of keys
- Now use foreach loop to loop through the array and display all the key
- we have created variable entries and used object.entries() property
- Using console.log() to display the array of the arrays of keys and values
- Now use foreach loop to loop through the array and display all the key and values
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know how to iterate over object in JavaScript.
I hope this article on iterate over object JavaScript helps you and the steps and mentioned above are easy to follow and implement.
About Amruta
