How to deep merge instead of shallow merge

Question

Both Object assign and Object spread only do a shallow merge   An example of the problem      No object nesting const x     a  1   const y     b  1   const z        x     y        a  1  b  1     The output is what you d expect  However if I try this      Object nesting const x     a    a  1     const y     a    b  1     const z        x     y        a    b  1       Instead of    a    a  1  b  1       you get    a    b  1       x is completely overwritten because the spread syntax only goes one level deep  This is the same with Object assign     Is there a way to do this

User · Answer

Ramda which is a nice library of javascript functions has mergeDeepLeft and mergeDeepRight. Any of these work pretty well for this problem. Please take a look on the documentation here: https://ramdajs.com/docs/#mergeDeepLeft

For the specific example in question we can use:

import { mergeDeepLeft } from 'ramda'
const x = { a: { a: 1 } }
const y = { a: { b: 1 } }
const z = mergeDeepLeft(x, y)) // {"a":{"a":1,"b":1}}

User · Answer

It doesn t exist but you can use JSON parse JSON stringify jobs

User · Answer

I know there s a lot of answers already and as many comments arguing they won t work  The only consensus is that it s so complicated that nobody made a standard for it  However  most of accepted answers in SO expose  simple tricks  that are widely used  So  for all of us like me who are no experts but want to write safer code by grasping a little more about javascript s complexity  I ll try to shed some light   Before getting our hands dirty  let me clarify 2 points     DISCLAIMER  I propose a function below that tackles how we deep loop into javascript objects for copy and illustrates what is generally too shortly commented  It is not production-ready  For sake of clarity  I have purposedly left aside other considerations like circular objects  track by a set or unconflicting symbol property   copying reference value or deep clone  immutable destination object  deep clone again    case-by-case study of each type of objects  get set properties via accessors    Also  I did not test performance -although it s important- because it s not the point here either  I ll use copy or assign terms instead of merge  Because in my mind a merge is conservative and should fail upon conflicts  Here  when conflicting  we want the source to overwrite the destination  Like Object assign does    Answers with for  in or Object keys are misleading  Making a deep copy seems so basic and common practice that we expect to find a one-liner or  at least  a quick win via simple recursion  We don t expect we should need a library or write a custom function of 100 lines   When I first read Salakar s answer  I genuinely thought I could do better and simpler  you can compare it with Object assign on x  a 1   y  a  b 1     Then I read the8472 s answer and I thought    there is no getting away so easily  improving already given answers won t get us far   Let s let deep copy and recursive aside an instant  Just consider how  wrongly  people parse properties to copy a very simple object   const y   Object create        proto   1          a    enumerable  true  value  1          Symbol  b        enumerable  true  value  1       Object assign    y   gt     a   1  Symbol b   1      All  enumerable  properties are copied    x y    gt  Object keys y  reduce  acc k    gt  Object assign acc     k   y k      x      y   gt     a   1      Missing a property     x y    gt   for  let k in y  x k  y k  return x      y   gt     a   1   proto   1      Missing a property  Prototype s property is copied too    Object keys will omit own non-enumerable properties  own symbol-keyed properties and all prototype s properties  It may be fine if your objects don t have any of those  But keep it mind that Object assign handles own symbol-keyed enumerable properties  So your custom copy lost its bloom   for  in will provide properties of the source  of its prototype and of the full prototype chain without you wanting it  or knowing it   Your target may end up with too many properties  mixing up prototype properties and own properties   If you re writing a general purpose function and you re not using Object getOwnPropertyDescriptors  Object getOwnPropertyNames  Object getOwnPropertySymbols or Object getPrototypeOf  you re most probably doing it wrong   Things to consider before writing your function  First  make sure you understand what a Javascript object is  In Javascript  an object is made of its own properties and a  parent  prototype object  The prototype object in turn is made of its own properties and a prototype object  And so on  defining a prototype chain   A property is a pair of key  string or symbol  and descriptor  value or get set accessor  and attributes like enumerable    Finally  there are many types of objects  You may want to handle differently an object Object from an object Date or an object Function   So  writing your deep copy  you should answer at least those questions    What do I consider deep  proper for recursive look up  or flat   What properties do I want to copy   enumerable non-enumerable  string-keyed symbol-keyed  own properties prototype s own properties  values descriptors       For my example  I consider that only the object Objects are deep  because other objects created by other constructors may not be proper for an in-depth look  Customized from this SO   function toType a           Get fine type  object  array  function  null  error  date          return      toString call a  match    a-z          i  1      function isDeepObject obj        return  Object      toType obj       And I made an options object to choose what to copy  for demo purpose    const options    nonEnum true  symbols true  descriptors  true  proto true     Proposed function  You can test it in this plunker   function deepAssign options        return function deepAssignWithOptions  target     sources            sources forEach   source    gt                 if   isDeepObject source      isDeepObject target                   return                  Copy source s own properties into target s own properties             function copyProperty property                    const descriptor   Object getOwnPropertyDescriptor source  property                     default  omit non-enumerable properties                 if  descriptor enumerable    options nonEnum                           Copy in-depth first                     if  isDeepObject source property    amp  amp  isDeepObject target property                            descriptor value   deepAssign options  target property   source property                          default  omit descriptors                     if  options descriptors                          Object defineProperty target  property  descriptor      shallow copy descriptor                     else                         target property    descriptor value     shallow copy value only                                                 Copy string-keyed properties             Object getOwnPropertyNames source  forEach copyProperty                  default  omit symbol-keyed properties             if  options symbols                  Object getOwnPropertySymbols source  forEach copyProperty                  default  omit prototype s own properties             if  options proto                     Copy souce prototype s own properties into target prototype s own properties                 deepAssign Object assign    options  proto false        Prevent deeper copy of the prototype chain                     Object getPrototypeOf target                       Object getPrototypeOf source                                          return target            That can be used like this   const x     a    a  1            y     a    b  1      deepAssign options  x y        a    a  1  b  1

