How to create an array of object literals in a loop?

javascript

prompt-engineering

functions

callbacks

byAnton Shumikhin·Feb 16, 2025

To create an array of objects using a for loop:

let objects = [];
for (let i = 0; i < 5; i++) {
  // Pushing each "baby Yoda" into our objects "spaceship" 🚀
  objects.push({ id: i, name: `Item ${i}` });
}

For a more concise approach, use Array.from:

let objects = Array.from({ length: 5 }, (_, i) => ({ id: i, name: `Item ${i}` }));

Get the best out of modern JavaScript with map() and the spread ... operator with this example:

// Assuming we have an array of labels
const labels = ['label1', 'label2', 'label3'];

// Poof! You're a magician transforming labels into objects 🧙‍♂️
const items = labels.map((label, index) => ({
  [label]: `Item ${index}`,
  ...additionalProperties // Spread some extra magic properties as needed!
}));

Digging deeper: Dynamic properties & array methods

Crafting objects with `map()`

The map() method, in a nutshell, is ideal for transforming data sets into arrays of object literals in JavaScript:

let usersData = [{name: 'Alice'}, {name: 'Bob'}];
let usersObjects = usersData.map((user, index) => ({
  id: index, // add sequential IDs 👶👧
  ...user, // add user data 🐻🎸
  isActive: true // lottery winner, all active! 🎂🎁
}));

Making use of computed property names

ES6 (aka the Justin Timberlake of JavaScript, it's bringing dynamic keys back!) lets you introduce dynamic keys in your object:

let key = 'name';
let object = {
  // Now that's dynamic!
  [key]: 'John Doe'
};

Bring this into your loop and you can dynamically shape your objects:

let responses = [{ label: 'Name' }, { label: 'Age' }];

// Transform the labels into object keys 👻💫
let objects = responses.map((response, index) => ({
  // Lowercase for the win!
  [response.label.toLowerCase()]: `Sample Data ${index}`,
  sortable: true,
  resizeable: false
}));

Keep mutations at bay! (Avoiding common pitfalls)

Object references and accidental mutations are common pitfalls. When using spread syntax, remember it makes a shallow copy, not a deep one:

let baseObject = { settings: { theme: 'dark' } };
let copiedObjects = new Array(3).fill().map(() => ({ ...baseObject }));

// Ooops! All objects turned light mode on. 🕶🌞
copiedObjects[0].settings.theme = 'light';

To deep clone objects, consider JSON.parse(JSON.stringify(object)) or use a utility function from a library like Lodash.

Looping around: Traditional vs. modern techniques

For or not to for: Traditional loops vs. ES6 iterators

A traditional for loop gives you full control but forEach, for...of, and map() give you cleaner and more readable code:

for (let i = 0, j = 10; i < 5; i++, j--) {
  // complex control like a mad puppet master🕹🎭
}

// Or, transform data the calm and collected Zen master way🧘‍♂️🎐
let doubled = [1, 2, 3].map(i => i * 2);

Master the art of the `reduce()`

reduce() is your Swiss Army knife for accumulative operations:

let result = responses.reduce((acc, cur, index) => {
  // Keep pushing, we're almost there!
  acc.push({
    [`item_${index}`]: cur.label, 
    additionalProperty: 'value' // A sprinkle of sugar, just because we can! 🍭
  });
  return acc; // Return! I choose you, Accumulator! 🐱‍👤🏓
}, []);