How to merge objects in JavaScript ES6

Python

In this post, we are going to learn how to merge objects in JavaScript ES6. We are going to method object. assign() and spread operator to merge objects and also merge objects by the same key with examples.

1. Spread operator to merge objects in JavaScript ES6

The spread operator is a new operator introduced in ES6 Standard of JavaScript, It is represented by three dots(…).In this below example we are using the spread operator to merge two objects Employee, conatctDetails.

let Employee = {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'    };

let conatctDetails = {City:'CA',Designation:'Manager',country:'USA',contactDetails:{phoneNo:'01332256',Tele:'01196500000'}};


let employee = { ...Employee,  ...conatctDetails }

console.log(employee);

Output

{
  Empname: 'John',
  salary: 60000,
  EmpID: 1,
  Dep: 'Admin',
  City: 'CA',
  Designation: 'Manager',
  country: 'USA',
  contactDetails: { phoneNo: '01332256', Tele: '01196500000' }
}

2. Object.assign() to merge objects in JavaScript ES6

The object. assign() method copies source object properties to the target object and return the target object.

In this javascript program example, we have two objects Employee,conatctDetails that we are copying to target object EmployeeDetails

We are passing both objects as arguments to assign() method to get the target object.

let Employee = {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'};

let conatctDetails = {City:'CA',Designation:'Manager',country:'USA',contactDetails:{phoneNo:'01332256',Tele:'01196500000'}};

const EmployeeDetails = Object.assign({}, Employee, conatctDetails);

console.log(EmployeeDetails )

Output

{
  Empname: 'John',salary: 60000,  EmpID: 1,
  Dep: 'Admin',  City: 'CA',  Designation: 'Manager',  country: 'USA',
  contactDetails: { phoneNo: '01332256', Tele: '01196500000' }
}

3. Function to Merge objects in JavaScript ES6

In this example, we will understand how to merge objects in javascript by defining a reusable function that is mutipleobjmerge. We can pass multiple objects to this function as parameters to merge them.

let Employee = {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'};

let conatctDetails = {City:'CA',Designation:'Manager',country:'USA',contactDetails:{phoneNo:'01332256',Tele:'01196500000'}};    

function mutipleobjmerge(...arr){
  return arr.reduce((key, val) => {    
    return { ...key, ...val  };
  }, {});
}
  
EmployeeDetails = mutipleobjmerge(Employee,conatctDetails)

console.log(EmployeeDetails)

Output

{
  Empname: 'John',salary: 60000, EmpID: 1,  Dep: 'Admin',
  City: 'CA',Designation: 'Manager',country: 'USA',
  contactDetails: { phoneNo: '01332256', Tele: '01196500000' }
}

4. Merge objects with same properies

In this example, we are merging objects based on the same property. We are iterating over each property of an object “contactDetails” and merging it with the property of object “EmpData” by using the spread operator. After the merging is complete we are printing the result on the console as we can see on the output.

let EmpData = [
    {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'},
    {Empname: 'Racx', salary: 60000,EmpID:3,Dep:'IT'},
    {Empname: 'Max', salary: 70000,EmpID:4,Dep:'IT'},
    {Empname: 'Robin', salary: 80000,EmpID:5,Dep:'IT'}]


let contactDetails =
[{EmpID:1,Designation:'Manager',contactDetails:{phoneNo:'01332256',Tele:'011232345'}},
{EmpID:2,Designation:'Adminhead',contactDetails:{phoneNo:'01332256',Tele:'0456789000'}},
{EmpID:3,Designation:'HR',contactDetails:{phoneNo:'0162234257',Tele:'0456789000'}},
{EmpID:4,Designation:'HOD',contactDetails:{phoneNo:'0162234257',Tele:'0456789000'}},
{EmpID:5,Designation:'SSD',contactDetails:{phoneNo:'0162234257',Tele:'0456789000'}}]



 for (let property in contactDetails) {
    if (contactDetails.hasOwnProperty(property)) {
       contactDetails[property] = {...contactDetails[property], ...EmpData[property]};
    }
  }

console.log(contactDetails)

Output

[
  {
    EmpID: 1,
    Designation: 'Manager',
    contactDetails: { phoneNo: '01332256', Tele: '011232345' },
    Empname: 'John',
    salary: 60000,
    Dep: 'Admin'
  },
  {
    EmpID: 2,
    Designation: 'Adminhead',
    contactDetails: { phoneNo: '01332256', Tele: '0456789000' },
    Empname: 'jack',
    salary: 50000,
    Dep: 'IT'
  },
  {
    EmpID: 3,
    Designation: 'HR',
    contactDetails: { phoneNo: '0162234257', Tele: '0456789000' },
    Empname: 'Racx',
    salary: 60000,
    Dep: 'IT'
  },
  {
    EmpID: 4,
    Designation: 'HOD',
    contactDetails: { phoneNo: '0162234257', Tele: '0456789000' },
    Empname: 'Max',
    salary: 70000,
    Dep: 'IT'
  },
  {
    EmpID: 5,
    Designation: 'SSD',
    contactDetails: { phoneNo: '0162234257', Tele: '0456789000' },
    Empname: 'Robin',
    salary: 80000,
    Dep: 'IT'
  }
]

Related Posts