User · Answer

This is simple and works   let item         firstName   Jonnie       lastName   Walker       fullName  function fullName                 return  Jonnie Walker         Object assign Object create item   item     Explain   Object create   Creates new Object  If you pass params to function it will creates you object with prototype of other object  So if you have any functions on prototype of object they will be passed to prototype of other object   Object assign   Merges two objects and creates fully new object and they have no reference anymore  So this example works good for me

User · Answer

We can use   extend true object1 object2  for deep merging  Value true denotes merge two objects recursively  modifying the first    extend true target object

User · Answer

Here is another ES2015 solution  works with objects and arrays   x000D   x000D  function deepMerge    sources      let acc        for  const source of sources        if  source instanceof Array          if    acc instanceof Array             acc                    acc       acc     source        else if  source instanceof Object          for  let  key  value  of Object entries source             if  value instanceof Object  amp  amp  key in acc              value   deepMerge acc key   value                    acc        acc   key   value                       return acc       Test   const A      a   null   a undefined    null new Date      a         b   1 2    c   a 1  b 2     const B      a    new   9    b   new Date      c   a     c        console log    deepMerge A B    x000D   x000D   x000D

User · Answer

Use case  merging default configs  If we define configs in the form of   const defaultConf         prop1   config1       prop2   config2      we can define more specific configs by doing   const moreSpecificConf            defaultConf      prop3   config3      But if these configs contain nested structures this approach doesn t work anymore   Therefore I wrote a function that only merges objects in the sense of   key  value        and replaces the rest   const isObject    val    gt  val     Object val    const merge       objects    gt      objects reduce           obj1  obj2    gt                    obj1                 obj2                 Object keys obj2                   filter  key    gt  key in obj1  amp  amp  isObject obj1 key    amp  amp  isObject obj2 key                     map  key    gt     key   merge obj1 key   obj2 key                       reduce  n1  n2    gt       n1     n2

User · Answer

Most examples here seem too complex  I m using one in TypeScript I created  I think it should cover most cases  I m handling arrays as regular data  just replacing them    const isObject    item  any    gt  typeof item      object   amp  amp   Array isArray item    export const merge    lt A   Object  B   Object gt  target  A  source  B   A  amp  B   gt      const isDeep    prop  string    gt      isObject source prop    amp  amp  target hasOwnProperty prop   amp  amp  isObject target prop      const replaced   Object getOwnPropertyNames source       map prop   gt      prop   isDeep prop    merge target prop   source prop     source prop           reduce  a  b    gt        a     b             return           target as Object           replaced as Object      as A  amp  B       Same thing in plain JS  just in case   const isObject   item   gt  typeof item      object   amp  amp   Array isArray item    const merge    target  source    gt      const isDeep   prop   gt       isObject source prop    amp  amp  target hasOwnProperty prop   amp  amp  isObject target prop      const replaced   Object getOwnPropertyNames source       map prop   gt      prop   isDeep prop    merge target prop   source prop     source prop           reduce  a  b    gt        a     b             return          target         replaced           Here are my test cases to show how you could use it  describe  merge        gt      context  shallow merges        gt        it  merges objects        gt          const a     a   discard           const b     a   test           expect merge a  b   to deep equal   a   test                  it  extends objects        gt          const a     a   test           const b     b   test           expect merge a  b   to deep equal   a   test   b   test                  it  extends a property with an object        gt          const a     a   test           const b     b    c   test             expect merge a  b   to deep equal   a   test   b    c   test                    it  replaces a property with an object        gt          const a     b   whatever   a   test           const b     b    c   test             expect merge a  b   to deep equal   a   test   b    c   test                         context  deep merges        gt        it  merges objects        gt          const a     test    a   discard   b   test              const b     test    a   test              expect merge a  b   to deep equal   test    a   test   b   test                    it  extends objects        gt          const a     test    a   test             const b     test    b   test             expect merge a  b   to deep equal   test    a   test   b   test                    it  extends a property with an object        gt          const a     test    a   test             const b     test    b    c   test               expect merge a  b   to deep equal   test    a   test   b    c   test                      it  replaces a property with an object        gt          const a     test    b   whatever   a   test             const b     test    b    c   test               expect merge a  b   to deep equal   test    a   test   b    c   test                              Please let me know if you think I m missing some functionality

