How to Create an Array of Objects in JavaScript Using a For Loop

Creating an array of objects in JavaScript using a for loop is a common task when you need to programmatically generate multiple objects and store them in an array. This guide will walk you through the process with detailed explanations and examples.

const array = [];
for (let i = 0; i < 5; i++) {
  array.push({ id: i, value: `Item ${i}` });
}
console.log(array);
// Output: [{ id: 0, value: "Item 0" }, { id: 1, value: "Item 1" }, ... ]

• Purpose: Learn how to create an array of objects in JavaScript using a for loop.
• Common Use Case: Dynamically generate a collection of objects based on iteration.

Arrays and objects are fundamental data structures in JavaScript. Arrays allow you to store multiple values in an ordered list, while objects store data in key-value pairs. When combined, an array of objects enables you to manage a collection of similar items, each with multiple properties.

Basic Concept of Arrays and Objects

Before diving into the for loop, it’s essential to understand the basic structure of arrays and objects in JavaScript:

• Array: A collection of values, which can be of any data type, including objects.
• Object: A collection of key-value pairs, where each key is a string (or symbol) and each value can be any data type.

Creating an Array of Objects with a For Loop

Using a for loop, you can create multiple objects and push them into an array. This is particularly useful when the objects need to be generated dynamically.

Example 1: Simple Array of Objects

const array = [];
for (let i = 0; i < 5; i++) {
  array.push({ id: i, name: `Item ${i}` });
}
console.log(array);

Explanation:

• const array = [];: Initializes an empty array array to store the objects.
• for (let i = 0; i < 5; i++) { ... }: A for loop that runs five times, creating five objects.
• array.push({ id: i, name:Item ${i}});: In each iteration, a new object with properties id and name is created and added to the array.
• console.log(array);: Logs the array of objects to the console.

Using Dynamic Values in Objects

You can use dynamic values in the objects being created, such as using loop variables or calculated values.

Example 2: Array of Objects with Dynamic Properties

const products = [];
const names = ['Laptop', 'Tablet', 'Smartphone'];
for (let i = 0; i < names.length; i++) {
  products.push({ id: i + 1, name: names[i], price: (i + 1) * 100 });
}
console.log(products);

Explanation:

• const products = [];: Initializes an empty array products.
• const names = ['Laptop', 'Tablet', 'Smartphone'];: An array of product names to be used dynamically.
• for (let i = 0; i < names.length; i++) { ... }: Iterates through the names array.
• products.push({ id: i + 1, name: names[i], price: (i + 1) * 100 });: Creates an object with dynamic id, name, and price properties, and adds it to products.
• console.log(products);: Logs the resulting array of objects.

Nested Arrays of Objects

You can also create nested arrays of objects, where each object contains an array as one of its properties.

Example 3: Creating Nested Arrays

const categories = [];
for (let i = 0; i < 3; i++) {
  categories.push({
    categoryId: i + 1,
    name: `Category ${i + 1}`,
    items: [
      { itemId: 1, itemName: `Item 1` },
      { itemId: 2, itemName: `Item 2` },
    ],
  });
}
console.log(categories);

Explanation:

• const categories = [];: Initializes an empty array categories.
• for (let i = 0; i < 3; i++) { ... }: Iterates three times to create three categories.
• categories.push({ ... });: Creates an object for each category, which includes a nested array of items.
• console.log(categories);: Logs the array of categories, each containing a nested array of items.

Conclusion

Creating an array of objects in JavaScript using a for loop is a versatile technique that allows you to dynamically generate collections of objects. Whether you need simple arrays of objects or more complex nested structures, understanding this approach will enhance your ability to work with data in JavaScript effectively. By mastering these techniques, you can handle dynamic data generation and manipulation with confidence.