How To Loop Through Array Of Objects In Javascript

In this blog post, we will learn how to loop through an array of objects in JavaScript. Looping through an array of objects is a common task in JavaScript, and it is essential to understand how to do it efficiently.

Understanding Arrays of Objects

An array of objects is a collection of items, where each item is an object. An example of an array of objects is:

[
    {name: "Alice", age: 25},
    {name: "Bob", age: 30},
    {name: "Carol", age: 35}
]
    

Looping Through an Array of Objects

There are several ways to loop through an array of objects in JavaScript. We will discuss the most common methods: for loop, forEach(), for…of, and map().

1. Using a for loop

The most classical way to loop through an array is using a for loop. Here is an example:

    const arrayOfObjects = [
        {name: "Alice", age: 25},
        {name: "Bob", age: 30},
        {name: "Carol", age: 35}
    ];

    for(let i = 0; i < arrayOfObjects.length; i++) {
        console.log(arrayOfObjects[i].name, arrayOfObjects[i].age);
    }
    

2. Using forEach()

The forEach() method is a built-in method in JavaScript that allows you to loop through an array more concisely. Here’s the example using forEach():

    const arrayOfObjects = [
        {name: "Alice", age: 25},
        {name: "Bob", age: 30},
        {name: "Carol", age: 35}
    ];

    arrayOfObjects.forEach(function(item) {
        console.log(item.name, item.age);
    });
    

3. Using for…of

The for…of loop is an addition in ES6 that allows for a more readable and concise way to loop through an array. Here’s the example using for…of:

    const arrayOfObjects = [
        {name: "Alice", age: 25},
        {name: "Bob", age: 30},
        {name: "Carol", age: 35}
    ];

    for (const item of arrayOfObjects) {
        console.log(item.name, item.age);
    }
    

4. Using map()

The map() method is another way to loop through an array. It is especially useful when you want to create a new array based on the existing one. Here’s the example using map():

    const arrayOfObjects = [
        {name: "Alice", age: 25},
        {name: "Bob", age: 30},
        {name: "Carol", age: 35}
    ];

    const mappedArray = arrayOfObjects.map(function(item) {
        console.log(item.name, item.age);
        return {name: item.name, age: item.age + 1};
    });

    console.log(mappedArray);
    

Conclusion

In this blog post, we learned how to loop through an array of objects in JavaScript using different methods. Each method has its own advantages and use cases, and it’s essential to know which one to use in different situations.