User · Answer

This is a cheap deep merge that uses as little code as I could think of  Each source overwrites the previous property when it exists   const   keys     Object   const isObject   a   gt  typeof a      object   amp  amp   Array isArray a   const merge    a  b    gt    isObject a   amp  amp  isObject b        deepMerge a  b        isObject a   amp  amp   isObject b        a       b   const coalesceByKey   source   gt   acc  key    gt     acc key   amp  amp  source key         acc key    merge acc key   source key           acc key    source key     amp  amp  acc          Merge all sources into the target    overwriting primitive values in the the accumulated target as we go  if they already exist      param     target     param      any  sources     const deepMerge    target     sources    gt    sources reduce       acc  source    gt  keys source  reduce coalesceByKey source   acc       target       console log deepMerge   a  1      a  2      console log deepMerge   a  1      a    b  2        console log deepMerge   a    b  2        a  1

User · Answer

Another variation using recursion  hope you find it useful  const merge    obj1  obj2    gt         const recursiveMerge    obj  entries    gt             for  const  key  value  of entries                if  typeof value      quot object quot                    obj key    obj key        obj key                        recursiveMerge obj key   Object entries value               else                  obj key    value                                       return obj             return recursiveMerge obj1  Object entries obj2

User · Answer

Use this function   merge target  source  mutable   false            const newObj   typeof target     object     mutable   target   Object assign     target                 for  const prop in source                if  target prop     null    typeof target prop       undefined                     newObj prop    source prop                 else if  Array isArray target prop                      newObj prop    source prop     target prop                 else if  target prop  instanceof RegExp                    newObj prop    source prop     target prop                 else                   newObj prop    typeof source prop       object    this merge target prop   source prop     source prop                                   return newObj

User · Answer

The problem is non-trivial when it comes to host objects or any kind of object that s more complex than a bag of values   do you invoke a getter to obtain a value or do you copy over the property descriptor  what if the merge target has a setter  either own property or in its prototype chain   Do you consider the value as already-present or call the setter to update the current value  do you invoke own-property functions or copy them over  What if they re bound functions or arrow functions depending on something in their scope chain at the time they were defined  what if it s something like a DOM node  You certainly don t want to treat it as simple object and just deep-merge all its properties over into how to deal with  simple  structures like arrays or maps or sets  Consider them already-present or merge them too  how to deal with non-enumerable own properties  what about new subtrees  Simply assign by reference or deep clone  how to deal with frozen sealed non-extensible objects    Another thing to keep in mind  Object graphs that contain cycles  It s usually not difficult to deal with - simply keep a Set of already-visited source objects - but often forgotten   You probably should write a deep-merge function that only expects primitive values and simple objects - at most those types that the structured clone algorithm can handle - as merge sources  Throw if it encounters anything it cannot handle or just assign by reference instead of deep merging   In other words  there is no one-size-fits-all algorithm  you either have to roll your own or look for a library method that happens to cover your use-cases

User · Answer

A simple solution with ES5  overwrite existing value     x000D   x000D  function merge current  update    x000D    Object keys update  forEach function key    x000D         if update key  exist  and it s not a string or array  x000D         we go in one level deeper x000D      if  current hasOwnProperty key   x000D           amp  amp  typeof current key       object  x000D           amp  amp    current key  instanceof Array     x000D        merge current key   update key    x000D   x000D         if update key  doesn t exist in current  or it s a string x000D         or array  then assign overwrite current key  to update key  x000D        else   x000D        current key    update key   x000D        x000D        x000D    return current  x000D    x000D   x000D  var x     a    a  1     x000D  var y     a    b  1     x000D   x000D  console log merge x  y    x000D   x000D   x000D

User · Answer

