JavaScript - Create Array of Objects From Multiple Arrays

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.

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

console.log(res);

[
  { 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.

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);

[
  { 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.

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);

[
  { 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.

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);

[ { 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.

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);

[ { 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.