JavaScript - Create an Object From Two Arrays

Here are the different methods to create an object from two arrays in JavaScript

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.forEach((key, index) => {
    res[key] = a2[index];
});

//Driver Code Starts

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.

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.

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.

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 You Choose?

• 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.

devi_johns

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• javascript-array
• javascript-object
• JavaScript-DSA
• JavaScript-Questions

+2 More