Skip to main content

How to Create an Object from Two Arrays in JavaScript

A common data transformation task in JavaScript is to "zip" two arrays together to create an object, where one array provides the keys and the other provides the corresponding values. This is useful for combining headers with row data or creating a structured object from separate lists.

This guide will teach you the modern and most declarative method for this conversion using Object.fromEntries() with map(). We will also cover the functional reduce() method and the classic forEach loop to give you a comprehensive understanding of the different approaches.

The Core Problem: Zipping Keys and Values​

The goal is to take two separate arrays and combine them into a single object.

// Problem: How to combine these two arrays into a single object?
const keys = ['name', 'age', 'country'];
const values = ['Alice', 30, 'Canada'];

// Desired Output: { name: 'Alice', age: 30, country: 'Canada' }
note

This assumes that the arrays are of the same length and that the element at each index in the keys array corresponds to the element at the same index in the values array.

The Object.fromEntries() method is the perfect tool for this job. It is designed to create an object from an iterable of [key, value] pairs. We can easily create this structure by mapping over our keys array.

The logic:

  1. Iterate over the keys array using map().
  2. For each key at a given index, create a new [key, value] pair by getting the value from the values array at the same index.
  3. This map() operation results in an array of [key, value] pairs.
  4. Pass this array directly to Object.fromEntries().

This clean, one-line solution is the best practice.

const keys = ['name', 'age', 'country'];
const values = ['Alice', 30, 'Canada'];

const obj = Object.fromEntries(
  keys.map((key, index) => [key, values[index]])
);

console.log(obj);

Output:

{ name: 'Alice', age: 30, country: 'Canada' }

The Functional Method: Array.prototype.reduce()​

Another powerful, functional approach is to use the Array.prototype.reduce() method. This method iterates over the keys array to "reduce" it to a single final value—our new object.

const keys = ['name', 'age', 'country'];
const values = ['Alice', 30, 'Canada'];

const obj = keys.reduce((accumulator, key, index) => {
  accumulator[key] = values[index];
  return accumulator;
}, {}); // The `{}` is the initial value for our accumulator.

console.log(obj);

Output:

{ name: 'Alice', age: 30, country: 'Canada' }

How it works:

  • The reduce method starts with an empty object ({}).
  • On each iteration, it adds a new property to this object (the accumulator) using the current key and the corresponding value from the other array, and then returns the modified object for the next iteration.

The Manual Looping Method: forEach or for...of​

The classic imperative approach is to create an empty object and manually populate it within a loop. This is more verbose but can be easier to understand for beginners.

const keys = ['name', 'age', 'country'];
const values = ['Alice', 30, 'Canada'];
const obj = {};

keys.forEach((key, index) => {
  obj[key] = values[index];
});

console.log(obj);

Output:

{ name: 'Alice', age: 30, country: 'Canada' }
note

While this works perfectly, the functional methods like Object.fromEntries() and reduce() are generally preferred in modern JavaScript for their conciseness and declarative style.

Conclusion​

There are several effective ways to create an object from two arrays in JavaScript.

  • The Object.fromEntries(keys.map(...)) method is the recommended best practice. It is the most modern, declarative, and readable approach.
  • The reduce() method is a powerful functional alternative that is also highly effective.
  • Manual looping with forEach is a perfectly valid but more verbose, imperative approach.

For creating clean, modern, and maintainable code, Object.fromEntries() is the superior choice.

Table of Contents