Blog

To create an object from two arrays in JavaScript, you can use any of these methods –

1. Use the Array.forEach() method to iterate over the first array and use the index to access the second array.
2. Use the Array.reduce() method to iterate over the first array and use the index to access the second array.

Let’s discuss each of these methods in detail below.

Create An Object From Two Arrays In JavaScript

Use The Array.forEach() Method

The Array.forEach() method is used to iterate over an array and execute a given function for each element in the array.

Syntax:

array.forEach(function(currentValue, index, arr), thisValue)

Parameters:

function(currentValue, index, arr): It is required and used to specify the function to be executed for each element.

currentValue: It is required and used to specify the value of the current element being processed in the array.

index(optional): It is optional and used to specify the index of the current element being processed in the array.

arr(optional): It is optional and used to specify the array object being traversed.

thisValue(optional): It is optional and used to specify the value to be used as this inside the function.

Example:

Here is an example of how to use the forEach() method to create an object from two arrays.

var arr1 = [‘a’, ‘b’, ‘c’];

var arr2 = [‘1’, ‘2’, ‘3’];

var obj = {};

arr1.forEach(function(key, i) {

  obj[key] = arr2[i];

});

console.log(obj); // { a: ‘1’, b: ‘2’, c: ‘3’ }

Use The Array.reduce() Method

The Array.reduce() method is used to apply a function to each element in the array from left to right and reduce it to a single value.

Syntax:

array.reduce(function(accumulator, currentValue, currentIndex, arr), initialValue)

Parameters:

function(accumulator, currentValue, currentIndex, arr): It is required and used to specify the function to be executed for each element.

accumulator: It is required and used to specify the accumulator value which gets updated after each iteration.

currentValue: It is required and used to specify the value of the current element being processed in the array.

currentIndex(optional): It is optional and used to specify the index of the current element being processed in the array.

arr(optional): It is optional and used to specify the array object being traversed.

initialValue(optional): It is optional and used to specify the value to be used as the first argument to the first call of the function.

Example:

Here is an example of how to use the reduce() method to create an object from two arrays.

var arr1 = [‘a’, ‘b’, ‘c’];

var arr2 = [‘1’, ‘2’, ‘3’];

var obj = arr1.reduce(function (acc, key, i) {

  acc[key] = arr2[i];

  return acc;

}, {});

console.log(obj); // { a: ‘1’, b: ‘2’, c: ‘3’ }

You can also use the spread operator to create an object from two arrays as follows.

var arr1 = [‘a’, ‘b’, ‘c’];

var arr2 = [‘1’, ‘2’, ‘3’];

var obj = arr1.reduce((acc, key, i) => ({...acc, [key]:arr2[i]}), {});

console.log(obj); // { a: ‘1’, b: ‘2’, c: ‘3’ }

Here the spread operator expands the accumulator object and adds the key-value pairs of the second array to it.

Conclusion

In this article, you have learned how to create an object from two arrays in JavaScript using different methods. I hope you find this article helpful and if you have any questions, please feel free to post them in the comments section below.