Lodash - difference between extend assign and merge

Question

In the Lodash library  can someone provide a better explanation of merge and extend   assign     Its a simple question but the answer evades me nonetheless

User · Answer

Another difference to pay attention to is handling of undefined values:

mergeInto = { a: 1}
toMerge = {a : undefined, b:undefined}
lodash.extend({}, mergeInto, toMerge) // => {a: undefined, b:undefined}
lodash.merge({}, mergeInto, toMerge)  // => {a: 1, b:undefined}

So merge will not merge undefined values into defined values.

User · Answer

If you want a deep copy without override while retaining the same obj reference  obj     assign obj    merge obj   source

User · Answer

Here s how extend assign works  For each property in source  copy its value as-is to destination  if property values themselves are objects  there is no recursive traversal of their properties  Entire object would be taken from source and set in to destination   Here s how merge works  For each property in source  check if that property is object itself  If it is then go down recursively and try to map child object properties from source to destination  So essentially we merge object hierarchy from source to destination  While for extend assign  it s simple one level copy of properties from source to destination   Here s simple JSBin that would make this crystal clear  http   jsbin com uXaqIMa 2 edit js console  Here s more elaborate version that includes array in the example as well  http   jsbin com uXaqIMa 1 edit js console

User · Answer

Lodash version 3 10 1  Methods compared     merge object   sources    customizer    thisArg     assign object   sources    customizer    thisArg     extend object   sources    customizer    thisArg     defaults object   sources     defaultsDeep object   sources     Similarities   None of them work on arrays as you might expect   extend is an alias for   assign  so they are identical All of them seem to modify the target object  first argument  All of them handle null the same   Differences     defaults and   defaultsDeep processes the arguments in reverse order compared to the others  though the first argument is still the target object    merge and   defaultsDeep will merge child objects and the others will overwrite at the root level Only   assign and   extend will overwrite a value with undefined   Tests  They all handle members at the root in similar ways     assign             a   a       a   bb          gt    a   bb      merge              a   a       a   bb          gt    a   bb      defaults           a   a       a   bb          gt    a   a       defaultsDeep       a   a       a   bb          gt    a   a         assign handles undefined but the others will skip it    assign             a   a        a  undefined         gt    a  undefined     merge              a   a        a  undefined         gt    a   a      defaults           a  undefined      a   bb          gt    a   bb      defaultsDeep       a  undefined      a   bb          gt    a   bb      They all handle null the same    assign             a   a        a  null         gt    a  null     merge              a   a        a  null         gt    a  null     defaults           a  null      a   bb          gt    a  null     defaultsDeep       a  null      a   bb          gt    a  null     But only   merge and   defaultsDeep will merge child objects    assign            a  a  a      a  b  bb          gt     a      b    bb       merge             a  a  a      a  b  bb          gt     a      a    a    b    bb       defaults          a  a  a      a  b  bb          gt     a      a    a       defaultsDeep      a  a  a      a  b  bb          gt     a      a    a    b    bb       And none of them will merge arrays it seems    assign            a   a      a   bb          gt     a      bb        merge             a   a      a   bb          gt     a      bb        defaults          a   a      a   bb          gt     a      a         defaultsDeep      a   a      a   bb          gt     a      a         All modify the target object  a  a  a      assign       a   b  bb        a   gt    a   a   b   bb    a  a  a      merge        a   b  bb        a   gt    a   a   b   bb    a  a  a      defaults     a   b  bb        a   gt    a   a   b   bb    a  a  a      defaultsDeep a   b  bb        a   gt    a   a   b   bb      None really work as expected on arrays  Note  As  Mistic pointed out  Lodash treats arrays as objects where the keys are the index into the array     assign             a      bb         gt     bb      merge              a      bb         gt     bb      defaults           a      bb         gt     a       defaultsDeep       a      bb         gt     a        assign             a   b      bb         gt     bb    b      merge              a   b      bb         gt     bb    b      defaults           a   b      bb         gt     a    b       defaultsDeep       a   b      bb         gt     a    b

User · Answer

It might be also helpful to consider what they do from a semantic point of view          assign        will assign the values of the properties of its second parameter and so on     as properties with the same name of the first parameter   shallow copy  amp  override           merge        merge is like assign but does not assign objects but replicates them instead     deep copy           defaults        provides default values for missing values     so will assign only values for keys that do not exist yet in the source           defaultsDeep        works like  defaults but like merge will not simply copy objects    and will use recursion instead    I believe that learning to think of those methods from the semantic point of view would let you better  guess  what would be the behavior for all the different scenarios of existing and non existing values

[javascript] Lodash - difference between .extend() / .assign() and .merge()

Examples related to javascript

Examples related to lodash