How to Convert an Array Into an Object Using JavaScript

How do you convert an array into a new object using Javascript?

You can convert an array into an object using one of these three methods:

1. The Object.assign() function.
2. Loop over the array and construct a new object.
3. The reduce() function.

We'll go over each of those methods in this article and provide some code examples for you to use on your website or application.

Let's get started!

Table of Contents

1. Object.assign()
2. Loop Over Array & Construct a New Object
3. Reduce()

1. Object.assign()

Object.assign() is the first method we'll cover for converting an array to an object. This method is used to copy values from one or more source objects to a new object.

The function takes two parameters:

1. The target object you wish to modify (this will be returned by the function).
2. The source object of where to extract the properties from.

If you give the function an array as the source data, it will loop over each item in the array and create a new object where the key is the array index of the value.

Here's what it looks like in practice:

const array = ["Johnny", "Billy", "Sandy"]

const newObject = Object.assign({}, array)

// newObject = { "0": "Johnny", "1": "Billy", "2": "Sandy" }

Notice how each item in the new object uses the array index of the value as the key (i.e. "0", "1", etc.).

And you can now access each item in the new object using the conventional dot notation method (foo.bar).

In the next section, we'll show you how to manually loop over an array to construct a new object.

2. Loop Over Array & Construct a New Object

For the second method, we're going to loop over each item in an array and add each of its values as a new property in a new object. To match the object returned in the last section, the key value will be the array index for each item.

In the code example, we'll be using a for loop to enumerate over each item in the array. But, you can use any other method of looping over an array that you wish (while, while/do, etc).

Here's the full code example:

const array = ["Johnny", "Billy", "Sandy"]

let newObject = {}

for (let i=0; i < array.length; i++) {
  if (array[i] !== undefined) {
    newObject[i] = array[i]
  }
}

// newObject = { "0": "Johnny", "1": "Billy", "2": "Sandy" }

First, we declare an empty object called newObject that will serve as the new object that'll hold our array items.

Then, we use a for loop to iterate over each item in the array. If the value doesn't have an undefined value, we add the item as a new property to the newObject using the array index as its key value.

If you console.log() the new object, you'll see that the same object as the first method is returned.

3. Reduce()

The last example we'll show you is the reduce() method. The reduce() method executes a given function for each item of the array and stores the values in an accumulator entity, which will be an object in the case we're using it for.

We'll call the reduce() function directly on the array and give it a parameter function that constructs a new object using each item in the array. The array index value will be used as the object key.

The code looks like the following:

const array = ["Johnny", "Billy", "Sandy"]

const newObject = array.reduce(function(result, item, index) {
  result[index] = item
  return result
}, {})

// newObject = { "0": "Johnny", "1": "Billy", "2": "Sandy" }

If you console.log() the new object, you'll see that the same object as both the first and second method is returned.

That's the last method we'll cover in this article.