Merge Objects in JavaScript

When you use JavaScript, you might come across situations where you want to combine objects to make a new one with all their properties. In this article, we’ll look at different ways to do this, using both classic JavaScript and the newer ES6 syntax. Let’s get started!

Method 1: Using the Spread Operator (ES6)

In ES6, there’s a handy tool called the spread operator ( … ). It helps you blend two or more objects, forming a fresh one that inherits properties from all the merged objects. Here’s an example:

const obj1 = { name: 'John' };
const obj2 = { age: 30 };
const obj3 = { city: 'London' };

const mergedObject = { ...obj1, ...obj2, ...obj3 };

console.log(mergedObject);

In this example, we define three objects (obj1, obj2, and obj3), each with different properties. By using the spread operator (...), we can merge these objects into mergedObject, which will contain all the properties from the source objects.

Method 2: Using Object.assign()

Another approach to merging objects is by utilizing the Object.assign() method, available in both ES6 and older JavaScript versions:

const obj1 = { name: 'John' };
const obj2 = { age: 30 };
const obj3 = { city: 'London' };

const mergedObject = Object.assign({}, obj1, obj2, obj3);

console.log(mergedObject);

In this example, we create an empty target object {} as the first argument to Object.assign(). Then, we pass in the source objects (obj1, obj2, and obj3) as subsequent arguments.

The Object.assign() method merges the properties from the source objects into the target object, giving us the desired merged object.

Both the spread operator ( … ) and the Object.assign() method do a shallow merging. This means that if an object has a property pointing to another object, the original object’s property and the result target object’s property will both point to the same object.

Method 3: Using a Custom Function

If you prefer a more customized approach, you can create a custom function to merge objects. Here’s an example:

function mergeObjects(...objects) {
  const mergedObject = {};

  objects.forEach(obj => {
    for (let prop in obj) {
      if (obj.hasOwnProperty(prop)) {
        mergedObject[prop] = obj[prop];
      }
    }
  });

  return mergedObject;
}

const obj1 = { name: 'John' };
const obj2 = { age: 30 };
const obj3 = { city: 'London' };

const mergedObject = mergeObjects(obj1, obj2, obj3);

console.log(mergedObject);

In this approach, we define a function mergeObjects() that accepts multiple objects using the rest parameter syntax (...objects). Inside the function, we iterate over each object and its properties using a forEach loop and for...in loop. We then assign each property to the mergedObject. Finally, we return the merged object.

Conclusion

Merging JavaScript objects is a common task, and with the techniques outlined in this article, you can easily combine object properties to create a new object.

Whether you choose to use the spread operator, Object.assign(), or a custom function, the goal remains the same – to merge objects effectively and efficiently.

Remember to choose the method that best suits your project’s requirements and take advantage of the flexibility provided by JavaScript’s object merging capabilities.