How to iterate over a JavaScript object ?

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:

html

<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 id="gfg">
</p>

<button onclick="iterateObject()">
    Iterate Object
</button>

<script>
    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];
                document.getElementById("gfg").innerHTML += key +
                                                            ": " +
                                                            value +
                                                            "<br> ";
            }
        }
    }
</script>

Output:

Method 2: Using Object.entries() and 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:

html

<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 id="gfg">
</p>

<button onclick="iterateObject()">
    Iterate Object
</button>

<script>
    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];
            document.getElementById("gfg").innerHTML += key +
                                                        ": " +
                                                        value +
                                                        "<br> ";
        });
    }
</script>

Output: