Create an Object from Two Arrays in JavaScript

Create an Object from Two Arrays #

To create an object from two arrays:

1. Use the Array.forEach() method to iterate over the first array.
2. Use the index to access the element from the second array.
3. On each iteration, assign the key-value pair to an object.

Copied!
const arr1 = ['name', 'age', 'country'];
const arr2 = ['Tom', 30, 'Chile'];

const obj = {};

arr1.forEach((element, index) => {
  obj[element] = arr2[index];
});

// 👉️ {name: 'Tom', age: 30, country: 'Chile'}
console.log(obj);

The function we passed to the Array.forEach method gets called with each element in the array.

The function gets passed the following 3 parameters:

1. The current element
2. The index of the iteration
3. The array itself

After the method has finished iterating, the object contains the key-value pairs from the two arrays.

An alternative, but more functional approach is to use the Array.reduce method.

To create an object from two arrays:

1. Use the reduce() method to iterate over the first array.
2. Provide an empty object as the initial value for the accumulator.
3. Using the index, assign the key-value pair to the accumulated object.
4. Return the result.

Copied!
const arr1 = ['name', 'age', 'country'];
const arr2 = ['Tom', 30, 'Chile'];

const obj = arr1.reduce((accumulator, element, index) => {
  return {...accumulator, [element]: arr2[index]};
}, {});

// 👇️️ {name: 'Tom', age: 30, country: 'Chile'}
console.log(obj);

We provided an empty object as the initial value for the accumulator variable.

On each iteration, we use the spread syntax (...) to unpack the key-value pairs of the accumulator into a new object, then add the current key-value pair and return the result.

Once the reduce method has iterated over the entire array, the accumulator object will contain the key-value pairs from the two arrays.

Further Reading #

• Cannot convert undefined or null to Object in JS
• Replace a comma with a Dot using JavaScript