Creating an Object from an Array using reduce()

The reduce() method is an array method that is used to reduce the elements of an array into a single value. It can be used to turn an array of values into a single object or array. This tutorial will demonstrate how to use reduce() to create an object from an array.

Step 1: Prepare the Array

Before we can use reduce() to create an object, we must have an array of values to work with. We will use a simple array of strings as our data set:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const array = ["value1", "value2", "value3"];

[/dm_code_snippet]

Step 2: Set Up the reduce() Function

Now that we have our array of values, we can set up the reduce() function. reduce() takes two parameters: an accumulator and a current value. In this case, we will use the accumulator to store the resulting object and the current value to assign each element in the array to a property of the object.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const object = array.reduce((acc, curr) => {
  // code goes here
}, {});

[/dm_code_snippet]

The empty object at the end of the reduce() call sets the initial value of the accumulator. This ensures that the accumulator is always an object, even if the array is empty.

Step 3: Add the Properties to the Object

Now we can add the properties to the object. We will use the current value to determine the property name and the value of the property. In this case, we will use the current value to set the property name and assign it a value of true.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

const object = array.reduce((acc, curr) => {
  acc[curr] = true;
  return acc;
}, {});

[/dm_code_snippet]

The accumulator is passed through the reduction process, so any changes made to it will be reflected in the final object.

Step 4: Use the Resulting Object

The resulting object can now be used in any way needed. In this example, we will log the object to the console:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

console.log(object);

[/dm_code_snippet]

This will output an object that looks like this:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

{
  value1: true,
  value2: true,
  value3: true
}

[/dm_code_snippet]

And that’s it! We have successfully used reduce() to create an object from an array.