Since this issue is still active  here s another approach    ES6 2015 Immutable  does not modify original objects  Handles arrays  concatenates them     x000D   x000D      x000D    Performs a deep merge of objects and returns new object  Does not modify x000D    objects  immutable  and merges arrays via concatenation  x000D    x000D     param     object  objects - Objects to merge x000D     returns  object  New object with merged key values x000D     x000D  function mergeDeep    objects    x000D    const isObject   obj   gt  obj  amp  amp  typeof obj      object   x000D     x000D    return objects reduce  prev  obj    gt    x000D      Object keys obj  forEach key   gt    x000D        const pVal   prev key   x000D        const oVal   obj key   x000D         x000D        if  Array isArray pVal   amp  amp  Array isArray oVal     x000D          prev key    pVal concat    oVal   x000D          x000D        else if  isObject pVal   amp  amp  isObject oVal     x000D          prev key    mergeDeep pVal  oVal   x000D          x000D        else   x000D          prev key    oVal  x000D          x000D          x000D       x000D      return prev  x000D            x000D    x000D   x000D     Test objects x000D  const obj1     x000D    a  1  x000D    b  1   x000D    c    x  1  y  1    x000D    d    1  1   x000D    x000D  const obj2     x000D    b  2   x000D    c    y  2  z  2    x000D    d    2  2    x000D    e  2 x000D    x000D  const obj3   mergeDeep obj1  obj2   x000D   x000D     Out x000D  console log obj3   x000D   x000D   x000D

User · Answer

Here is TypeScript implementation   export const mergeObjects    lt T extends object   object gt  target  T     sources  T     T    gt      if   sources length        return target        const source   sources shift      if  source     undefined        return target         if  isMergebleObject target   amp  amp  isMergebleObject source         Object keys source  forEach function key  string          if  isMergebleObject source key              if   target key               target key                          mergeObjects target key   source key            else           target key    source key                          return mergeObjects target     sources       const isObject    item  any   boolean   gt      return item     null  amp  amp  typeof item      object       const isMergebleObject    item   boolean   gt      return isObject item   amp  amp   Array isArray item        And Unit Tests   describe  merge        gt      it  should merge Objects and all nested Ones        gt        const obj1     a    a1   A1    c   C   d            const obj2     a    a2   A2    b    b1   B1    d  null        const obj3     a    a1   A1   a2   A2    b    b1   B1    c   C   d  null       expect mergeObjects     obj1  obj2   toEqual obj3           it  should behave like Object assign on the top level        gt        const obj1     a    a1   A1    c   C        const obj2     a  undefined  b    b1   B1         expect mergeObjects     obj1  obj2   toEqual Object assign     obj1  obj2            it  should not merge array values  just override        gt        const obj1    a    A    B         const obj2    a    C    b    D         expect mergeObjects     obj1  obj2   toEqual  a    C    b    D              it  typed merge        gt        expect mergeObjects lt TestPosition gt  new TestPosition 0  0   new TestPosition 1  1           toEqual new TestPosition 1  1               class TestPosition     constructor public x  number   0  public y  number   0     empty

User · Answer

If your are using ImmutableJS you can use mergeDeep    fromJS options  mergeDeep options2  toJS

User · Answer

Here is an immutable  does not modify the inputs  version of  Salakar s answer  Useful if you re doing functional programming type stuff   export function isObject item      return  item  amp  amp  typeof item      object   amp  amp   Array isArray item       export default function mergeDeep target  source      let output   Object assign     target     if  isObject target   amp  amp  isObject source         Object keys source  forEach key   gt          if  isObject source key              if    key in target             Object assign output     key   source key              else           output key    mergeDeep target key   source key            else           Object assign output     key   source key                            return output

User · Answer

If you want to have a one liner without requiring a huge library like lodash  I suggest you to use deepmerge   npm install deepmerge  Then  you can do deepmerge   a  1  b  2  c  3      a  2  d  3      to get   a  2  b  2  c  3  d  3    This works nicely with complex objects and arrays  The nice thing is it comes with typings for TypeScript right away  A real all-rounder solution this is

User · Answer

Does anybody know if deep merging exists in the ES6 ES7 spec    No  it does not

User · Answer

Use the utility  deepmerge   link  or this code here  LINK  it works fine

User · Answer

Does anybody know if deep merging exists in the ES6 ES7 spec    Object assign documentation suggests it doesn t do deep clone

User · Answer

I use lodash   import     require  lodash    value     merge value1  value2

User · Answer

The deepmerge npm package appears to be the most widely used library for solving this problem  https   www npmjs com package deepmerge

User · Answer

