All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Iterate Over Object JavaScript

Last Updated : Mar 11, 2024

Iterate Over Object JavaScript

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>
  1. To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
  2. Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
  3. <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
  4. Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
  5. we will use an external CSS file to style the html page
  6. using <style> tag to add CSS
  7. <h1> tag used to add a heading close it with </h1> tag
  8. Create a <Script> tag to write JavaScript within it.
  9. Using const to create an object with some key and values
  10. Now using forin loop to iterate over object.
  11. Console.log() to display the keys of the object
  12. Const to create a constant key and used object.keys() property.
  13. Using console.log() to display the array of keys
  14. Now use foreach loop to loop through the array and display all the key
  15. we have created variable entries and used object.entries() property
  16. Using console.log() to display the array of the arrays of keys and values
  17. 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.

Author Image About Amruta

Amruta is an Experienced web developer with 4 years for experience she completed her master's with MCA and passionate about programming Languages for creating technical contents like HTML, CSS, JavaScript, Java, Python, PHP, jQuery.

Follow Amruta On Linkedin 🡪