JavaScript - Create an Object From Two Arrays

In JavaScript, an object can be created by combining two arrays: one for keys and one for values. Each element in the first array becomes a property name in the object, and the corresponding element in the second array becomes its value. This allows dynamic construction of objects from array data.

[Approach -1 ] Using for-each loop

The arr.forEach() method calls the provided function once for each element of the array.

//Driver Code Starts
const a1 = ['name', 'age', 'city'];
const a2 = ['Ajay', 25, 'New Delhi'];

//Driver Code Ends

const res = {};

//a1 elements become keys, a2 elements become values
a1.forEach((key, index) => {

//Driver Code Starts
    res[key] = a2[index];
});

console.log(res);

//Driver Code Ends

{ name: 'Ajay', age: 25, city: 'New Delhi' }

In this example

• Use forEach() to iterate through the keys array.
• The index parameter helps fetch the corresponding value from the values array.
• Populate the result object with the key-value pairs.

[Approach - 2] Using reduce() method

The reduce() method provides a functional programming approach to build the object.

//Driver Code Starts
const a1 = ['name', 'age', 'city'];
const a2 = ['Ajay', 25, 'New Delhi'];

//Driver Code Ends

const res = a1.reduce((obj, key, index) => {
    obj[key] = a2[index];
    return obj;
}, {});

//Driver Code Starts

console.log(res);
//Driver Code Ends

{ name: 'Ajay', age: 25, city: 'New Delhi' }

In this example

• Initialize an empty object ({}) as the accumulator.
• For each key, assign its corresponding value from the values array.
• Return the final result object after completing the iteration.

[Approach - 3] Using Object.assign method

The Object.assign() method is used to copy the values and properties from one or more source objects to a target object.

//Driver Code Starts
const a1 = ['name', 'age', 'city'];
const a2 = ['Ajay', 25, 'New Delhi'];

//Driver Code Ends

const res = Object.assign({}, ...a1.map((key, index) => 
    ({ [key]: a2[index] })));

//Driver Code Starts

console.log(res);
//Driver Code Ends

{ name: 'Ajay', age: 25, city: 'New Delhi' }

In this example

• Use map() to transform the keys array into an array of individual objects where each object represents a single key-value pair.
• Spread (...) the array of key-value pair objects into the Object.assign() method to merge them into a single object.
• The first argument to Object.assign() is an empty object {} to avoid mutating any existing object.

[Approach - 4] Using object.fromEntries() Method

The Object.fromEntries() method in JavaScript is a standard built-in object which is used to transform a list of key-value pairs into an object.

const a1 = ['name', 'age', 'city'];
const a2 = ['Ajay', 25, 'New Delhi'];

const res = Object.fromEntries(a1.map((key, index) =>
    [key, a2[index]]));

console.log(res);

{ '1': 'ram', '2': 'shyam', '3': 'sita', '4': 'gita' }

In this example

• Use map() to combine the keys and values arrays into key-value pairs.
• Pass the resulting array of pairs to Object.fromEntries() to create the object.
• This method is concise and ideal for modern JavaScript.

Which Approach Should we prefer ?

• forEach(): Ideal for beginners or when you need a clear and simple method that works in all JavaScript environments.
• reduce(): Perfect for functional programming enthusiasts who prefer a concise and expressive approach to building objects.
• Object.fromEntries(): The most modern and concise method, especially suited for projects using ES2019 or later.
• Object.assign(): A flexible option that works well if you're already familiar with handling objects.