I am using the following short function for deep merging objects  It works great for me  The author completely explains how it works here          Merge two or more objects together      c  2017 Chris Ferdinandi  MIT License  https   gomakethings com     param    Boolean   deep     If true  do a deep  or recursive  merge  optional      param    Object    objects  The objects to merge together     returns  Object             Merged values of defaults and options        Use the function as follows     let shallowMerge   extend obj1  obj2      let deepMerge   extend true  obj1  obj2       var extend   function              Variables     var extended           var deep   false      var i   0          Check if a deep merge     if   Object prototype toString call  arguments 0          object Boolean               deep   arguments 0           i                  Merge the object into the extended object     var merge   function  obj            for  var prop in obj                if  obj hasOwnProperty prop                        If property is an object  merge properties                 if  deep  amp  amp  Object prototype toString call obj prop         object Object                          extended prop    extend extended prop   obj prop                      else                       extended prop    obj prop                                                            Loop through each object and conduct a merge     for    i  lt  arguments length  i              merge arguments i               return extended

User · Answer

Many answers use tens of lines of code  or require adding a new library to the project  but if you use recursion  this is just 4 lines of code    x000D   x000D  function merge current  updates    x000D    for  key of Object keys updates     x000D      if   current hasOwnProperty key     typeof updates key       object   current key    updates key   x000D      else merge current key   updates key    x000D      x000D    return current  x000D    x000D  console log merge   a    a  1        a    b  1        x000D   x000D   x000D    Arrays handling  The above version overwrites old array values with new ones  If you want it to keep the old array values and add the new ones  just add a else if  current key  instanceof Array  amp  amp  updates key  instanceof Array  current key    current key  concat updates key   block above the else statament and you re all set

User · Answer

I tried to write an Object assignDeep which is based on the pollyfill of Object assign on mdn    ES5    x000D   x000D  Object assignDeep   function  target  varArgs        length of function is 2 x000D       use strict   x000D      if  target    null       TypeError if undefined or null x000D          throw new TypeError  Cannot convert undefined or null to object    x000D        x000D   x000D      var to   Object target   x000D   x000D      for  var index   1  index  lt  arguments length  index      x000D          var nextSource   arguments index   x000D   x000D          if  nextSource    null       Skip over if undefined or null x000D              for  var nextKey in nextSource    x000D                     Avoid bugs when hasOwnProperty is shadowed x000D                  if  Object prototype hasOwnProperty call nextSource  nextKey     x000D                      if  typeof to nextKey       object   x000D                           amp  amp  to nextKey   x000D                           amp  amp  typeof nextSource nextKey       object   x000D                           amp  amp  nextSource nextKey                             x000D                          Object assignDeep to nextKey   nextSource nextKey    x000D                        else   x000D                          to nextKey    nextSource nextKey   x000D                        x000D                    x000D                x000D            x000D        x000D      return to  x000D     x000D  console log Object assignDeep     a  b  c 1 d 1     a  b  c 2 e 2      x000D   x000D   x000D

User · Answer

Here  straight forward  a simple solution that works like Object assign just deep  and works for an array  without any modification   x000D   x000D  function deepAssign target     sources      for  source of sources        for  let k in source          let vs   source k   vt   target k        if  Object vs     vs  amp  amp  Object vt      vt            target k    deepAssign vt  vs          continue               target k    source k              return target    x     a    a  1    b   1 2    y     a    b  1    b   3    z     c  3  b      4    x   deepAssign x  y  z   console log JSON stringify x      JSON stringify      a          a   1       b   1         b     1  2  null  4       c   3     x000D   x000D   x000D

User · Answer

I was having this issue when loading a cached redux state  If I just load the cached state  I d run into errors for new app version with an updated state structure   It was already mentioned  that lodash offers the merge function  which I used   const currentInitialState   configureState   getState    const mergedState     merge     currentInitialState  cachedState   const store   configureState mergedState

User · Answer

function isObject obj        return obj     null  amp  amp  typeof obj      object     const isArray   Array isArray   function isPlainObject obj        return isObject obj   amp  amp            obj constructor     Object     obj                 obj constructor     undefined    obj   Object create null            function mergeDeep target     sources       if   sources length  return target      const source   sources shift         if  isPlainObject source     isArray source             for  const key in source                if  isPlainObject source key      isArray source key                      if  isPlainObject source key    amp  amp   isPlainObject target key                          target key                         else if  isArray source key    amp  amp   isArray target key                          target key                                          mergeDeep target key   source key                  else if  source key      undefined  amp  amp  source key                            target key    source key                                      return mergeDeep target     sources         test    var source    b 333   var source2    c 32  arr   33 11   var n   mergeDeep  a 33   source  source2   source2 arr 1    22  console log n arr      out   33  11

User · Answer

https   lodash com docs 4 17 15 defaultsDeep Note  This method mutates source    defaultsDeep    a      b   2         a      b   1   c   3            gt     a      b   2   c   3

