How to Create an Object From Two Arrays in JavaScript

In JavaScript, combining two arrays into an object is a common task, especially when working with data that’s structured as key-value pairs. For instance, you might have one array containing keys and another containing values, and you want to merge them into a single object. This article will guide you through several methods to achieve this.

1. Using the reduce Method

The reduce method is a powerful tool for transforming arrays into objects or other data structures. Here’s how you can use it:

const keys = ['name', 'age', 'city'];
const values = ['Alice', 25, 'New York'];

const obj = keys.reduce((acc, key, index) => {
acc[key] = values[index];
return acc;
}, {});

console.log(obj);
// Output: { name: 'Alice', age: 25, city: 'New York' }

Explanation

  • The reduce method iterates through the keys array.
  • It builds an object (acc) by adding key-value pairs where keys come from the keys array and values are matched by their index from the values array.

2. Using the Object.fromEntries Method

Introduced in ES2019, Object.fromEntries creates an object from an array of key-value pairs. You can combine it with map to achieve the desired result:

const keys = ['name', 'age', 'city'];
const values = ['Alice', 25, 'New York'];

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

console.log(obj);
// Output: { name: 'Alice', age: 25, city: 'New York' }

Explanation:

  • The map method creates an array of key-value pairs ([['name', 'Alice'], ['age', 25], ['city', 'New York']]).
  • Object.fromEntries converts this array of pairs into an object.

3. Using a for Loop

A for loop provides a clear and intuitive approach:

const keys = ['name', 'age', 'city'];
const values = ['Alice', 25, 'New York'];

const obj = {};
for (let i = 0; i < keys.length; i++) {
obj[keys[i]] = values[i];
}

console.log(obj);
// Output: { name: 'Alice', age: 25, city: 'New York' }

Explanation:

  • The loop iterates over the keys array.
  • For each key, it assigns the corresponding value from the values array to the object.

4. Using the forEach Method

The forEach method is another simple way to iterate through arrays:

const keys = ['name', 'age', 'city'];
const values = ['Alice', 25, 'New York'];

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

console.log(obj);
// Output: { name: 'Alice', age: 25, city: 'New York' }

Explanation:

  • forEach iterates over the keys array and assigns values to the object by their index.

5. Using zip-like Functionality

If you're familiar with the concept of zipping arrays (pairing elements from two arrays), you can use a helper function:

const keys = ['name', 'age', 'city'];
const values = ['Alice', 25, 'New York'];

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

const obj = zipToObject(keys, values);

console.log(obj);
// Output: { name: 'Alice', age: 25, city: 'New York' }

Explanation:

  • The function abstracts the process of zipping keys and values into pairs and converting them to an object.

6. Handling Mismatched Arrays

If the keys and values arrays have different lengths, you can handle the mismatch to avoid unexpected behavior:

const keys = ['name', 'age', 'city'];
const values = ['Alice', 25]; // Shorter array

const obj = keys.reduce((acc, key, index) => {
acc[key] = values[index] !== undefined ? values[index] : null;
return acc;
}, {});

console.log(obj);
// Output: { name: 'Alice', age: 25, city: null }

Explanation:

  • This ensures that missing values are handled gracefully by assigning null for keys without corresponding values.

Use Cases

  • API Data: Merging keys from a data schema with values from an API response.
  • Form Handling: Creating objects from form field names and user input values.
  • Dynamic Object Construction: Generating configuration objects on-the-fly.

Conclusion

Creating an object from two arrays in JavaScript can be accomplished in multiple ways depending on your needs. Whether you prefer functional programming with reduce or Object.fromEntries or a more straightforward approach with loops, JavaScript provides the flexibility to handle this task efficiently. Experiment with these methods to find the one that best fits your use case!

Next Article ❯
Next ❯ ❮ Previous