How to iterate over a JavaScript object ?

24 Oct, 2019
There are two methods to iterate over an object which are discussed below:
Method 1: Using for...in loop: The properties of the object can be iterated over using a for..in loop. This loop is used to iterate over all non-Symbol iterable properties of an object. Some objects may contain properties that may be inherited from their prototypes. The hasOwnProperty() method can be used to check if the property belongs to the object itself. The value of each key of the object can be found by using the key as the index of the object.
Syntax:
for (let key in exampleObj) {    if (exampleObj.hasOwnProperty(key)) {        value = exampleObj[key];        console.log(key, value);    }}
Example:
<!DOCTYPE html><html>  <head>    <title>        How to iterate over        a JavaScript object?    </title></head>  <body>    <h1 style="color: green">        GeeksforGeeks    </h1>          <b>        How to iterate over        a JavaScript object?     </b>          <p>        Click on the button to iterate        through the javascript object.    </p>          <p>        Check the console        for the output    </p>          <button onclick="iterateObject()">        Iterate Object    </button>          <script type="text/javascript">        function iterateObject() {            let exampleObj = {                book: "Sherlock Holmes",                author: "Arthur Conan Doyle",                genre: "Mystery"            };                  for (let key in exampleObj) {                if (exampleObj.hasOwnProperty(key))                {                    value = exampleObj[key];                    console.log(key, value);                }            }        }    </script></body>  </html>
Output:
Before clicking the button:
After clicking the button:
Method 2: Object.entries() map: The Object.entries() method is used to return an array of the object’s own enumerable string-keyed property pairs. The returned array is used with the map() method to extract the key and value from the pairs.The key and values from the key-value pair can be extracted by accessing the first and second index of the array pair. The first index corresponds to the key and the second index corresponds to the value of the pair.
Syntax:
Object.entries(exampleObj).map(entry => {    let key = entry[0];    let value = entry[1];    console.log(key, value);});
Example:
<!DOCTYPE html><html>      <head>    <title>        How to iterate over         a JavaScript object?    </title></head>  <body>    <h1 style="color: green">        GeeksforGeeks    </h1>          <b>        How to iterate over        a JavaScript object?     </b>          <p>        Click on the button to iterate        through the javascript object.    </p>          <p>        Check the console        for the output    </p>          <button onclick="iterateObject()">        Iterate Object    </button>          <script type="text/javascript">        function iterateObject() {            let exampleObj = {                book: "Sherlock Holmes",                author: "Arthur Conan Doyle",                genre: "Mystery"            };                  Object.entries(exampleObj).map(entry => {                let key = entry[0];                let value = entry[1];                console.log(key, value);            });        }    </script></body>  </html>
Output:
Before clicking the button:
After clicking the button:
javascript-object
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Hide or show elements in HTML using display property
How to append HTML code to a div using JavaScript ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?