User · Answer

copies all properties from source object to dest object recursively export function recursivelyMoveProperties source  dest      for  const prop in source        if   source hasOwnProperty prop           continue             if  source prop      null             property is null       dest prop    source prop         continue             if  typeof source prop       object              if property is object let s dive into in       if  Array isArray source prop              dest prop                else           if   dest hasOwnProperty prop             typeof dest prop       object             dest prop      null    Array isArray dest prop               Object keys dest prop   length              dest prop                                recursivelyMoveProperties source prop   dest prop          continue                property is simple type  string  number  e t c     dest prop    source prop         return dest      Unit test   describe  recursivelyMoveProperties        gt        it  should copy properties correctly        gt          const source  any             propS1   str1           propS2   str2           propN1  1          propN2  2          propA1   1  2  3           propA2              propB1  true          propB2  false          propU1  null          propU2  null          propD1  undefined          propD2  undefined          propO1              subS1   sub11             subS2   sub12             subN1  11            subN2  12            subA1   11  12  13             subA2                subB1  false            subB2  true            subU1  null            subU2  null            subD1  undefined            subD2  undefined                     propO2              subS1   sub21             subS2   sub22             subN1  21            subN2  22            subA1   21  22  23             subA2                subB1  false            subB2  true            subU1  null            subU2  null            subD1  undefined            subD2  undefined                            let dest  any             propS2   str2           propS3   str3           propN2  -2          propN3  3          propA2   2  2           propA3   3  2  1           propB2  true          propB3  false          propU2   not null           propU3  null          propD2   defined           propD3  undefined          propO2              subS2   inv22             subS3   sub23             subN2  -22            subN3  23            subA2   5  5  5             subA3   31  32  33             subB2  false            subB3  true            subU2   not null ---              subU3  null            subD2    not undefined ----             subD3  undefined                     propO3              subS1   sub31             subS2   sub32             subN1  31            subN2  32            subA1   31  32  33             subA2                subB1  false            subB2  true            subU1  null            subU2  null            subD1  undefined            subD2  undefined                            dest   recursivelyMoveProperties source  dest          expect dest  toEqual           propS1   str1           propS2   str2           propS3   str3           propN1  1          propN2  2          propN3  3          propA1   1  2  3           propA2              propA3   3  2  1           propB1  true          propB2  false          propB3  false          propU1  null          propU2  null          propU3  null          propD1  undefined          propD2  undefined          propD3  undefined          propO1              subS1   sub11             subS2   sub12             subN1  11            subN2  12            subA1   11  12  13             subA2                subB1  false            subB2  true            subU1  null            subU2  null            subD1  undefined            subD2  undefined                     propO2              subS1   sub21             subS2   sub22             subS3   sub23             subN1  21            subN2  22            subN3  23            subA1   21  22  23             subA2                subA3   31  32  33             subB1  false            subB2  true            subB3  true            subU1  null            subU2  null            subU3  null            subD1  undefined            subD2  undefined            subD3  undefined                     propO3              subS1   sub31             subS2   sub32             subN1  31            subN2  32            subA1   31  32  33             subA2                subB1  false            subB2  true            subU1  null            subU2  null            subD1  undefined            subD2  undefined

User · Answer

The following function makes a deep copy of objects  it covers copying primitive  arrays as well as object   function mergeDeep  target  source         if  typeof target     object   amp  amp  typeof source     object             for  const key in source                if  source key      null  amp  amp   target key      undefined    target key      null                     target key    null                else if  source key  instanceof Array                    if   target key   target key                          concatenate arrays                 target key    target key  concat source key                  else if  typeof source key      object                     if   target key   target key                        this mergeDeep target key   source key                  else                   target key    source key                                     return target

User · Answer

There are well maintained libraries that already do this  One example on the npm registry is merge-deep

User · Answer

There is a lodash package which specifically deals only with deep cloning a object  The advantage is that you don t have to include the entire lodash library  Its called lodash clonedeep In nodejs the usage is like this var cloneDeep   require  lodash clonedeep      const newObject   cloneDeep oldObject    In ReactJS the usage is import cloneDeep from  lodash cloneDeep    const newObject   cloneDeep oldObject    Check the docs here   If you are interested in how it works take a look at the source file here

User · Answer

You can use Lodash merge   var object        a       b   2       d   4        var other        a       c   3       e   5          merge object  other        gt     a       b   2   c   3       d   4   e   5

User · Answer

