How to Convert Array Values to Object Keys in JavaScript

To convert array values to object keys in JavaScript:

1. Loop through the array with reduce().
2. For each array item, create a keyed object item.

reduce() will return an object with keys.

Each value for each key is an array item.

JavaScriptCopied!

const arr = ['animal', 'color', 'food'];

const obj = arr.reduce((accumulator, value) => {
  return {...accumulator, [value]: ''};
}, {});

console.log(obj); // {animal: '', color: '', food: ''}

We use the reduce method to combine all the array elements into a single value.

In this example, it takes an array of words and creates an object.

It starts with an empty object {} as the initial value.

Then, for each word in the array, it adds a new property to the object.

The property key is the word and the value is the empty string.

Finally, it returns the resulting object.

So, the output will be an object with properties for each word in the array, where the values are empty strings.

Let’s look at a more realistic example:

JavaScriptCopied!

const tasks = [
  {
    title: 'animal',
    date: '2023-05-20',
    complete: false,
  },
  {
    title: 'color',
    date: '2023-05-21',
    complete: false,
  },
  {
    title: 'food',
    date: '2023-05-22',
    complete: true,
  },
];

const completed = tasks.filter((task) => task.complete);

const obj = completed.reduce((accumulator, task) => {
  return { ...accumulator, [task.title]: task };
}, {});

// { food: { title: 'food', date: '2023-05-22', complete: true } }
console.log(obj);

Trying to convert an array of objects where each item has an id property.

Consider a sample todo-list app.

The state is modeled as an object of key-value pairs.

Each key is an ID. The value is the task object with that ID.

Let’s say we just filtered out a list of tasks to get the completed items.

Then we want to convert it back to objects keyed by an id.

JavaScriptCopied!

const obj = completed.reduce((accumulator, task) => {
  return { ...accumulator, [task.title]: task };
}, {});

Convert array values to object keys with for..of

We can also use a for..of loop to quickly convert array values to object keys:

JavaScriptCopied!

const arr = ['animal', 'color', 'food'];
const obj = {};

for (const value of arr) {
  obj[value] = '';
}

console.log(obj); // {animal: '', color: '', food: ''}

This is a more imperative approach, showing how it’s done step-by-step.

for..of loops through iterable objects like arrays, strings, Maps, NodeList, and Set objects, and generators.

What we do here is basically what reduce() does. We loop through an array and accumulate a value using each array element.

Of course, this for..of also works for an array of objects:

JavaScriptCopied!

const tasks = [
  {
    title: 'animal',
    date: '2023-05-20',
    complete: false,
  },
  {
    title: 'color',
    date: '2023-05-21',
    complete: false,
  },
  {
    title: 'food',
    date: '2023-05-22',
    complete: true,
  },
];

const completed = tasks.filter((task) => task.complete);

const obj = {};

for (const task of completed) {
  obj[task.title] = task;
}

// { food: { title: 'food', date: '2023-05-22', complete: true } }
console.log(obj); 

Convert array values to object keys with forEach()

Anywhere we use for..of, we can also forEach().

So here’s another way to convert an object array to object keys:

JavaScriptCopied!

const arr = ['animal', 'color', 'food'];
const obj = {};

arr.forEach(value => {
  obj[value] = '';
});

console.log(obj); // {animal: '', color: '', food: ''}

forEach() takes a callback and calls it on every item in an array.

Key takeaways

1. To convert array values to object keys in JavaScript, you can use the reduce() method.
   With reduce(), you can create a keyed object item for each array item.
   This results in an object with keys.
   Each value for each key is an array item.
2. Alternatively, you can use a for..of loop to convert array values to object keys.
3. The forEach() loop can also be used to convert an array to an object with keys.

11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.