JavaScript - Create Array of Objects From Multiple Arrays

Last Updated : 24 Jan, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Here are the different methods to create an array of objects from multiple arrays in JavaScript:

1. Using map (Most Popular Approach)

The map method is widely used because it is simple, concise, and works efficiently for arrays of the same length.

JavaScript 
const a = ["apple", "banana", "orange"];
const n = [10, 20, 30];
const res = a.map((item, index) => {
    return { item, count: n[index] };
});

console.log(res);

Output
[
  { item: 'apple', count: 10 },
  { item: 'banana', count: 20 },
  { item: 'orange', count: 30 }
]

In this example

  • The map method iterates over the array.
  • For each element, it creates an object with items from the array.
  • The index ensures elements from both arrays are matched correctly.

2. Using for Loop (Flexible Approach)

A traditional for loop gives more control and works well for arrays of varying lengths.

JavaScript 
const a = ["car", "bike", "bus"];
const n = [5, 15, 25];

const res = [];
for (let i = 0; i < a.length; i++) {
    res.push({ vehicle: a[i], count: n[i] });
}
console.log(res);

Output
[
  { vehicle: 'car', count: 5 },
  { vehicle: 'bike', count: 15 },
  { vehicle: 'bus', count: 25 }
]
  • The loop runs for the length of the array.
  • At each iteration, it creates an object and pushes it into the result array.
  • The n[i] ensures values are picked from the second array.

3. Using reduce (Advanced Approach)

The reduce method can be used to build an array of objects while accumulating results.

JavaScript 
const a = ["pen", "pencil", "eraser"];
const n = [2, 5, 3];
const res = a.reduce((acc, item, index) => {
    acc.push({ product: item, quantity: n[index] });
    return acc;
}, []);
console.log(res);

Output
[
  { product: 'pen', quantity: 2 },
  { product: 'pencil', quantity: 5 },
  { product: 'eraser', quantity: 3 }
]
  • reduce initializes an empty array as the accumulator (acc).
  • For each element in a, an object is created using item and n[index].
  • The object is pushed into the accumulator, which is returned at the end.

4. Handling Arrays of Different Lengths

When the arrays have different lengths, you can stop the iteration at the shortest array.

JavaScript 
const a = ["rose", "lily"];
const n = [100, 200, 300];

const res = [];
const minLength = Math.min(a.length, n.length);
for (let i = 0; i < minLength; i++) {
    res.push({ flower: a[i], price: n[i] });
}
console.log(res);

Output
[ { flower: 'rose', price: 100 }, { flower: 'lily', price: 200 } ]
  • The Math.min function ensures the loop runs only up to the shortest array length.
  • This prevents errors caused by accessing out-of-bound indices.

5. Custom Zip Function for Reusability

If you frequently combine arrays, you can create a reusable zip function.

JavaScript 
const zip = (keys, values) => {
    return keys.map((key, index) => {
        return { [key]: values[index] };
    });
};

const a = ["item1", "item2", "item3"];
const n = [1, 2, 3];

const res = zip(a, n);
console.log(res);

Output
[ { item1: 1 }, { item2: 2 }, { item3: 3 } ]
  • The zip function combines the keys and values into an array of objects.
  • It works generically for any two arrays.

Conclusion

  • For simplicity and readability, map is the most popular and widely used method.
  • Use for loops for more control and flexibility.
  • Use reduce for advanced use cases.
  • Always handle edge cases, such as arrays of different lengths, to avoid errors.
  • For reusable solutions, create custom helper functions like zip.

Next Article
JavaScript - Create Array of Objects From Multiple Arrays
author
amansingla
Improve
Article Tags :

Similar Reads