Here s another one I just wrote that supports arrays  It concats them   function isObject obj        return obj     null  amp  amp  typeof obj      object       function isPlainObject obj        return isObject obj   amp  amp            obj constructor     Object     obj                 obj constructor     undefined    obj   Object create null            function mergeDeep target     sources        if   sources length  return target      const source   sources shift         if Array isArray target             if Array isArray source                 target push    source             else               target push source                   else if isPlainObject target             if isPlainObject source                 for let key of Object keys source                     if  target key                         target key    source key                     else                       mergeDeep target key   source key                                              else               throw new Error  Cannot merge object with non-object                    else           target   source             return mergeDeep target     sources

User · Answer

Sometimes you don t need deep merge  even if you think so  For example  if you have a default config with nested objects and you want to extend it deeply with your own config  you can create a class for that  The concept is very simple   function AjaxConfig config          Default values   config    Object assign this        method   POST       contentType   text plain       config         Default values in nested objects    this headers   Object assign     this headers          X-Requested-With    custom              Define your config  var config       url   https   google com     headers         x-client-data    CI22yQEI             Extend the default values with your own var fullMergedConfig   new AjaxConfig config       View in DevTools console log fullMergedConfig     You can convert it to a function  not a constructor

User · Answer

I found only 2 line solution to get deep merge in javascript  Do let me know how this works out for you   const obj1     a    b   c   x   y      const obj2     a    b   d   e   f      temp   Object assign     obj1  obj2  Object keys temp  forEach key   gt        temp key     typeof temp key       object     Object assign temp key   obj1 key   obj2 key     temp key     console log temp    Temp object will print   a    b   d   e   f   x   y

User · Answer

Is there a way to do this    If npm libraries can be used as a solution  object-merge-advanced from yours truly allows to merge objects deeply and customise override every single merge action using a familiar callback function  The main idea of it is more than just deep merging     what happens with the value when two keys are the same  This library takes care of that     when two keys clash  object-merge-advanced weighs the types  aiming to retain as much data as possible after merging     First input argument s key is marked  1  second argument s      2  Depending on each type  one is chosen for the result key s value  In diagram   an object  means a plain object  not array etc    When keys don t clash  they all enter the result   From your example snippet  if you used object-merge-advanced to merge your code snippet   const mergeObj   require  object-merge-advanced    const x     a    a  1      const y     a    b  1      const res   console log mergeObj x  y         gt  res             a              a  1            b  1                     It s algorithm recursively traverses all input object keys  compares and builds and returns the new merged result

User · Answer

I know this is a bit of an old issue but the easiest solution in ES2015 ES6 I could come up with was actually quite simple  using Object assign     Hopefully this helps          Simple object check      param item     returns  boolean      export function isObject item      return  item  amp  amp  typeof item      object   amp  amp   Array isArray item              Deep merge two objects      param target     param    sources     export function mergeDeep target     sources      if   sources length  return target    const source   sources shift       if  isObject target   amp  amp  isObject source         for  const key in source          if  isObject source key              if   target key   Object assign target     key                  mergeDeep target key   source key            else           Object assign target     key   source key                           return mergeDeep target     sources       Example usage   mergeDeep this    a    b    c  123            or const merged   mergeDeep  a  1     b     c    d    e  12345         console dir merged        a  1  b    c    d   Object          You ll find an immutable version of this in the answer below    Note that this will lead to infinite recursion on circular references  There s some great answers on here on how to detect circular references if you think you d face this issue

User · Answer

I would like to present a pretty simple ES5 alternative  The function gets 2 parameters - target and source that must be of type  object   Target will be the resulting object  Target keeps all its original properties but their values may be modified though   function deepMerge target  source    if typeof target      object     typeof source      object   return false     target or source or both ain t objects  merging doesn t make sense for var prop in source      if  source hasOwnProperty prop   continue     take into consideration only object s own properties    if prop in target       handling merging of two properties with equal names     if typeof target prop       object           target prop    source prop         else         if typeof source prop       object             target prop    source prop           else           if target prop  concat  amp  amp  source prop  concat       two arrays get concatenated           target prop    target prop  concat source prop              else      two objects get merged recursively           target prop    deepMerge target prop   source prop                                    else      new properties get added to target     target prop    source prop          return target      cases    if target doesn t have a source property  target gets it   if target does have a source property and target  amp  source are not both objects  3 cases out of 4   target s property gets overriden  if target does have a source property and both of them are objects arrays  1 remaining case   then recursion happens merging two objects  or concatenation of two arrays     also consider the following    array   obj   array  obj   array   obj obj   obj   obj  recursively merged  array   array   array  concat    It is predictable  supports primitive types as well as arrays and objects  Also as we can merge 2 objects  I think that we can merge more than 2 via reduce function   take a look at an example  and play around with it if you want     x000D   x000D  var a     x000D      a prop   1  x000D      arr prop    4  5  6   x000D      obj     x000D        a prop     x000D          t prop    test  x000D          x000D        b prop   2 x000D       x000D     x000D   x000D  var b     x000D      a prop   5  x000D      arr prop    7  8  9   x000D      b prop   15  x000D      obj     x000D        a prop     x000D          u prop   false x000D          x000D        b prop     x000D           s prop   null x000D         x000D       x000D     x000D   x000D  function deepMerge target  source    x000D      if typeof target      object     typeof source      object   return false  x000D      for var prop in source    x000D      if  source hasOwnProperty prop   continue  x000D        if prop in target    x000D          if typeof target prop       object     x000D            target prop    source prop   x000D            else   x000D            if typeof source prop       object     x000D              target prop    source prop   x000D              else   x000D              if target prop  concat  amp  amp  source prop  concat    x000D                target prop    target prop  concat source prop    x000D                else   x000D                target prop    deepMerge target prop   source prop     x000D                 x000D                x000D            x000D          else   x000D          target prop    source prop    x000D          x000D        x000D    return target  x000D    x000D   x000D  console log deepMerge a  b    x000D   x000D   x000D    There is a limitation - browser s call stack length  Modern browsers will throw an error at some really deep level of recursion  think of thousands of nested calls   Also you are free to treat situations like array   object etc  as you wish by adding new conditions and type checks

