Loop backward in array of objects JavaScript

When working with arrays of objects in JavaScript, you may need to iterate through them in reverse order. This is useful for tasks like displaying data from newest to oldest or building strings that reverse the original order.

We have an array of objects like this:

let data = [
    {id:1, Name: "Abe", RowNumber: 1 },
    {id:2, Name: "Bob", RowNumber: 2 },
    {id:3, Name: "Clair", RowNumber: 3 },
    {id:4, Name: "Don", RowNumber: 3.0 },
    {id:5, Name: "Edna", RowNumber: 3.1 },
    {id:6, Name: "Frank", RowNumber: 3.2 },
    {id:7, Name: "Gabe", RowNumber: 4 },
    {id:8, Name: "Helen", RowNumber: 5 },
    {id:9, Name: "Isabelle", RowNumber: 6 },
    {id:10, Name: "Jane", RowNumber: 7 },
    {id:11, Name: "Ken", RowNumber: 8 },
];
console.log("Original array length:", data.length);

Original array length: 11

We need to write a JavaScript function that takes this array and returns a string with names starting from the last object up to the first, separated by ", ".

Using for Loop (Reverse Iteration)

const data = [
    {id:1, Name: "Abe", RowNumber: 1 },
    {id:2, Name: "Bob", RowNumber: 2 },
    {id:3, Name: "Clair", RowNumber: 3 },
    {id:4, Name: "Don", RowNumber: 3.0 },
    {id:5, Name: "Edna", RowNumber: 3.1 },
    {id:6, Name: "Frank", RowNumber: 3.2 },
    {id:7, Name: "Gabe", RowNumber: 4 },
    {id:8, Name: "Helen", RowNumber: 5 },
    {id:9, Name: "Isabelle", RowNumber: 6 },
    {id:10, Name: "Jane", RowNumber: 7 },
    {id:11, Name: "Ken", RowNumber: 8 },
];

const buildString = arr => {
    let str = '';
    for(let i = arr.length-1; i > -1; i--){
        str += `${arr[i]["Name"]}, `;
    };
    return str.substring(0, str.length-2);
};

console.log(buildString(data));

Ken, Jane, Isabelle, Helen, Gabe, Frank, Edna, Don, Clair, Bob, Abe

Using Array Methods (Alternative Approach)

const data = [
    {id:1, Name: "Abe", RowNumber: 1 },
    {id:2, Name: "Bob", RowNumber: 2 },
    {id:3, Name: "Clair", RowNumber: 3 },
    {id:4, Name: "Don", RowNumber: 3.0 },
    {id:5, Name: "Edna", RowNumber: 3.1 },
    {id:6, Name: "Frank", RowNumber: 3.2 },
    {id:7, Name: "Gabe", RowNumber: 4 },
    {id:8, Name: "Helen", RowNumber: 5 },
    {id:9, Name: "Isabelle", RowNumber: 6 },
    {id:10, Name: "Jane", RowNumber: 7 },
    {id:11, Name: "Ken", RowNumber: 8 },
];

// Using reverse() and map()
const buildStringWithMethods = arr => {
    return arr
        .slice()  // Create a copy to avoid mutating original array
        .reverse()
        .map(obj => obj.Name)
        .join(', ');
};

console.log(buildStringWithMethods(data));

Ken, Jane, Isabelle, Helen, Gabe, Frank, Edna, Don, Clair, Bob, Abe

Comparison

Key Points

The reverse for loop starts at arr.length-1 (last index) and decrements until i > -1. The array method approach uses slice() to create a copy before reversing, preventing mutation of the original array.

Conclusion

Both methods effectively loop backward through an array of objects. Use the for loop for better performance or array methods for cleaner, more readable code.