How to convert an array into an object?

Using reduce for array to object transformation

Captain reduce() is here for efficient and clean array to object conversion:

const array = ['A', 'B', 'C'];
// Reduce, reuse, recycle ♻️ - saving the world one object at a time
const objectWithReduce = array.reduce((obj, item, index) => {
  obj[index] = item;
  return obj;
}, {});
console.log(objectWithReduce); // Outputs: {0: 'A', 1: 'B', 2: 'C'}


Dealing with missing elements in arrays

Beware of the holes! "Undefined" elements can be a thorn in your conversion process, but we can handle them just fine:

const sparseArray = ['A', , 'C'];
// Nothing gets past me! 👀 - avoiding undefined intruders
const objectFromSparseArray = sparseArray.reduce((obj, item, index) => {
  if (item !== undefined) {
    obj[index] = item;
  }
  return obj;
}, {});
console.log(objectFromSparseArray); // Outputs: {0: 'A', 2: 'C'}


Modern JavaScript to the rescue - Using ES6 spread

Your ES6 survival kit has the spread operator {...array} that makes it a breeze to convert arrays to objects:

const es6Array = ['X', 'Y', 'Z'];
// Ladies and gentlemen, start your engines 🏎💨 - ES6 spread 
const objectWithSpread = {...es6Array};
console.log(objectWithSpread); // Outputs: {0: 'X', 1: 'Y', 2: 'Z'}


Conquest from the end - reduceRight

Do you fancy starting from the other end? reduceRight() would be the weapon of your choice:

const reversedArray = ['end', 'middle', 'start'];
// Back to the Future: reduceRight Edition 🔙
const objectWithReduceRight = reversedArray.reduceRight((obj, item, index) => {
  obj[index] = item;
  return obj;
}, {});
console.log(objectWithReduceRight); // Outputs: {0: 'start', 1: 'middle', 2: 'end'}


Polyfills - Supporting older browsers

To ensure your code runs smoothly even on Jurassic-era browsers 🦖, enter the world of polyfills:

Polyfill for Array.prototype.reduce:

if (!Array.prototype.reduce) {
  Array.prototype.reduce = function(callback /*, initialValue*/) {
    // Polyfill for reduce: Because every browser deserves to reduce() 🌏
  };
}


Polyfill for Object.keys:

if (!Object.keys) {
  Object.keys = function(obj) {
    // Polyfill for Object.keys: Opening locked doors 🚪
  };
}


Taking reduce to the next level

See how reduce can do wonders by switching keys and values in an array of objects:

const people = [{name: 'Alice'}, {name: 'Bob'}, {name: 'Charlie'}];
// Swapping places, keys and values are dancing the cha-cha-cha 💃🕺
const swapKeyValue = people.reduce((obj, item, index) => {
  const key = Object.keys(item)[0];
  obj[item[key]] = index;
  return obj;
}, {});
console.log(swapKeyValue); // Outputs: {Alice: 0, Bob: 1, Charlie: 2}


Pulling keys in objects away from array indices

Numeric keys in objects are like wild horses - free from the orderliness of array indices. They are strings and march to the beat of their own drum, sorting entries in the order they were added to the object.