How do I convert an array of Objects into one Object in JavaScript?

Breaking down reduce

The reduce method is your go-to when you need to boil down an array of objects into a single unified object. It works by accumulating the array items, effectively creating a bridge between the many and the one.

const array = [ {name: "Jon"}, {surname: "Snow"}, {city: "Winterfell"} ];

const merged = array.reduce((acc, item) => {
  // Did someone order a merger?
  return {...acc, ...item}}, {});

// outputs: {name: "Jon", surname: "Snow", city: "Winterfell"}


Dealing with unwanted properties

Ever looked at an object and thought, "$$hashKey, we don't need you here!"? Some properties like $$hashKey, often added by frameworks like AngularJS, can be nothing but noise. Filter them out to keep your object clean and relevant.

A note on performance: the comma operator

A boost in performance can be gained using the comma operator in reduce. It lets you cut through multiple statements like a hot knife through butter. Your JavaScript engine will thank you for it!

The right tool for the right job

Know your data. If your array is filled with single-property objects, the reduce with a spread operator is a match made in heaven. If you're dealing with complex objects, tailored mapping may be your path to glory.

Readability vs brevity

Write for humans, not machines. While one-liners can be fun (and sometimes even elegant), remember your code is more often read by people than machines. Prioritize readability and maintainability over brevity.

reduce vs for loop

reduce as a functional approach vs. trusty ol' for loop? Here are both in action:

let mergedObject = {};
for (const item of array) {
  Object.assign(mergedObject, item); // Combine all the things!
}

// and the functional way:
let mergedObject = array.reduce((acc, item) => ({ ...acc, ...item }), {});


Different strokes for different folks, but reduce tends to be more expressive.

Check your outcomes

Is your final, merged object what you expected? If your goal was to get something like {"11": "1100", "22": "2200"}, did you get there? They key is in how the initial object properties are mapped to the final object.

Spread syntax vs Object.assign()

Here's where things get interesting. Object.assign() and spread syntax (...) both achieve object merging, but they're a bit different. Object.assign() may be familiar if you're not fluent in ES6, but spread syntax lends itself to cleaner, shorter code.

Don't believe everything you hear

Files aren't sold by the pound, and code isn't valued per symbol. It may be tempting to flex on fellow coders with your swift one-liners, but remember - clarity and performance should come first. Your future self debugging in the middle of the night will thank you.

Streamlining the merger

Keep your merging sleek by excluding unnecessary properties at the start. Create filters or use mapping to prep your objects before the big reduce showdown.

Complex isn't always better

Remember the KISS principle - Keep It Simple, Stupid! Complex logic might make you feel like a world-class coder, but it will just give you, or the next coder, a headache in the future. Don't make your future self hate your past self.