Tuesday, August 7, 2018

Learn How to combine objects in javascripts/lodash

Lodash Examples

This 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 this two objects

Lodash Object Assign Method Example 

assign method in this library is used to assigns the source object values to target object values. It returns one object by combine 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 extend the method example

extend method also do the same thing by copying object .properties. Extend method works like same assignIn method in lodash
console.log(_.extend({id:3}, {id:5,name:"kiran"})); // returns {id: 5, name: "kiran"}

Merge Objects using merge method 

Merge also merge the object properties into source and destination.
if the source contains properties of child objects, child objects hierarchy will be merged into as destination child objects. Please see below example for understanding
_.merge ({}, {name:{value:'value'}}, {name:{test:'testvalue'}}) // outputs {name:{value: "value", test:"testvalue"}}

 Difference between merge and extend/assign methods

Please see the below table to compare these methods
Extend/assign method Merge
if source contains simple properties, It will copy/overwrites those exact values to the destination if source contains properties of objects, the Entire object will be placed in destination child object place if it is simple property, copy as this. if the source contains property of objects, then it will do recursive and map those values to a destination. So it merges child object also not copy it
Assign method only handles undefined values, extends method skips it Merge skip undefined values
Will not works on Arrays only objects Will not work on Arrays only 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 object.assign() or spread operator This way can be used if you don't want to have to use lodash library. The advantage with lodash library is it will work with older version of browsers.
The advantages with javascript is can also merge arrays. with 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 target and return 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 object using spread operator 

Spread operator introduced in es6. three dots represents spread operator
Syntax is  ...array
Spread operators for variables are used in a method parameter where method expects zero or more arguments
console.log({ ...source, ...department }); // returns {name: "kiran", id: 12, type: "Development"}


EmoticonEmoticon

Note: Only a member of this blog may post a comment.