How to Merge Objects in Javasript

1. Use the object.assign() Function to Merge Objects in JavaScript
2. Use the Spread Operator to Merge Objects in JavaScript
3. Use the array.reduce() Function to Merge Objects in JavaScript
4. Use the jquery.extend() Function to Merge Objects in JavaScript
5. Use a User-Defined Function to Merge Objects in JavaScript

An object is a non-primitive data type that allows us to store data in key-value pairs.

In this tutorial, we will merge two or more objects in JavaScript using different methods.

Use the object.assign() Function to Merge Objects in JavaScript

In JavaScript, the assign() method can iteratively read properties from one or more than one object to a target object. It returns the target object. We can pass the two objects with an empty object to merge them.

Check the code below.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
  store: 'Walmart',
};

var obj3 = Object.assign({}, obj1, obj2);
console.log(obj3);

Output:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Use the Spread Operator to Merge Objects in JavaScript

In JavaScript, the spread operator (…) can unpack all the elements of an array. We can also use it to merge objects.

See the following code on how to use this method.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
  store: 'Walmart',
};

var obj3 = {...obj1, ...obj2};
console.log(obj3);

Output:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Use the array.reduce() Function to Merge Objects in JavaScript

In this, we have used the array.reduce() function, which is used to implement a reducer function (that you provide) on each element in an array. It returns a single output value.

We implement this in the following code snippet.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};
var obj2 = {
  store: 'Walmart',
};

function merge(...arr) {
  return arr.reduce((acc, val) => {
    return {...acc, ...val};
  }, {});
}

var obj3 = merge(obj1, obj2);
console.log(obj3);

Output:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Use the jquery.extend() Function to Merge Objects in JavaScript

jQuery is a library of JavaScript which is light and very fast. It simplifies the use of JavaScript.

The extend() is a jQuery method used to merge two or more objects into an object. It returns an object.
For example,

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};

var obj2 = {
  store: 'Walmart',
};

jQuery.extend(obj1, obj2);

Output:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

Use a User-Defined Function to Merge Objects in JavaScript

In this, we create our own function to return a merged object. It uses the properties of the two objects are merged into a third object.

Check the code below.

var obj1 = {
  fruits: ['Banana', 'Mango'],
  vegetables: ['Potato', 'Broccoli'],
};

var obj2 = {
  store: 'Walmart',
};

function merge_options(obj1, obj2) {
  var obj3 = {};
  for (var key in obj1) {
    obj3[key] = obj1[key];
  }
  for (var key in obj2) {
    obj3[key] = obj2[key];
  }
  return obj3;
};

merge_options(obj1, obj2);

Output:

{fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}