Article Categories

Selected Reading

How to merge objects into a single object array with JavaScript?

Javascript Web Development Object Oriented Programming

In JavaScript, you can merge multiple objects from an array into a single object using various methods. This is useful when you have an array of objects with different properties and want to combine them.

Using Object.assign()

The Object.assign() method copies properties from source objects to a target object. Using the spread operator with it merges all objects in an array:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Merge Objects</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 16px;
      font-weight: 500;
      color: rebeccapurple;
      margin: 10px 0;
   }
   .sample {
      color: red;
      margin: 10px 0;
   }
</style>
</head>
<body>
<h1>Merge Objects into Single Object</h1>

<div class="sample">
Original Array: [{id:22, class:7}, {name:'Rohan', age:12}, {state:'Delhi', country:'India'}]
</div>

<button class="Btn">MERGE OBJECTS</button>
<div class="result"></div>

<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   
   let personArray = [
      { id: 22, class: 7 },
      { name: "Rohan", age: 12 },
      { state: "Delhi", country: "India" }
   ];
   
   BtnEle.addEventListener("click", () => {
      // Merge objects using Object.assign()
      let mergedObject = Object.assign({}, ...personArray);
      
      resEle.innerHTML = "<h3>Merged Object:</h3>";
      for (let key in mergedObject) {
         resEle.innerHTML += `${key}: ${mergedObject[key]}<br>`;
      }
   });
</script>
</body>
</html>

Using Spread Operator

A more modern approach uses the spread operator to merge objects:

let objectArray = [
   { id: 22, class: 7 },
   { name: "Rohan", age: 12 },
   { state: "Delhi", country: "India" }
];

// Method 1: Using Object.assign()
let merged1 = Object.assign({}, ...objectArray);
console.log("Using Object.assign():", merged1);

// Method 2: Using spread operator with reduce
let merged2 = objectArray.reduce((acc, obj) => ({ ...acc, ...obj }), {});
console.log("Using reduce + spread:", merged2);

Using Object.assign(): { id: 22, class: 7, name: 'Rohan', age: 12, state: 'Delhi', country: 'India' }
Using reduce + spread: { id: 22, class: 7, name: 'Rohan', age: 12, state: 'Delhi', country: 'India' }

Handling Property Conflicts

When objects have the same property names, later objects override earlier ones:

let conflictArray = [
   { name: "John", age: 25 },
   { name: "Jane", city: "New York" },
   { age: 30, country: "USA" }
];

let result = Object.assign({}, ...conflictArray);
console.log("Merged with conflicts:", result);

Merged with conflicts: { name: 'Jane', age: 30, city: 'New York', country: 'USA' }

Comparison of Methods

Method	Performance	Readability	Browser Support
`Object.assign()`	Fast	Good	ES6+
`reduce() + spread`	Slower	Excellent	ES6+

Conclusion

Use Object.assign({}, ...array) for the most efficient object merging. The spread operator with reduce offers better readability but slightly lower performance for large arrays.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

344 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next