Learn How to combine objects in javascripts/lodash

Learn How to combine objects in javascripts/lodash

It is a continuous post of following previous articles on the lodash library.

This article covers different ways to combine or join objects with different values using javascript and lodash.
Let us see an example of two objects. Each object has different properties.

const employee = {
  name: "kiran",
  id: 12,
};
const department = {
  type: "Development",
};

We will see various ways to combine these two objects.

Lodash Object Assign Method Example

assign method in this library is used to assign the source object values to target object values. It returns one object by combining the source and the target object. Syntax

_.assign(target, [sources]);

the parameters object is a target object source is a source object

const source = {
  name: "kiran",
  id: 12,
};
const department = {
  type: "Development",
};

console.log(_.assign(source, department)); // returns {name: "kiran", id: 12, type: "Development"}
console.log(_.assign({ id: 3 }, { id: 5, name: "kiran" })); // returns {id: 5, name: "kiran"}

Lodash object extends the method example

extend method also do the same thing by copying object .properties. Extend method works like the same assignIn method in lodash

console.log(_.extend({ id: 3 }, { id: 5, name: "kiran" })); // returns {id: 5, name: "kiran"}

Merge Objects using the merge method

Merge also merge the object properties into source and destination.
if the source contains properties of child objects, the child objects hierarchy will be merged into destination child objects. Please see the below example for understanding.

_.merge ({}, {name:{value:'value'}}, {name:{test:'testvalue'}}) // outputs {name:{value: "value", test:"testvalue"}}

Difference between merging and extending/assign methods

Please see the below table to compare these methods.

Extend/assign method

Merge

if the source contains simple properties, It will copy/overwrite those exact values to the destination if the source contains properties of objects, the Entire object will be placed in the destination child object place

if it is simple property, copy it like this. if the source contains the property of objects, then it will do recursive and map those values to a destination. So it merges child objects also does not copy it

Assign method only handles undefined values, extends method skips it

Merge skip undefined values

It will not work on Arrays only on objects.

It will not work on Arrays only on objects

We will see the example of merge/extend/assign for undefined, null, and child objects.

//undefined values
_.assign      ({}, { name: 'cloud'  }, { name: undefined }) // outputs { name: undefined }
_.merge       ({}, { name: 'cloud'  }, { name: undefined }) // outputs { name: 'cloud'}

//null values
_.assign      ({}, { name: 'cloud'  }, { name: null }) // outputs { name: null }
_.merge       ({}, { name: 'cloud'  }, { name: null }) // outputs { name: null }

// child objects
_.assign      ({}, {name:{value:'value'}}, {name:{test:'testvalue'}}) // outputs {name:{test:"testvalue"}}
_.merge      ({}, {name:{value:'value'}}, {name:{test:'testvalue'}}) // outputs {name:{value: "value", test:"testvalue"}}

Merge/Join objects using Javascript code

We can also achieve joining two objects using the object.assign() or spread operator This way can be used if you don’t want to have to use the lodash library. The advantage of the lodash library is it will work with an older version of browsers.

The advantages of javascript are can also merge arrays. with the above lodash methods, It is not possible for arrays.

Join object using object.assign()

object.assign() method is introduced in javascript as part of ES6 language. It copies from a source to a target and returns a new merged object. source and target have different object properties

console.log(Object.assign(source, department)); // returns {name: "kiran", id: 12, type: "Development"}
console.log(Object.assign({}, source, department)); // returns {name: "kiran", id: 12, type: "Development"}

Combine objects using the spread operator

Spread operator introduced in es6. three dots represent the spread operator
Syntax is …array
Spread operators for variables are used in a method parameter where the method expects zero or more arguments.

console.log({ ...source, ...department }); // returns {name: "kiran", id: 12, type: "Development"}