All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

JavaScript Loop Through Objects

Last Updated : Mar 11, 2024

JavaScript Loop Through Objects

In this article we will show you the solution of JavaScript loop through objects, we will see three different methods to loop through object. Now we will use For in loop, For each loop, and JavaScript object entries method.

For in loop: for in loop is used to loop over any object using keys. The syntax for the For-in loop is,

for (x in object) {
//block of code

For each loop: for each loop used for object keys method to extract all the keys from the object and put them in an array. so we can loop over each key and return the values.

The syntax for for-each loop is,

array.forEach(function(currentValue, index, array))

object entries method: object entries method returns a nested array of keys and values by looping through the array

Step By Step Guide On JavaScript Loop Through Objects :-

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript loop through objects</title>
    <link rel="stylesheet" href="">
            background-color: aliceblue;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
          color : rgb(95, 194, 95) ;
          font-size: 25px;
          font-weight : bolder ;
            color : rgb(95, 194, 95) ;
            font-size: 20px;
        <h1> TALKERSCODE </h1>
        <h3>JavaScript loop through objects</h3>
     const person = {
        id: 1,
        firstName: 'peter',
        lastName: 'cole',
        age: '20',
        gender: 'male',
     } ;
     //first method
     for(const key in person) {
        console.log(key,person[key]) ;
     //second method
     const keys = Object.keys(person) ;
     keys.forEach(key => {
        console.log(key,person[key]) ;
     }) ;
     //third method
     const entries = Object.entries(person) ;
     keys.forEach(entries => {
        console.log(entries[0], entries[1]) ;
     }) ;
     for(const[key,value] of Object.entries) {
  1. writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
  2. The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
  3. The metadata for the HTML file is contained in the <head> tag, which is closed with the </head> tag.
  4. The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
  5. We'll use an external CSS file to style the HTML page.
  6. using <style> tag to add CSS
  7. create a <Center> tag the add a <h1> tag used to add a heading close it with </h1> tag and add a <h3> tag within it
  8. using <script> tag to write JavaScript within it. And close it with the </script> tag.
  9. Using Const to create a object named person. Add some keys and values into it
  10. In first method , Using for-in loop to loop over the object using keys
  11. In second method, using for-each loop to extract all the keys with using object.keys() property.
  12. In the third method, we used object.entries() property to loop over object.

Conclusion :-

At last, in conclusion, we can say that with this article’s help, we know loop through objects using JavaScript.

I hope this article on JavaScript loop through objects helps you and the steps and method 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 🡪