User · Answer

I make this method for deep assign using es6   function isObject item      return  item  amp  amp  typeof item      object   amp  amp   Array isArray item   amp  amp  item     null     function deepAssign    objs        if  objs length  lt  2            throw new Error  Need two or more objects to merge              const target   objs 0      for  let i   1  i  lt  objs length  i              const source   objs i          Object keys source  forEach prop   gt                const value   source prop              if  isObject value                     if  target hasOwnProperty prop   amp  amp  isObject target prop                          target prop    deepAssign target prop   value                    else                       target prop    value                                 else if  Array isArray value                     if  target hasOwnProperty prop   amp  amp  Array isArray target prop                          const targetArray   target prop                      value forEach  sourceItem  itemIndex    gt                            if  itemIndex  lt  targetArray length                                const targetItem   targetArray itemIndex                               if  Object is targetItem  sourceItem                                     return                                                            if  isObject targetItem   amp  amp  isObject sourceItem                                     targetArray itemIndex    deepAssign targetItem  sourceItem                                else if  Array isArray targetItem   amp  amp  Array isArray sourceItem                                     targetArray itemIndex    deepAssign targetItem  sourceItem                                else                                   targetArray itemIndex    sourceItem                                                         else                               targetArray push sourceItem                                                                     else                       target prop    value                                 else                   target prop    value                                     return target

User · Answer

My use case for this was to merge default values into a configuration  If my component accepts a configuration object that has a deeply nested structure  and my component defines a default configuration  I wanted to set default values in my configuration for all configuration options that were not supplied  Example usage  export default MyComponent     config     gt      const mergedConfig   mergeDefaults config   header  margins  left 10  top  10           Component code here    This allows me to pass an empty or null config  or a partial config and have all of the values that are not configured fall back to their default values  My implementation of mergeDefaults looks like this  export default function mergeDefaults config  defaults      if  config     null    config     undefined  return defaults    for  var attrname in defaults        if  defaults attrname  constructor     Object  config attrname    mergeDefaults config attrname   defaults attrname        else if  config attrname      undefined  config attrname    defaults attrname         return config       And these are my unit tests import   testing-library jest-dom extend-expect   import mergeDefaults from    mergeDefaults    describe  mergeDefaults        gt      it  should create configuration        gt        const config   mergeDefaults null    a  10  b    c   default1   d   default2            expect config a  toStrictEqual 10       expect config b c  toStrictEqual  default1        expect config b d  toStrictEqual  default2            it  should fill configuration        gt        const config   mergeDefaults       a  10  b    c   default1   d   default2            expect config a  toStrictEqual 10       expect config b c  toStrictEqual  default1        expect config b d  toStrictEqual  default2            it  should not overwrite configuration        gt        const config   mergeDefaults   a  12  b    c   config1   d   config2         a  10  b    c   default1   d   default2            expect config a  toStrictEqual 12       expect config b c  toStrictEqual  config1        expect config b d  toStrictEqual  config2            it  should merge configuration        gt        const config   mergeDefaults   a  12  b    d   config2         a  10  b    c   default1   d   default2     e  15         expect config a  toStrictEqual 12       expect config b c  toStrictEqual  default1        expect config b d  toStrictEqual  config2        expect config e  toStrictEqual 15

[javascript] How to deep merge instead of shallow merge?

Examples related to javascript

Examples related to spread-syntax