How can I merge properties of two JavaScript objects dynamically

Question

I need to be able to merge two  very simple  JavaScript objects at runtime   For example I d like to   var obj1     food   pizza   car   ford    var obj2     animal   dog     obj1 merge obj2      obj1 now has three properties  food  car  and animal   Does anyone have a script for this or know of a built in way to do this   I do not need recursion  and I do not need to merge functions  just methods on flat objects

User · Answer

shallow  var obj     name    Jacob    address     America     var obj2     name    Shaun    address     Honk Kong      var merged   Object assign      obj obj2      shallow merge  obj2 address 0     new city    result address 0  is changed to  new city    i e merged object is also changed  This is the problem with shallow merge   deep  var obj     name    Jacob    address     America     var obj2     name    Shaun    address     Honk Kong      var result   Object assign      JSON parse JSON stringify obj   JSON parse JSON stringify obj2      obj2 address 0     new city    result address 0  is not changed

User · Answer

Prototype has this   Object extend   function destination source        for  var property in source          destination property    source property       return destination      obj1 extend obj2  will do what you want

User · Answer

ECMAScript 2018 Standard Method  You would use object spread   let merged       obj1     obj2     merged is now the union of obj1 and obj2  Properties in obj2 will overwrite those in obj1       There s no limit to the number of objects you can merge      Later properties overwrite earlier properties with the same name     const allRules       obj1     obj2     obj3     Here is also the MDN documentation for this syntax  If you re using babel you ll need the babel-plugin-transform-object-rest-spread plugin for it to work   ECMAScript 2015  ES6  Standard Method     For the case in question  you would do     Object assign obj1  obj2        There s no limit to the number of objects you can merge      All objects get merged into the first object       Only the object in the first argument is mutated and returned      Later properties overwrite earlier properties with the same name     const allRules   Object assign     obj1  obj2  obj3  etc      see MDN JavaScript Reference     Method for ES5 and Earlier  for  var attrname in obj2    obj1 attrname    obj2 attrname       Note that this will simply add all attributes of obj2 to obj1 which might not be what you want if you still want to use the unmodified obj1   If you re using a framework that craps all over your prototypes then you have to get fancier with checks like hasOwnProperty  but that code will work for 99  of cases   Example function          Overwrites obj1 s values with obj2 s and adds obj2 s if non existent in obj1     param obj1     param obj2     returns obj3 a new object based on obj1 and obj2     function merge options obj1 obj2       var obj3           for  var attrname in obj1    obj3 attrname    obj1 attrname         for  var attrname in obj2    obj3 attrname    obj2 attrname         return obj3

User · Answer

With Underscore js  to merge an array of objects do   var arrayOfObjects      a 1    b 2  c 3    d 4       arrayOfObjects  reduce function memo  o    return   memo  extend o         It results in   Object  a  1  b  2  c  3  d  4

User · Answer

You can do the following in EcmaScript2016  Correction  it s a stage 3 proposal  still it has always worked for me  const objA       attrA   hello     attrB  true    const objB       attrC  2    const mergedObj       objA     objB

User · Answer

You can use Object assign method  For example  var result   Object assign obj1  obj2    Also  note that it creates a shallow copy of the object

User · Answer

Prototype has this   Object extend   function destination source        for  var property in source          destination property    source property       return destination      obj1 extend obj2  will do what you want

User · Answer

x000D   x000D  function extend o  o1  o2   x000D      if    o instanceof Object    o       x000D   x000D      copy o  o1   x000D      if  o2   x000D          copy o  o2  x000D   x000D      function isObject obj    x000D          var type   Object prototype toString call obj   x000D          return obj     Object obj   amp  amp  type      object Array    amp  amp  type      object Function    x000D         x000D   x000D      function copy a b   x000D             copy o2 to o x000D          for  var key in b   x000D              if  b hasOwnProperty key     x000D                  if  isObject b key      x000D                      if   isObject a key     x000D                          a key    Object assign     b key     x000D                      else copy a key   b key   x000D                    x000D                  else x000D                      a key    b key   x000D                x000D        x000D   x000D      return o  x000D     x000D   x000D   x000D  var o1    a  foo 1   b 1   x000D      o2    a  bar 2   b  1   c     gt      x000D      newMerged   extend     o1  o2   x000D       x000D  console log  newMerged   x000D  console log  o1   x000D  console log  o2   x000D   x000D   x000D

User · Answer

var obj1     food   pizza   car   ford    var obj2     animal   dog        result result   food   pizza   car   ford   animal   dog     Using jQuery extend   - Link     Merge obj1  amp  obj2 to result var result1     extend      obj1  obj2      Using   merge   - Link     Merge obj1  amp  obj2 to result var result2     merge      obj1  obj2      Using   extend   - Link     Merge obj1  amp  obj2 to result var result3     extend      obj1  obj2      Using Object assign   ECMAScript 2015  ES6  - Link     Merge obj1  amp  obj2 to result var result4   Object assign      obj1  obj2      Output of all  obj1    animal   dog    obj2    food   pizza   car   ford    result1   food   pizza   car   ford   animal   dog   result2   food   pizza   car   ford   animal   dog   result3   food   pizza   car   ford   animal   dog   result4   food   pizza   car   ford   animal   dog

User · Answer

Just by the way  what you re all doing is overwriting properties  not merging     This is how JavaScript objects area really merged  Only keys in the to object which are not objects themselves will be overwritten by from  Everything else will be really merged  Of course you can change this behaviour to not overwrite anything which exists like only if to n  is undefined  etc      var realMerge   function  to  from         for  n in from             if  typeof to n      object                 to n    from n             else if  typeof from n      object                 to n    realMerge to n   from n                        return to       Usage   var merged   realMerge obj1  obj2

User · Answer

Note that underscore js s extend-method does this in a one-liner     extend  name    moe     age   50      gt   name    moe   age   50

User · Answer

gossi s extension of David Coallier s method   Check these two lines   from   arguments i   Object getOwnPropertyNames from  forEach function  name      One need to check  from  against null object    If for example merging an object that comes from an Ajax response  previously created on a server  an object property can have a value of  null   and in that case the above code generates an error saying       from  is not a valid object   So for example  wrapping the     Object getOwnPropertyNames from  forEach     function with an  if  from    null           will prevent that error occurring

User · Answer

A  a 1 b function   alert 9    B  a 2 c 3  A merge   function   for var i in B  A i  B i    A merge     Result is   a 2 c 3 b function

User · Answer

Based on Markus  and vsync  answer  this is an expanded version  The function takes any number of arguments  It can be used to set properties on DOM nodes and makes deep copies of values  However  the first argument is given by reference   To detect a DOM node  the isDOMNode   function is used  see Stack nbsp Overflow question JavaScript isDOM     How do you check if a JavaScript Object is a DOM Object    It was tested in Opera 11  Firefox 6  Internet nbsp Explorer nbsp 8 and Google Chrome 16   Code  function mergeRecursive            mergeRecursive does the actual job with two arguments    var  mergeRecursive   function  dst  src        if  isDOMNode src     typeof src      object     src     null          return dst             for  var p in src          if   src hasOwnProperty p           continue        if  src p      undefined          continue        if   typeof src p       object     src p      null            dst p    src p           else if  typeof dst p     object     dst p      null            dst p     mergeRecursive src p  constructor   Array            src p            else            mergeRecursive dst p   src p                      return dst            Loop through arguments and merge them into the first argument    var out   arguments 0     if  typeof out      object     out     null      return out    for  var i   1  il   arguments length  i  lt  il  i           mergeRecursive out  arguments i          return out      Some examples  Set innerHTML and style of a HTML Element  mergeRecursive    document getElementById  mydiv       style   border   5px solid green   color   red        innerHTML   Hello world        Merge arrays and objects  Note that undefined can be used to preserv values in the lefthand array object   o   mergeRecursive  a  a     1 2 3    undefined  null   30 31     a undefined  b  b        o    0 1  1 null  2  30 31   a  a   b  b     Any argument not beeing a JavaScript object  including null  will be ignored  Except for the first argument  also DOM nodes are discarded  Beware that i e  strings  created like new String   are in fact objects   o   mergeRecursive  a  a    1  true  null  undefined   1 2 3    bc   new String  de        o    0  d   1  e   2 3  a  a     If you want to merge two objects into a new  without affecting any of the two  supply    as first argument  var a     b  b  abc    c  c  cde    o  o   mergeRecursive a  b  c      o   a is true  o   b is false  o   c is false   Edit  by ReaperSoon    To also merge arrays  function mergeRecursive obj1  obj2      if  Array isArray obj2     return obj1 concat obj2       for  var p in obj2        try            Property in destination object set  update its value        if   obj2 p  constructor  Object             obj1 p    mergeRecursive obj1 p   obj2 p            else if  Array isArray obj2 p              obj1 p    obj1 p  concat obj2 p            else           obj1 p    obj2 p                 catch e             Property in destination object not set  create it and set its value        obj1 p    obj2 p               return obj1

User · Answer

I ve used Object create   to keep the default settings  utilising   proto   or Object getPrototypeOf        function myPlugin  settings        var defaults              keyName      string 1    string 2              var options   Object create  defaults        for  var key in settings    options key    settings key       myPlugin     keyName     string 3    string 4           This way I can always  concat    or  push    later   var newArray   options  keyName   concat  options   proto    keyName        Note  You ll need to do a hasOwnProperty check before concatenation to avoid duplication

User · Answer

In MooTools  there s Object merge     Object merge obj1  obj2

User · Answer

x000D   x000D  function extend o  o1  o2   x000D      if    o instanceof Object    o       x000D   x000D      copy o  o1   x000D      if  o2   x000D          copy o  o2  x000D   x000D      function isObject obj    x000D          var type   Object prototype toString call obj   x000D          return obj     Object obj   amp  amp  type      object Array    amp  amp  type      object Function    x000D         x000D   x000D      function copy a b   x000D             copy o2 to o x000D          for  var key in b   x000D              if  b hasOwnProperty key     x000D                  if  isObject b key      x000D                      if   isObject a key     x000D                          a key    Object assign     b key     x000D                      else copy a key   b key   x000D                    x000D                  else x000D                      a key    b key   x000D                x000D        x000D   x000D      return o  x000D     x000D   x000D   x000D  var o1    a  foo 1   b 1   x000D      o2    a  bar 2   b  1   c     gt      x000D      newMerged   extend     o1  o2   x000D       x000D  console log  newMerged   x000D  console log  o1   x000D  console log  o2   x000D   x000D   x000D

User · Answer

Prototype has this   Object extend   function destination source        for  var property in source          destination property    source property       return destination      obj1 extend obj2  will do what you want

User · Answer

Use     Takes any number of objects and returns one merged object var objectMerge   function        var out           if  arguments length          return out      for var i 0  i lt arguments length  i              for var key in arguments i                out key    arguments i  key                       return out      It was tested with   console log objectMerge  a 1  b 2    a 2  c 4       It results in     a  2  b  2  c  4

User · Answer

ECMAScript 2018 Standard Method  You would use object spread   let merged       obj1     obj2     merged is now the union of obj1 and obj2  Properties in obj2 will overwrite those in obj1       There s no limit to the number of objects you can merge      Later properties overwrite earlier properties with the same name     const allRules       obj1     obj2     obj3     Here is also the MDN documentation for this syntax  If you re using babel you ll need the babel-plugin-transform-object-rest-spread plugin for it to work   ECMAScript 2015  ES6  Standard Method     For the case in question  you would do     Object assign obj1  obj2        There s no limit to the number of objects you can merge      All objects get merged into the first object       Only the object in the first argument is mutated and returned      Later properties overwrite earlier properties with the same name     const allRules   Object assign     obj1  obj2  obj3  etc      see MDN JavaScript Reference     Method for ES5 and Earlier  for  var attrname in obj2    obj1 attrname    obj2 attrname       Note that this will simply add all attributes of obj2 to obj1 which might not be what you want if you still want to use the unmodified obj1   If you re using a framework that craps all over your prototypes then you have to get fancier with checks like hasOwnProperty  but that code will work for 99  of cases   Example function          Overwrites obj1 s values with obj2 s and adds obj2 s if non existent in obj1     param obj1     param obj2     returns obj3 a new object based on obj1 and obj2     function merge options obj1 obj2       var obj3           for  var attrname in obj1    obj3 attrname    obj1 attrname         for  var attrname in obj2    obj3 attrname    obj2 attrname         return obj3

User · Answer

There are different ways to achieve this  Object assign targetObj  sourceObj    targetObj       targetObj     sourceObj

User · Answer

My way   function mergeObjects defaults  settings        Object keys defaults  forEach function key default            if  typeof settings key default      undefined                 settings key default    defaults key default             else if  isObject defaults key default    amp  amp  isObject settings key default                  mergeObjects defaults key default   settings key default                           function isObject object            return Object prototype toString call object        object Object               return settings

User · Answer

Just by the way  what you re all doing is overwriting properties  not merging     This is how JavaScript objects area really merged  Only keys in the to object which are not objects themselves will be overwritten by from  Everything else will be really merged  Of course you can change this behaviour to not overwrite anything which exists like only if to n  is undefined  etc      var realMerge   function  to  from         for  n in from             if  typeof to n      object                 to n    from n             else if  typeof from n      object                 to n    realMerge to n   from n                        return to       Usage   var merged   realMerge obj1  obj2

User · Answer

Here what I used in my codebase to merge   function merge to  from      if  typeof to      object   amp  amp  typeof from      object         for  var pro in from          if  from hasOwnProperty pro             to pro    from pro                       else        throw  Merge function can apply only on object

User · Answer

A possible way to achieve this is the following   if   Object prototype merge       Object prototype merge   function obj           var self   this          Object keys obj  forEach function key               self key    obj key                         I don t know if it s better then the other answers  In this method you add the merge function to Objects prototype  This way you can call     obj1 merge obj2    Note   you should validate your argument to see if its an object and  throw  a proper Error  If not Object keys will  throw  an  Error

User · Answer

You can use the object spread syntax to achieve this  It s a part of ES2018 and beyond   x000D   x000D  const obj1     food   pizza   car   ford     const obj2     animal   dog      const obj3        obj1     obj2    console log obj3   x000D   x000D   x000D

User · Answer

function extend          var o             for  var i in arguments                 var s   arguments i             for  var i in s                         o i    s i                           return o

User · Answer

Just if anyone is using Google Closure Library   goog require  goog object    var a     a   1   b   2   var b     b   3   c   4   goog object extend a  b      Now object a      a   1   b   3   c   4     Similar helper function exists for array   var a    1  2   var b    3  4   goog array extend a  b      Extends array  a  goog array concat a  b      Returns concatenation of array  a  and  b

User · Answer

ES5 compatible native one-liner   var merged    obj1  obj2  reduce function a  o    for k in o  a k    o k   return a

User · Answer

Just if anyone is using Google Closure Library   goog require  goog object    var a     a   1   b   2   var b     b   3   c   4   goog object extend a  b      Now object a      a   1   b   3   c   4     Similar helper function exists for array   var a    1  2   var b    3  4   goog array extend a  b      Extends array  a  goog array concat a  b      Returns concatenation of array  a  and  b

User · Answer

You could assign every object a default merge  perhaps  inherit  a better name  method   It should work with either objects or instantiated functions   The below code handles overriding the merged values if so desired   Object prototype merge   function obj  override       Don t override by default      for  var key in obj            var n   obj key           var t   this key           this key     override  amp  amp  t    n   t               Test data is below   var Mammal   function          this eyes   2      this thinking brain   false      this say   function          console log  screaming like a mammal        var Human   function          this thinking brain   true      this say   function    console log  shouting like a human        john   new Human        Extend mammal  but do not override from mammal john merge new Mammal     john say        Extend mammal and override from mammal john merge new Mammal    true   john say

User · Answer

ES5 compatible native one-liner   var merged    obj1  obj2  reduce function a  o    for k in o  a k    o k   return a

User · Answer

With the following helper  you can merge two objects into one new object   function extend obj  src        for  var key in src            if  src hasOwnProperty key   obj key    src key             return obj        example var a     foo  true    b     bar  false    var c   extend a  b    console log c        foo  true  bar  false     This is typically useful when merging an options dict with the default settings in a function or a plugin   If support for IE 8 is not required  you may use Object keys for the same functionality instead   function extend obj  src        Object keys src  forEach function key    obj key    src key           return obj      This involves slightly less code and is a bit faster

User · Answer

Another method   function concat collection obj1  obj2        var i      var arr   new Array         var len1   obj1 length      for  i 0  i lt len1  i              arr push obj1 i               var len2   obj2 length      for  i 0  i lt len2  i              arr push obj2 i               return arr     var ELEMENTS   concat collection A B   for var i   0  i  lt  ELEMENTS length  i          alert ELEMENTS i  value

User · Answer

gossi s extension of David Coallier s method   Check these two lines   from   arguments i   Object getOwnPropertyNames from  forEach function  name      One need to check  from  against null object    If for example merging an object that comes from an Ajax response  previously created on a server  an object property can have a value of  null   and in that case the above code generates an error saying       from  is not a valid object   So for example  wrapping the     Object getOwnPropertyNames from  forEach     function with an  if  from    null           will prevent that error occurring

User · Answer

We can crate a empty object  and combine them by for-loop    x000D   x000D  var obj1     x000D    id   1   x000D    name   name  x000D    x000D   x000D  var obj2     x000D    c   c   x000D    d   d  x000D    x000D   x000D  var obj3      x000D   x000D  for  var attrname in obj1    obj3 attrname    obj1 attrname     x000D  for  var attrname in obj2    obj3 attrname    obj2 attrname     x000D   x000D   x000D  console log  obj1  obj2  obj3  x000D   x000D   x000D

User · Answer

You should use lodash s defaultsDeep    defaultsDeep    user      name    barney          user      name    fred    age   36               user      name    barney    age   36

User · Answer

There s a library called deepmerge on GitHub  That seems to be getting some traction  It s a standalone  available through both the npm and bower package managers   I would be inclined to use or improve on this instead of copy-pasting code from answers

User · Answer

Use Spread operator which follows the ES6 version   var obj1     food   pizza   car   ford    var obj2     animal   dog    let result       obj1    obj2   console log result   output   food   pizza   car   ford   animal   dog

User · Answer

There s a library called deepmerge on GitHub  That seems to be getting some traction  It s a standalone  available through both the npm and bower package managers   I would be inclined to use or improve on this instead of copy-pasting code from answers

User · Answer

I extended David Coallier s method    Added the possibility to merge multiple objects Supports deep objects override parameter  that s detected if the last parameter is a boolean    If override is false  no property gets overridden but new properties will be added   Usage  obj merge merges       override     Here is my code   Object defineProperty Object prototype   merge         enumerable  false      value  function              var override   true              dest   this              len   arguments length              props  merge  i  from           if  typeof arguments arguments length - 1        boolean                 override   arguments arguments length - 1               len   arguments length - 1                     for  i   0  i  lt  len  i                  from   arguments i               if  from    null                    Object getOwnPropertyNames from  forEach function  name                        var descriptor                          nesting                     if   typeof dest name        object     typeof dest name        undefined                                amp  amp  typeof from name        object                                 ensure proper types  Array rsp Object                          if  typeof dest name        undefined                                 dest name    Array isArray from name                                                                if  override                                if   Array isArray dest name    amp  amp  Array isArray from name                                      dest name                                                                  else if  Array isArray dest name    amp  amp   Array isArray from name                                      dest name                                                                                        dest name  merge from name   override                                                  flat properties                     else if   name in dest  amp  amp  override       name in dest                             descriptor   Object getOwnPropertyDescriptor from  name                           if  descriptor configurable                                Object defineProperty dest  name  descriptor                                                                                                       return this              Examples and TestCases   function clone  obj        return JSON parse JSON stringify obj      var obj         name    trick       value    value      var mergeObj         name    truck       value2    value2      var mergeObj2         name    track       value    mergeObj2       value2    value2-mergeObj2       value3    value3      assertTrue  Standard   clone obj  merge mergeObj  equals       name    truck       value    value       value2    value2        assertTrue  Standard no Override   clone obj  merge mergeObj  false  equals       name    trick       value    value       value2    value2        assertTrue  Multiple   clone obj  merge mergeObj  mergeObj2  equals       name    track       value    mergeObj2       value2    value2-mergeObj2       value3    value3        assertTrue  Multiple no Override   clone obj  merge mergeObj  mergeObj2  false  equals       name    trick       value    value       value2    value2       value3    value3        var deep         first             name    trick           val    value             second             foo    bar            var deepMerge         first             name    track           anotherVal    wohoo             second             foo    baz           bar    bam             v    on first layer      assertTrue  Deep merges   clone deep  merge deepMerge  equals       first             name    track           val    value           anotherVal    wohoo             second             foo    baz           bar    bam             v    on first layer        assertTrue  Deep merges no override   clone deep  merge deepMerge  false  equals       first             name    trick           val    value           anotherVal    wohoo             second             foo    bar           bar    bam             v    on first layer        var obj1    a  1  b   hello    obj1 merge  c  3    assertTrue obj1 equals  a  1  b   hello   c  3      obj1 merge  a  2  b   mom   d   new property    false   assertTrue obj1 equals  a  1  b   hello   c  3  d   new property       var obj2       obj2 merge  a  1    b  2    a  3    assertTrue obj2 equals  a  3  b  2      var a       var b    1   2  3   4   a merge b   assertEquals 1  a 0    assertEquals  2  3   a 1    assertEquals 4  a 2      var o1       var o2    a  1  b   c  2    var o3    d  3   o1 merge o2  o3   assertTrue o1 equals  a  1  b   c  2   d  3     o1 b c   99  assertTrue o2 equals  a  1  b   c  2          checking types with arrays and objects var bo  a       bo    1   0 2  1 3   4   b    1   2  3   4    a merge b   assertTrue  Array stays Array    Array isArray a 1      a       a merge bo   assertTrue  Object stays Object     Array isArray a 1      a       a merge b   a merge bo   assertTrue  Object overrides Array    Array isArray a 1      a       a merge b   a merge bo  false   assertTrue  Object does not override Array   Array isArray a 1      a       a merge bo   a merge b   assertTrue  Array overrides Object   Array isArray a 1      a       a merge bo   a merge b  false   assertTrue  Array does not override Object    Array isArray a 1       My equals method can be found here  Object comparison in JavaScript

User · Answer

The correct implementation in Prototype should look like this   var obj1    food   pizza   car   ford   var obj2    animal   dog    obj1   Object extend obj1  obj2

User · Answer

You can do the following in EcmaScript2016  Correction  it s a stage 3 proposal  still it has always worked for me  const objA       attrA   hello     attrB  true    const objB       attrC  2    const mergedObj       objA     objB

User · Answer

Use     Takes any number of objects and returns one merged object var objectMerge   function        var out           if  arguments length          return out      for var i 0  i lt arguments length  i              for var key in arguments i                out key    arguments i  key                       return out      It was tested with   console log objectMerge  a 1  b 2    a 2  c 4       It results in     a  2  b  2  c  4

User · Answer

Merging objects is simple using Object assign or the spread     operator      x000D   x000D  var obj1     food   pizza   car   ford    x000D  var obj2     animal   dog   car   BMW    x000D  var obj3    a   A   x000D   x000D   x000D  var mergedObj   Object assign obj1 obj2 obj3  x000D      or using the Spread operator       x000D  var mergedObj       obj1    obj2    obj3  x000D   x000D  console log mergedObj   x000D   x000D   x000D    The objects are merged from right to left  this means that objects which have identical properties as the objects to their right will be overriden   In this example obj2 car overrides obj1 car

User · Answer

Wow   this is the first StackOverflow post I ve seen with multiple pages  Apologies for adding another  quot answer quot   ES5  amp  Earlier This method is for ES5  amp  Earlier - there are plenty of other answers addressing ES6  I did not see any  quot deep quot  object merging utilizing the arguments property  Here is my answer - compact  amp  recursive  allowing unlimited object arguments to be passed  function extend         for  var o       i   0  i  lt  arguments length  i                 Uncomment to skip arguments that are not objects  to prevent errors             if  arguments i  constructor     Object  continue          for  var k in arguments i                 if  arguments i  hasOwnProperty k                     o k    arguments i  k  constructor     Object                       extend o k         arguments i  k                         arguments i  k                                     return o      Example  x000D   x000D         Extend objects     function extend         for  var o       i   0  i  lt  arguments length  i              for  var k in arguments i                 if  arguments i  hasOwnProperty k                     o k    arguments i  k  constructor     Object                       extend o k         arguments i  k                         arguments i  k                                     return o            Example     document write JSON stringify extend       api  1      params            query   hello                 params            query   there                 outputs   api   1   params     query    there    x000D   x000D   x000D    This answer is now but a drop in the ocean

User · Answer

A  a 1 b function   alert 9    B  a 2 c 3  A merge   function   for var i in B  A i  B i    A merge     Result is   a 2 c 3 b function

User · Answer

This solution creates a new object and is able to handle multiple objects   Furthermore  it is recursive and you can chose weather you want to overwrite Values and Objects       function extendObjects              var newObject                      var overwriteValues    false          var overwriteObjects   false           for   var indexArgument   0  indexArgument  lt  arguments length  indexArgument                    if   typeof arguments indexArgument       object                       if   arguments indexArgument      overwriteValues True                           overwriteValues   true                                else if   arguments indexArgument      overwriteValues False                           overwriteValues   false                                                 else if   arguments indexArgument      overwriteObjects True                           overwriteObjects   true                         else if   arguments indexArgument      overwriteObjects False                           overwriteObjects   false                                    else                    extendObject  arguments indexArgument   newObject  overwriteValues  overwriteObjects                                      function extendObject  object  extendedObject  overwriteValues  overwriteObjects                  for   var indexObject in object                      if   typeof object indexObject       object                           if   typeof extendedObject indexObject       undefined     overwriteObjects                             extendedObject indexObject    object indexObject                                              extendObject  object indexObject   extendedObject indexObject   overwriteValues  overwriteObjects                       else                        if   typeof extendedObject indexObject       undefined     overwriteValues                             extendedObject indexObject    object indexObject                                                                             return extendedObject                      return newObject             var object1               a   1  b   2  testArr    888    innArr   1    777    data     e   12  c     lol   1    rofl     O   3            var object2               a   6  b   9  data     a   17  b   18  e   13  rofl     O   99  copter     mao   1        hexa     tetra   66          var object3               f   13  g   666  a   333  data     c     xD   45      testArr    888    innArr   3    555            var newExtendedObject   extendObjects   overwriteValues False    overwriteObjects False   object1  object2  object3      Contents of newExtendedObject     a  1  b  2  testArr   888   innArr  1  777   data    e  12  c    lol  1  xD  45   rofl    O  3  copter    mao  1    a  17  b  18   hexa    tetra  66   f  13  g  666    Fiddle  http   jsfiddle net o0gb2umb

User · Answer

jQuery also has a utility for this  http   api jquery com jQuery extend    Taken from the jQuery documentation      Merge options object into settings object var settings     validate  false  limit  5  name   foo     var options      validate  true  name   bar     jQuery extend settings  options       Now the content of settings object is the following       validate  true  limit  5  name   bar      The above code will mutate the existing object named settings     If you want to create a new object without modifying either argument  use this   var defaults     validate  false  limit  5  name   foo     var options     validate  true  name   bar         Merge defaults and options  without modifying defaults    var settings     extend     defaults  options       The content of settings variable is now the following      validate  true  limit  5  name   bar      The  defaults  and  options  variables remained the same

User · Answer

Here s my stab which   Supports deep merge Does not mutate arguments Takes any number of arguments Does not extend the object prototype Does not depend on another library  jQuery  MooTools  Underscore js  etc   Includes check for hasOwnProperty Is short            Recursively merge properties and return new object     obj1  amp lt - obj2    amp lt -          function merge          var dst               src          p          args      splice call arguments  0             while  args length  gt  0            src   args splice 0  1  0           if  toString call src       object Object                  for  p in src                    if  src hasOwnProperty p                         if  toString call src p        object Object                              dst p    merge dst p         src p                          else                           dst p    src p                                                                             return dst       Example   a          p1    p1a        p2              a            b            c              p3   true       p5   null       p6              p61    p61a            p62    p62a            p63                  aa                bb                cc                      p64                  p641    p641a                      b          p1    p1b        p2              d            e            f              p3   false       p4   true       p6              p61    p61b            p64                  p642    p642b                      c          p1    p1c        p3   null       p6              p62    p62c            p64                  p643    p641c                      d   merge a  b  c            d              p1    p1c            p2                  d                e                f                      p3   null           p5   null           p6                  p61    p61b                p62    p62c                p63                      aa                    bb                    cc                              p64                      p641    p641a                    p642    p642b                    p643    p641c                                    p4   true

User · Answer

It seems like this should be all you need   var obj1     food   pizza   car   ford    var obj2     animal   dog     var obj1        obj1     obj2     After that obj1 should now have the following value    food   pizza   car   ford   animal   dog

User · Answer

shallow  var obj     name    Jacob    address     America     var obj2     name    Shaun    address     Honk Kong      var merged   Object assign      obj obj2      shallow merge  obj2 address 0     new city    result address 0  is changed to  new city    i e merged object is also changed  This is the problem with shallow merge   deep  var obj     name    Jacob    address     America     var obj2     name    Shaun    address     Honk Kong      var result   Object assign      JSON parse JSON stringify obj   JSON parse JSON stringify obj2      obj2 address 0     new city    result address 0  is not changed

User · Answer

The given solutions should be modified to check source hasOwnProperty property  in the for  in loops before assigning - otherwise  you end up copying the properties of the whole prototype chain  which is rarely desired

User · Answer

You can simply use jQuery extend  var obj1     val1  false  limit  5  name   foo     var obj2     val2  true  name   bar      jQuery extend obj1  obj2     Now obj1 contains all the values of obj1 and obj2

User · Answer

If you are using Dojo Toolkit then the best way to merge two object is using a mixin    Below is the sample for Dojo Toolkit mixin      Dojo 1 7   AMD  require   dojo  base lang    function lang     var a     b  c   d  e       lang mixin a    d  f   g  h        console log a      b c  d f  g h         Dojo  lt  1 7 var a     b  c   d  e     dojo mixin a    d  f   g  h      console log a      b c  d f  g h   For more details  please mixin

User · Answer

Similar to jQuery extend    you have the same function in AngularJS      Merge the  options  object into the  settings  object var settings    validate  false  limit  5  name   foo    var options     validate  true  name   bar    angular extend settings  options

User · Answer

I extended David Coallier s method    Added the possibility to merge multiple objects Supports deep objects override parameter  that s detected if the last parameter is a boolean    If override is false  no property gets overridden but new properties will be added   Usage  obj merge merges       override     Here is my code   Object defineProperty Object prototype   merge         enumerable  false      value  function              var override   true              dest   this              len   arguments length              props  merge  i  from           if  typeof arguments arguments length - 1        boolean                 override   arguments arguments length - 1               len   arguments length - 1                     for  i   0  i  lt  len  i                  from   arguments i               if  from    null                    Object getOwnPropertyNames from  forEach function  name                        var descriptor                          nesting                     if   typeof dest name        object     typeof dest name        undefined                                amp  amp  typeof from name        object                                 ensure proper types  Array rsp Object                          if  typeof dest name        undefined                                 dest name    Array isArray from name                                                                if  override                                if   Array isArray dest name    amp  amp  Array isArray from name                                      dest name                                                                  else if  Array isArray dest name    amp  amp   Array isArray from name                                      dest name                                                                                        dest name  merge from name   override                                                  flat properties                     else if   name in dest  amp  amp  override       name in dest                             descriptor   Object getOwnPropertyDescriptor from  name                           if  descriptor configurable                                Object defineProperty dest  name  descriptor                                                                                                       return this              Examples and TestCases   function clone  obj        return JSON parse JSON stringify obj      var obj         name    trick       value    value      var mergeObj         name    truck       value2    value2      var mergeObj2         name    track       value    mergeObj2       value2    value2-mergeObj2       value3    value3      assertTrue  Standard   clone obj  merge mergeObj  equals       name    truck       value    value       value2    value2        assertTrue  Standard no Override   clone obj  merge mergeObj  false  equals       name    trick       value    value       value2    value2        assertTrue  Multiple   clone obj  merge mergeObj  mergeObj2  equals       name    track       value    mergeObj2       value2    value2-mergeObj2       value3    value3        assertTrue  Multiple no Override   clone obj  merge mergeObj  mergeObj2  false  equals       name    trick       value    value       value2    value2       value3    value3        var deep         first             name    trick           val    value             second             foo    bar            var deepMerge         first             name    track           anotherVal    wohoo             second             foo    baz           bar    bam             v    on first layer      assertTrue  Deep merges   clone deep  merge deepMerge  equals       first             name    track           val    value           anotherVal    wohoo             second             foo    baz           bar    bam             v    on first layer        assertTrue  Deep merges no override   clone deep  merge deepMerge  false  equals       first             name    trick           val    value           anotherVal    wohoo             second             foo    bar           bar    bam             v    on first layer        var obj1    a  1  b   hello    obj1 merge  c  3    assertTrue obj1 equals  a  1  b   hello   c  3      obj1 merge  a  2  b   mom   d   new property    false   assertTrue obj1 equals  a  1  b   hello   c  3  d   new property       var obj2       obj2 merge  a  1    b  2    a  3    assertTrue obj2 equals  a  3  b  2      var a       var b    1   2  3   4   a merge b   assertEquals 1  a 0    assertEquals  2  3   a 1    assertEquals 4  a 2      var o1       var o2    a  1  b   c  2    var o3    d  3   o1 merge o2  o3   assertTrue o1 equals  a  1  b   c  2   d  3     o1 b c   99  assertTrue o2 equals  a  1  b   c  2          checking types with arrays and objects var bo  a       bo    1   0 2  1 3   4   b    1   2  3   4    a merge b   assertTrue  Array stays Array    Array isArray a 1      a       a merge bo   assertTrue  Object stays Object     Array isArray a 1      a       a merge b   a merge bo   assertTrue  Object overrides Array    Array isArray a 1      a       a merge b   a merge bo  false   assertTrue  Object does not override Array   Array isArray a 1      a       a merge bo   a merge b   assertTrue  Array overrides Object   Array isArray a 1      a       a merge bo   a merge b  false   assertTrue  Array does not override Object    Array isArray a 1       My equals method can be found here  Object comparison in JavaScript

User · Answer

With the following helper  you can merge two objects into one new object   function extend obj  src        for  var key in src            if  src hasOwnProperty key   obj key    src key             return obj        example var a     foo  true    b     bar  false    var c   extend a  b    console log c        foo  true  bar  false     This is typically useful when merging an options dict with the default settings in a function or a plugin   If support for IE 8 is not required  you may use Object keys for the same functionality instead   function extend obj  src        Object keys src  forEach function key    obj key    src key           return obj      This involves slightly less code and is a bit faster

User · Answer

Another method   function concat collection obj1  obj2        var i      var arr   new Array         var len1   obj1 length      for  i 0  i lt len1  i              arr push obj1 i               var len2   obj2 length      for  i 0  i lt len2  i              arr push obj2 i               return arr     var ELEMENTS   concat collection A B   for var i   0  i  lt  ELEMENTS length  i          alert ELEMENTS i  value

User · Answer

A possible way to achieve this is the following   if   Object prototype merge       Object prototype merge   function obj           var self   this          Object keys obj  forEach function key               self key    obj key                         I don t know if it s better then the other answers  In this method you add the merge function to Objects prototype  This way you can call     obj1 merge obj2    Note   you should validate your argument to see if its an object and  throw  a proper Error  If not Object keys will  throw  an  Error

User · Answer

You could assign every object a default merge  perhaps  inherit  a better name  method   It should work with either objects or instantiated functions   The below code handles overriding the merged values if so desired   Object prototype merge   function obj  override       Don t override by default      for  var key in obj            var n   obj key           var t   this key           this key     override  amp  amp  t    n   t               Test data is below   var Mammal   function          this eyes   2      this thinking brain   false      this say   function          console log  screaming like a mammal        var Human   function          this thinking brain   true      this say   function    console log  shouting like a human        john   new Human        Extend mammal  but do not override from mammal john merge new Mammal     john say        Extend mammal and override from mammal john merge new Mammal    true   john say

User · Answer

I m kind of getting started with JavaScript  so correct me if I m wrong   But wouldn t it be better if you could merge any number of objects  Here s how I do it using the native Arguments object   The key to is that you can actually pass any number of arguments to a JavaScript function without defining them in the function declaration  You just can t access them without using the Arguments object   function mergeObjects         var tmpObj            for var o in arguments            for var m in arguments o                 tmpObj m    arguments o  m                       return tmpObj

User · Answer

If you are using Dojo Toolkit then the best way to merge two object is using a mixin    Below is the sample for Dojo Toolkit mixin      Dojo 1 7   AMD  require   dojo  base lang    function lang     var a     b  c   d  e       lang mixin a    d  f   g  h        console log a      b c  d f  g h         Dojo  lt  1 7 var a     b  c   d  e     dojo mixin a    d  f   g  h      console log a      b c  d f  g h   For more details  please mixin

User · Answer

function extend          var o             for  var i in arguments                 var s   arguments i             for  var i in s                         o i    s i                           return o

User · Answer

If you need a deep merge that will also  merge  arrays by concatenating them in the result  then this ES6 function might be what you need    x000D   x000D  function deepMerge a  b    x000D         If neither is an object  return one of them  x000D      if  Object a      a  amp  amp  Object b      b  return b    a  x000D         Replace remaining primitive by empty object array x000D      if  Object a      a  a   Array isArray b             x000D      if  Object b      b  b   Array isArray a             x000D         Treat arrays differently  x000D      if  Array isArray a   amp  amp  Array isArray b     x000D             Merging arrays is interpreted as concatenation of their deep clones  x000D          return     a map v   gt  deepMerge v       b map v   gt  deepMerge v     x000D        else   x000D             Get the keys that exist in either object x000D          var keys   new Set     Object keys a     Object keys b     x000D             Recurse and assign to new object x000D          return Object assign        Array from keys  x000D              key   gt      key   deepMerge a key   b key          x000D        x000D    x000D   x000D     Sample data for demo  x000D  var a     x000D      groups     x000D          group     x000D              name   John   x000D              age  12 x000D              x000D              name   Mary   x000D              age  20 x000D              x000D          groupName   Pair  x000D          x000D      config    x000D          color   blue   x000D          range   far  x000D        x000D     x000D   x000D   x000D  var b     x000D      groups     x000D          group     x000D              name   Bill   x000D              age  15 x000D              x000D          groupName   Loner  x000D          x000D      config    x000D          range   close   x000D          strength   average  x000D        x000D     x000D   x000D  var merged   deepMerge a  b   x000D   x000D  console log merged   x000D   as-console-wrapper   max-height  100   important  top  0    x000D   x000D   x000D    Note that if only one argument is passed to this function  it acts as a deep clone function

User · Answer

This merges obj into a  default  def  obj has precedence for anything that exists in both  since obj is copied into def  Note also that this is recursive   function mergeObjs def  obj        if  typeof obj     undefined             return def        else if  typeof def     undefined             return obj            for  var i in obj            if  obj i     null  amp  amp  obj i  constructor    Object                def i    mergeObjs def i   obj i              else               def i    obj i                       return def     a    x    y    123    b    x    z   123   console log mergeObjs a  b        x   y    123   z   123

User · Answer

Merge properties of N objects in one line of code An Object assign method is part of the ECMAScript 2015  ES6  standard and does exactly what you need   IE not supported  var clone   Object assign     obj     The Object assign   method is used to copy the values of all enumerable own properties from one or more source objects to a target object   Read more    The polyfill to support older browsers  if   Object assign      Object defineProperty Object   assign         enumerable  false      configurable  true      writable  true      value  function target           use strict         if  target     undefined    target     null            throw new TypeError  Cannot convert first argument to object                   var to   Object target         for  var i   1  i  lt  arguments length  i              var nextSource   arguments i           if  nextSource     undefined    nextSource     null              continue                    nextSource   Object nextSource            var keysArray   Object keys nextSource           for  var nextIndex   0  len   keysArray length  nextIndex  lt  len  nextIndex                var nextKey   keysArray nextIndex             var desc   Object getOwnPropertyDescriptor nextSource  nextKey             if  desc     undefined  amp  amp  desc enumerable                to nextKey    nextSource nextKey                                       return to

User · Answer

var obj1     food   pizza   car   ford    var obj2     animal   dog        result result   food   pizza   car   ford   animal   dog     Using jQuery extend   - Link     Merge obj1  amp  obj2 to result var result1     extend      obj1  obj2      Using   merge   - Link     Merge obj1  amp  obj2 to result var result2     merge      obj1  obj2      Using   extend   - Link     Merge obj1  amp  obj2 to result var result3     extend      obj1  obj2      Using Object assign   ECMAScript 2015  ES6  - Link     Merge obj1  amp  obj2 to result var result4   Object assign      obj1  obj2      Output of all  obj1    animal   dog    obj2    food   pizza   car   ford    result1   food   pizza   car   ford   animal   dog   result2   food   pizza   car   ford   animal   dog   result3   food   pizza   car   ford   animal   dog   result4   food   pizza   car   ford   animal   dog

User · Answer

I googled for code to merge object properties and ended up here  However since there wasn t any code for recursive merge I wrote it myself   Maybe jQuery extend is recursive BTW   Anyhow  hopefully someone else will find it useful as well    Now the code does not use Object prototype     Code       Recursively merge properties of two objects     function MergeRecursive obj1  obj2       for  var p in obj2        try            Property in destination object set  update its value        if   obj2 p  constructor  Object             obj1 p    MergeRecursive obj1 p   obj2 p             else           obj1 p    obj2 p                   catch e             Property in destination object not set  create it and set its value        obj1 p    obj2 p                 return obj1      An example  o1      a   1          b   2          c               ca   1            cb   2            cc                 cca   100              ccb   200         o2      a   10          c               ca   10            cb   20             cc                 cca   101              ccb   202         o3   MergeRecursive o1  o2     Produces object o3 like  o3      a   10          b   2          c               ca   10            cb   20            cc                  cca   101              ccb   202

User · Answer

In Ext nbsp JS 4 it can be done as follows   var mergedObject   Ext Object merge object1  object2      Or shorter  var mergedObject2   Ext merge object1  object2    See merge  object     Object

User · Answer

In Ext nbsp JS 4 it can be done as follows   var mergedObject   Ext Object merge object1  object2      Or shorter  var mergedObject2   Ext merge object1  object2    See merge  object     Object

User · Answer

jQuery also has a utility for this  http   api jquery com jQuery extend    Taken from the jQuery documentation      Merge options object into settings object var settings     validate  false  limit  5  name   foo     var options      validate  true  name   bar     jQuery extend settings  options       Now the content of settings object is the following       validate  true  limit  5  name   bar      The above code will mutate the existing object named settings     If you want to create a new object without modifying either argument  use this   var defaults     validate  false  limit  5  name   foo     var options     validate  true  name   bar         Merge defaults and options  without modifying defaults    var settings     extend     defaults  options       The content of settings variable is now the following      validate  true  limit  5  name   bar      The  defaults  and  options  variables remained the same

User · Answer

You can merge objects through following my method   x000D   x000D  var obj1     food   pizza   car   ford     x000D  var obj2     animal   dog     x000D   x000D  var result   mergeObjects  obj1  obj2    x000D   x000D  console log result   x000D  document write  result   lt pre gt     JSON stringify result  0  3      lt  pre gt     x000D   x000D  function mergeObjects objectArray    x000D      if  objectArray length    x000D          var b       i   -1  x000D          while  objectArray   i     x000D              var str   JSON stringify objectArray i    x000D              b    str slice 1  str length - 1   x000D              if  objectArray i   1   b         x000D            x000D          return JSON parse       b         x000D        x000D      return     x000D    x000D   x000D   x000D

User · Answer

The following two are probably a good starting point  lodash also has a customizer function for those special needs     extend  http   underscorejs org  extend     merge  https   lodash com docs merge

User · Answer

For not-too-complicated objects you could use JSON   var obj1     food   pizza   car   ford    var obj2     animal   dog   car   chevy   var objMerge   objMerge   JSON stringify obj1    JSON stringify obj2         food    pizza   car   ford    animal   dog   car   chevy    objMerge   objMerge replace                      replace with comma for valid JSON  objMerge   JSON parse objMerge        food   pizza   animal   dog   car   chevy      Of same keys in both objects  the last object s value is retained     Mind you that in this example      must not occur within a string

User · Answer

We can crate a empty object  and combine them by for-loop    x000D   x000D  var obj1     x000D    id   1   x000D    name   name  x000D    x000D   x000D  var obj2     x000D    c   c   x000D    d   d  x000D    x000D   x000D  var obj3      x000D   x000D  for  var attrname in obj1    obj3 attrname    obj1 attrname     x000D  for  var attrname in obj2    obj3 attrname    obj2 attrname     x000D   x000D   x000D  console log  obj1  obj2  obj3  x000D   x000D   x000D

User · Answer

The Merge Of JSON Compatible JavaScript Objects  I encourage the use and utilization of nondestructive methods that don t modify the original source   Object assign  is a destructive method and it also happens to be not so production friendly because it stops working on earlier browsers and you have no way of patching it cleanly  with an alternative   Merging JS Objects will always be out of reach  or incomplete  whatever the solution  But merging JSON compliant compatible objects is just one step away from being able to write a simple and portable piece of code of a nondestructive method of merging series of JS Objects into a returned master containing all the unique property-names and their corresponding values synthesized in a single master object for the intended purpose   Having in mind that MSIE8 is the first browser to have added a native support for the JSON object is a great relief  and reusing the already existing technology  is always a welcomed opportunity   Restricting your code to JSON complant standard objects  is more of an advantage  than a restriction - since these objects can also be transmitted over the Internet  And of course for those who would like a deeper backward compatibility there s always a json plug   whose methods can easily be assigned to a JSON variable in the outer code without having to modify or rewrite the method in use   function Merge         var a      slice call  arguments    i   0          while  a i   a i    JSON stringify  a i      slice  1 -1            return JSON parse       a join                    Of course one can always give it a more meaningful name  which I haven t decided yet  should probably name it JSONmerge   The use case   var master   Merge  obj1  obj2  obj3     objn      Now  contrary to the Object assign this leaves all objects untouched and in their original state  in case you ve done something wrong and need to reorder the merging objects or be able to use them separately for some other operation before merging them again    Tthe number of the Merge arguments is also limited only by the arguments length limit  which is huge    The natively supported JSON parse   stringify is already machine optimized  meaning  it should be faster than any scripted form of JS loop   The iteration over given arguments  is being done using the while - proven to be the fastest loop in JS    It doesn t harm to briefly mention the fact we already know that duplicate properties of the unique object labels  keys  will be overwritten by the later object containing the same key label  which means you are in control of which property is taking over the previous by simply ordering or reordering the arguments list  And the benefit of getting a clean and updated master object with no dupes as a final output    x000D   x000D    x000D  var obj1    a 1   obj2    b 2   obj3    c 3  x000D    x000D  function Merge     x000D      var a      slice call  arguments    i   0  x000D          while  a i   a i    JSON stringify  a i      slice  1 -1    x000D          return JSON parse       a join           x000D        x000D    x000D  var master   Merge  obj1  obj2  obj3   x000D    x000D  console log  JSON stringify  master     x000D    x000D   x000D   x000D

User · Answer

Prototype has this   Object extend   function destination source        for  var property in source          destination property    source property       return destination      obj1 extend obj2  will do what you want

User · Answer

merge two object using Object assign and spread operator   Wrong way Modify original object because targeting o1   var o1     X  10    var o2     Y  20    var o3     Z  30    var merge   Object assign o1  o2  o3   console log merge       X 10  Y 20  Z 30  console log o1          X 10  Y 20  Z 30    Right ways   Object assign     o1  o2  o3      targeting new object     o1     o2     o3      spreading objects    x000D   x000D  var o1     X  10    x000D  var o2     Y  20    x000D  var o3     Z  30    x000D   x000D  console log  Does not modify original objects because target       x000D  var merge   Object assign     o1  o2  o3   x000D  console log merge        X  10  Y  20  Z  30   x000D  console log o1  x000D   x000D  console log  Does not modify original objects   x000D  var spreadMerge       o1     o2     o3   x000D  console log spreadMerge   x000D  console log o1   x000D   x000D   x000D

User · Answer

You can simply use jQuery extend  var obj1     val1  false  limit  5  name   foo     var obj2     val2  true  name   bar      jQuery extend obj1  obj2     Now obj1 contains all the values of obj1 and obj2

User · Answer

In MooTools  there s Object merge     Object merge obj1  obj2

User · Answer

The given solutions should be modified to check source hasOwnProperty property  in the for  in loops before assigning - otherwise  you end up copying the properties of the whole prototype chain  which is rarely desired

User · Answer

Object assign TargetObject  Obj1  Obj2

User · Answer

Use Spread operator which follows the ES6 version   var obj1     food   pizza   car   ford    var obj2     animal   dog    let result       obj1    obj2   console log result   output   food   pizza   car   ford   animal   dog

User · Answer

The correct implementation in Prototype should look like this   var obj1    food   pizza   car   ford   var obj2    animal   dog    obj1   Object extend obj1  obj2

User · Answer

In YUI Y merge should get the job done   Y merge obj1  obj2  obj3

User · Answer

The given solutions should be modified to check source hasOwnProperty property  in the for  in loops before assigning - otherwise  you end up copying the properties of the whole prototype chain  which is rarely desired

User · Answer

The following two are probably a good starting point  lodash also has a customizer function for those special needs     extend  http   underscorejs org  extend     merge  https   lodash com docs merge

User · Answer

Three ways you can do that - Approach 1 -    using spread         let obj1                obj2         Approach2 -    using  Object assign   method let obj1   Object assign     obj2    Approach3 -    using JSON let obj1   JSON parse JSON stringify obj2

User · Answer

If you need a deep merge that will also  merge  arrays by concatenating them in the result  then this ES6 function might be what you need    x000D   x000D  function deepMerge a  b    x000D         If neither is an object  return one of them  x000D      if  Object a      a  amp  amp  Object b      b  return b    a  x000D         Replace remaining primitive by empty object array x000D      if  Object a      a  a   Array isArray b             x000D      if  Object b      b  b   Array isArray a             x000D         Treat arrays differently  x000D      if  Array isArray a   amp  amp  Array isArray b     x000D             Merging arrays is interpreted as concatenation of their deep clones  x000D          return     a map v   gt  deepMerge v       b map v   gt  deepMerge v     x000D        else   x000D             Get the keys that exist in either object x000D          var keys   new Set     Object keys a     Object keys b     x000D             Recurse and assign to new object x000D          return Object assign        Array from keys  x000D              key   gt      key   deepMerge a key   b key          x000D        x000D    x000D   x000D     Sample data for demo  x000D  var a     x000D      groups     x000D          group     x000D              name   John   x000D              age  12 x000D              x000D              name   Mary   x000D              age  20 x000D              x000D          groupName   Pair  x000D          x000D      config    x000D          color   blue   x000D          range   far  x000D        x000D     x000D   x000D   x000D  var b     x000D      groups     x000D          group     x000D              name   Bill   x000D              age  15 x000D              x000D          groupName   Loner  x000D          x000D      config    x000D          range   close   x000D          strength   average  x000D        x000D     x000D   x000D  var merged   deepMerge a  b   x000D   x000D  console log merged   x000D   as-console-wrapper   max-height  100   important  top  0    x000D   x000D   x000D    Note that if only one argument is passed to this function  it acts as a deep clone function

User · Answer

The best way for you to do this is to add a proper property that is non-enumerable using Object defineProperty    This way you will still be able to iterate over your objects properties without having the newly created  extend  that you would get if you were to create the property with Object prototype extend   Hopefully this helps    Object defineProperty Object prototype   extend         enumerable  false      value  function from            var props   Object getOwnPropertyNames from           var dest   this          props forEach function name                if  name in dest                    var destination   Object getOwnPropertyDescriptor from  name                   Object defineProperty dest  name  destination                                     return this              Once you have that working  you can do    var obj         name   stack       finish   overflow    var replacement         name   stock      obj extend replacement     I just wrote a blog post about it here  http   onemoredigit com post 1527191998 extending-objects-in-node-js

User · Answer

You should use lodash s defaultsDeep    defaultsDeep    user      name    barney          user      name    fred    age   36               user      name    barney    age   36

User · Answer

I m kind of getting started with JavaScript  so correct me if I m wrong   But wouldn t it be better if you could merge any number of objects  Here s how I do it using the native Arguments object   The key to is that you can actually pass any number of arguments to a JavaScript function without defining them in the function declaration  You just can t access them without using the Arguments object   function mergeObjects         var tmpObj            for var o in arguments            for var m in arguments o                 tmpObj m    arguments o  m                       return tmpObj

User · Answer

The best way for you to do this is to add a proper property that is non-enumerable using Object defineProperty    This way you will still be able to iterate over your objects properties without having the newly created  extend  that you would get if you were to create the property with Object prototype extend   Hopefully this helps    Object defineProperty Object prototype   extend         enumerable  false      value  function from            var props   Object getOwnPropertyNames from           var dest   this          props forEach function name                if  name in dest                    var destination   Object getOwnPropertyDescriptor from  name                   Object defineProperty dest  name  destination                                     return this              Once you have that working  you can do    var obj         name   stack       finish   overflow    var replacement         name   stock      obj extend replacement     I just wrote a blog post about it here  http   onemoredigit com post 1527191998 extending-objects-in-node-js

User · Answer

I use the following which is in pure JavaScript  It starts from the right-most argument and combines them all the way up to the first argument  There is no return value  only the first argument is modified and the left-most parameter  except the first one  has the highest weight on properties   var merge   function       var il   arguments length     for  var i   il - 1  i  gt  0  --i        for  var key in arguments i           if  arguments i  hasOwnProperty key             arguments 0  key    arguments i  key

User · Answer

The Harmony ECMAScript 2015  ES6  specifies Object assign which will do this   Object assign obj1  obj2     Current browser support is getting better  but if you re developing for browsers that don t have support  you can use a polyfill

User · Answer

Similar to jQuery extend    you have the same function in AngularJS      Merge the  options  object into the  settings  object var settings    validate  false  limit  5  name   foo    var options     validate  true  name   bar    angular extend settings  options

User · Answer

Wow   this is the first StackOverflow post I ve seen with multiple pages  Apologies for adding another  quot answer quot   ES5  amp  Earlier This method is for ES5  amp  Earlier - there are plenty of other answers addressing ES6  I did not see any  quot deep quot  object merging utilizing the arguments property  Here is my answer - compact  amp  recursive  allowing unlimited object arguments to be passed  function extend         for  var o       i   0  i  lt  arguments length  i                 Uncomment to skip arguments that are not objects  to prevent errors             if  arguments i  constructor     Object  continue          for  var k in arguments i                 if  arguments i  hasOwnProperty k                     o k    arguments i  k  constructor     Object                       extend o k         arguments i  k                         arguments i  k                                     return o      Example  x000D   x000D         Extend objects     function extend         for  var o       i   0  i  lt  arguments length  i              for  var k in arguments i                 if  arguments i  hasOwnProperty k                     o k    arguments i  k  constructor     Object                       extend o k         arguments i  k                         arguments i  k                                     return o            Example     document write JSON stringify extend       api  1      params            query   hello                 params            query   there                 outputs   api   1   params     query    there    x000D   x000D   x000D    This answer is now but a drop in the ocean

User · Answer

In YUI Y merge should get the job done   Y merge obj1  obj2  obj3

User · Answer

With Underscore js  to merge an array of objects do   var arrayOfObjects      a 1    b 2  c 3    d 4       arrayOfObjects  reduce function memo  o    return   memo  extend o         It results in   Object  a  1  b  2  c  3  d  4

User · Answer

Merging objects is simple using Object assign or the spread     operator      x000D   x000D  var obj1     food   pizza   car   ford    x000D  var obj2     animal   dog   car   BMW    x000D  var obj3    a   A   x000D   x000D   x000D  var mergedObj   Object assign obj1 obj2 obj3  x000D      or using the Spread operator       x000D  var mergedObj       obj1    obj2    obj3  x000D   x000D  console log mergedObj   x000D   x000D   x000D    The objects are merged from right to left  this means that objects which have identical properties as the objects to their right will be overriden   In this example obj2 car overrides obj1 car

User · Answer

jQuery also has a utility for this  http   api jquery com jQuery extend    Taken from the jQuery documentation      Merge options object into settings object var settings     validate  false  limit  5  name   foo     var options      validate  true  name   bar     jQuery extend settings  options       Now the content of settings object is the following       validate  true  limit  5  name   bar      The above code will mutate the existing object named settings     If you want to create a new object without modifying either argument  use this   var defaults     validate  false  limit  5  name   foo     var options     validate  true  name   bar         Merge defaults and options  without modifying defaults    var settings     extend     defaults  options       The content of settings variable is now the following      validate  true  limit  5  name   bar      The  defaults  and  options  variables remained the same

User · Answer

For those using Node js  there s an NPM module  node extend  Install   npm install node extend   Usage   var extend   require  node extend    var destObject   extend true      sourceObject      Where sourceObject is the object whose properties will be copied into another

User · Answer

It seems like this should be all you need   var obj1     food   pizza   car   ford    var obj2     animal   dog     var obj1        obj1     obj2     After that obj1 should now have the following value    food   pizza   car   ford   animal   dog

User · Answer

You can merge objects through following my method   x000D   x000D  var obj1     food   pizza   car   ford     x000D  var obj2     animal   dog     x000D   x000D  var result   mergeObjects  obj1  obj2    x000D   x000D  console log result   x000D  document write  result   lt pre gt     JSON stringify result  0  3      lt  pre gt     x000D   x000D  function mergeObjects objectArray    x000D      if  objectArray length    x000D          var b       i   -1  x000D          while  objectArray   i     x000D              var str   JSON stringify objectArray i    x000D              b    str slice 1  str length - 1   x000D              if  objectArray i   1   b         x000D            x000D          return JSON parse       b         x000D        x000D      return     x000D    x000D   x000D   x000D

User · Answer

You can use Object assign method  For example  var result   Object assign obj1  obj2    Also  note that it creates a shallow copy of the object

User · Answer

I use the following which is in pure JavaScript  It starts from the right-most argument and combines them all the way up to the first argument  There is no return value  only the first argument is modified and the left-most parameter  except the first one  has the highest weight on properties   var merge   function       var il   arguments length     for  var i   il - 1  i  gt  0  --i        for  var key in arguments i           if  arguments i  hasOwnProperty key             arguments 0  key    arguments i  key

User · Answer

ECMAScript 2018 Standard Method  You would use object spread   let merged       obj1     obj2     merged is now the union of obj1 and obj2  Properties in obj2 will overwrite those in obj1       There s no limit to the number of objects you can merge      Later properties overwrite earlier properties with the same name     const allRules       obj1     obj2     obj3     Here is also the MDN documentation for this syntax  If you re using babel you ll need the babel-plugin-transform-object-rest-spread plugin for it to work   ECMAScript 2015  ES6  Standard Method     For the case in question  you would do     Object assign obj1  obj2        There s no limit to the number of objects you can merge      All objects get merged into the first object       Only the object in the first argument is mutated and returned      Later properties overwrite earlier properties with the same name     const allRules   Object assign     obj1  obj2  obj3  etc      see MDN JavaScript Reference     Method for ES5 and Earlier  for  var attrname in obj2    obj1 attrname    obj2 attrname       Note that this will simply add all attributes of obj2 to obj1 which might not be what you want if you still want to use the unmodified obj1   If you re using a framework that craps all over your prototypes then you have to get fancier with checks like hasOwnProperty  but that code will work for 99  of cases   Example function          Overwrites obj1 s values with obj2 s and adds obj2 s if non existent in obj1     param obj1     param obj2     returns obj3 a new object based on obj1 and obj2     function merge options obj1 obj2       var obj3           for  var attrname in obj1    obj3 attrname    obj1 attrname         for  var attrname in obj2    obj3 attrname    obj2 attrname         return obj3

User · Answer

Here what I used in my codebase to merge   function merge to  from      if  typeof to      object   amp  amp  typeof from      object         for  var pro in from          if  from hasOwnProperty pro             to pro    from pro                       else        throw  Merge function can apply only on object

User · Answer

I need to merge objects today  and this question  and answers  helped me a lot  I tried some of the answers  but none of them fit my needs  so I combined some of the answers  added something myself and came up with a new merge function  Here it is     var merge   function         var obj               i   0          il   arguments length          key      for    i  lt  il  i              for  key in arguments i                 if  arguments i  hasOwnProperty key                     obj key    arguments i  key                                     return obj       Some example usages   var t1         key1  1      key2   test       key3   5  2  76  21     var t2         key1            ik1   hello           ik2   world           ik3  3          var t3         key2  3      key3            t1  1          t2  2          t3                a1  1              a2  3              a4   21  3  42   asd                       console log merge t1  t2    console log merge t1  t3    console log merge t2  t3    console log merge t1  t2  t3    console log merge     t1    key1  1

User · Answer

The Harmony ECMAScript 2015  ES6  specifies Object assign which will do this   Object assign obj1  obj2     Current browser support is getting better  but if you re developing for browsers that don t have support  you can use a polyfill

User · Answer

jQuery also has a utility for this  http   api jquery com jQuery extend    Taken from the jQuery documentation      Merge options object into settings object var settings     validate  false  limit  5  name   foo     var options      validate  true  name   bar     jQuery extend settings  options       Now the content of settings object is the following       validate  true  limit  5  name   bar      The above code will mutate the existing object named settings     If you want to create a new object without modifying either argument  use this   var defaults     validate  false  limit  5  name   foo     var options     validate  true  name   bar         Merge defaults and options  without modifying defaults    var settings     extend     defaults  options       The content of settings variable is now the following      validate  true  limit  5  name   bar      The  defaults  and  options  variables remained the same

User · Answer

Three ways you can do that - Approach 1 -    using spread         let obj1                obj2         Approach2 -    using  Object assign   method let obj1   Object assign     obj2    Approach3 -    using JSON let obj1   JSON parse JSON stringify obj2

User · Answer

x000D   x000D  let obj1    a 1  b 2   x000D  let obj2    c 3  d 4   x000D  let merged       obj1     obj2   x000D  console log merged   x000D   x000D   x000D

User · Answer

It s worth mentioning that the version from the 140byt es collection is solving the task within minimum space and is worth a try for this purpose   Code   function m a b c  for c in b b hasOwnProperty c  amp  amp   typeof a c   0    o  m a c  b c   a c  b c      Usage for your purpose   m obj1 obj2     Here s the original Gist

User · Answer

Object assign    ECMAScript 2015  ES6   This is a new technology  part of the ECMAScript 2015  ES6  standard  This technology s specification has been finalized  but check the compatibility table for usage and implementation status in various browsers   The Object assign   method is used to copy the values of all enumerable own properties from one or more source objects to a target object  It will return the target object   var o1     a  1    var o2     b  2    var o3     c  3     var obj   Object assign o1  o2  o3   console log obj        a  1  b  2  c  3   console log o1         a  1  b  2  c  3    target object itself is changed

User · Answer

The Merge Of JSON Compatible JavaScript Objects  I encourage the use and utilization of nondestructive methods that don t modify the original source   Object assign  is a destructive method and it also happens to be not so production friendly because it stops working on earlier browsers and you have no way of patching it cleanly  with an alternative   Merging JS Objects will always be out of reach  or incomplete  whatever the solution  But merging JSON compliant compatible objects is just one step away from being able to write a simple and portable piece of code of a nondestructive method of merging series of JS Objects into a returned master containing all the unique property-names and their corresponding values synthesized in a single master object for the intended purpose   Having in mind that MSIE8 is the first browser to have added a native support for the JSON object is a great relief  and reusing the already existing technology  is always a welcomed opportunity   Restricting your code to JSON complant standard objects  is more of an advantage  than a restriction - since these objects can also be transmitted over the Internet  And of course for those who would like a deeper backward compatibility there s always a json plug   whose methods can easily be assigned to a JSON variable in the outer code without having to modify or rewrite the method in use   function Merge         var a      slice call  arguments    i   0          while  a i   a i    JSON stringify  a i      slice  1 -1            return JSON parse       a join                    Of course one can always give it a more meaningful name  which I haven t decided yet  should probably name it JSONmerge   The use case   var master   Merge  obj1  obj2  obj3     objn      Now  contrary to the Object assign this leaves all objects untouched and in their original state  in case you ve done something wrong and need to reorder the merging objects or be able to use them separately for some other operation before merging them again    Tthe number of the Merge arguments is also limited only by the arguments length limit  which is huge    The natively supported JSON parse   stringify is already machine optimized  meaning  it should be faster than any scripted form of JS loop   The iteration over given arguments  is being done using the while - proven to be the fastest loop in JS    It doesn t harm to briefly mention the fact we already know that duplicate properties of the unique object labels  keys  will be overwritten by the later object containing the same key label  which means you are in control of which property is taking over the previous by simply ordering or reordering the arguments list  And the benefit of getting a clean and updated master object with no dupes as a final output    x000D   x000D    x000D  var obj1    a 1   obj2    b 2   obj3    c 3  x000D    x000D  function Merge     x000D      var a      slice call  arguments    i   0  x000D          while  a i   a i    JSON stringify  a i      slice  1 -1    x000D          return JSON parse       a join           x000D        x000D    x000D  var master   Merge  obj1  obj2  obj3   x000D    x000D  console log  JSON stringify  master     x000D    x000D   x000D   x000D

User · Answer

x000D   x000D  let obj1    a 1  b 2   x000D  let obj2    c 3  d 4   x000D  let merged       obj1     obj2   x000D  console log merged   x000D   x000D   x000D

User · Answer

ES2018 TypeScript  Many answers are OK but I ve come up with a more elegant solution to this problem when you need to merge two objects without overwriting overlapping object keys   My function also accepts unlimited number of objects to merge as function arguments    I m using TypeScript notation here  feel free to delete the  object   type in the function argument if you re using plain JavaScript    const merge       objects  object      gt      return objects reduce  prev  next    gt        Object keys prev  forEach key   gt          next key         next key      prev key               return next

User · Answer

I googled for code to merge object properties and ended up here  However since there wasn t any code for recursive merge I wrote it myself   Maybe jQuery extend is recursive BTW   Anyhow  hopefully someone else will find it useful as well    Now the code does not use Object prototype     Code       Recursively merge properties of two objects     function MergeRecursive obj1  obj2       for  var p in obj2        try            Property in destination object set  update its value        if   obj2 p  constructor  Object             obj1 p    MergeRecursive obj1 p   obj2 p             else           obj1 p    obj2 p                   catch e             Property in destination object not set  create it and set its value        obj1 p    obj2 p                 return obj1      An example  o1      a   1          b   2          c               ca   1            cb   2            cc                 cca   100              ccb   200         o2      a   10          c               ca   10            cb   20             cc                 cca   101              ccb   202         o3   MergeRecursive o1  o2     Produces object o3 like  o3      a   10          b   2          c               ca   10            cb   20            cc                  cca   101              ccb   202

User · Answer

The given solutions should be modified to check source hasOwnProperty property  in the for  in loops before assigning - otherwise  you end up copying the properties of the whole prototype chain  which is rarely desired

User · Answer

Object assign    ECMAScript 2015  ES6   This is a new technology  part of the ECMAScript 2015  ES6  standard  This technology s specification has been finalized  but check the compatibility table for usage and implementation status in various browsers   The Object assign   method is used to copy the values of all enumerable own properties from one or more source objects to a target object  It will return the target object   var o1     a  1    var o2     b  2    var o3     c  3     var obj   Object assign o1  o2  o3   console log obj        a  1  b  2  c  3   console log o1         a  1  b  2  c  3    target object itself is changed

User · Answer

Note that underscore js s extend-method does this in a one-liner     extend  name    moe     age   50      gt   name    moe   age   50

User · Answer

I googled for code to merge object properties and ended up here  However since there wasn t any code for recursive merge I wrote it myself   Maybe jQuery extend is recursive BTW   Anyhow  hopefully someone else will find it useful as well    Now the code does not use Object prototype     Code       Recursively merge properties of two objects     function MergeRecursive obj1  obj2       for  var p in obj2        try            Property in destination object set  update its value        if   obj2 p  constructor  Object             obj1 p    MergeRecursive obj1 p   obj2 p             else           obj1 p    obj2 p                   catch e             Property in destination object not set  create it and set its value        obj1 p    obj2 p                 return obj1      An example  o1      a   1          b   2          c               ca   1            cb   2            cc                 cca   100              ccb   200         o2      a   10          c               ca   10            cb   20             cc                 cca   101              ccb   202         o3   MergeRecursive o1  o2     Produces object o3 like  o3      a   10          b   2          c               ca   10            cb   20            cc                  cca   101              ccb   202

User · Answer

You can use the object spread syntax to achieve this  It s a part of ES2018 and beyond   x000D   x000D  const obj1     food   pizza   car   ford     const obj2     animal   dog      const obj3        obj1     obj2    console log obj3   x000D   x000D   x000D

User · Answer

I googled for code to merge object properties and ended up here  However since there wasn t any code for recursive merge I wrote it myself   Maybe jQuery extend is recursive BTW   Anyhow  hopefully someone else will find it useful as well    Now the code does not use Object prototype     Code       Recursively merge properties of two objects     function MergeRecursive obj1  obj2       for  var p in obj2        try            Property in destination object set  update its value        if   obj2 p  constructor  Object             obj1 p    MergeRecursive obj1 p   obj2 p             else           obj1 p    obj2 p                   catch e             Property in destination object not set  create it and set its value        obj1 p    obj2 p                 return obj1      An example  o1      a   1          b   2          c               ca   1            cb   2            cc                 cca   100              ccb   200         o2      a   10          c               ca   10            cb   20             cc                 cca   101              ccb   202         o3   MergeRecursive o1  o2     Produces object o3 like  o3      a   10          b   2          c               ca   10            cb   20            cc                  cca   101              ccb   202

User · Answer

Based on Markus  and vsync  answer  this is an expanded version  The function takes any number of arguments  It can be used to set properties on DOM nodes and makes deep copies of values  However  the first argument is given by reference   To detect a DOM node  the isDOMNode   function is used  see Stack nbsp Overflow question JavaScript isDOM     How do you check if a JavaScript Object is a DOM Object    It was tested in Opera 11  Firefox 6  Internet nbsp Explorer nbsp 8 and Google Chrome 16   Code  function mergeRecursive            mergeRecursive does the actual job with two arguments    var  mergeRecursive   function  dst  src        if  isDOMNode src     typeof src      object     src     null          return dst             for  var p in src          if   src hasOwnProperty p           continue        if  src p      undefined          continue        if   typeof src p       object     src p      null            dst p    src p           else if  typeof dst p     object     dst p      null            dst p     mergeRecursive src p  constructor   Array            src p            else            mergeRecursive dst p   src p                      return dst            Loop through arguments and merge them into the first argument    var out   arguments 0     if  typeof out      object     out     null      return out    for  var i   1  il   arguments length  i  lt  il  i           mergeRecursive out  arguments i          return out      Some examples  Set innerHTML and style of a HTML Element  mergeRecursive    document getElementById  mydiv       style   border   5px solid green   color   red        innerHTML   Hello world        Merge arrays and objects  Note that undefined can be used to preserv values in the lefthand array object   o   mergeRecursive  a  a     1 2 3    undefined  null   30 31     a undefined  b  b        o    0 1  1 null  2  30 31   a  a   b  b     Any argument not beeing a JavaScript object  including null  will be ignored  Except for the first argument  also DOM nodes are discarded  Beware that i e  strings  created like new String   are in fact objects   o   mergeRecursive  a  a    1  true  null  undefined   1 2 3    bc   new String  de        o    0  d   1  e   2 3  a  a     If you want to merge two objects into a new  without affecting any of the two  supply    as first argument  var a     b  b  abc    c  c  cde    o  o   mergeRecursive a  b  c      o   a is true  o   b is false  o   c is false   Edit  by ReaperSoon    To also merge arrays  function mergeRecursive obj1  obj2      if  Array isArray obj2     return obj1 concat obj2       for  var p in obj2        try            Property in destination object set  update its value        if   obj2 p  constructor  Object             obj1 p    mergeRecursive obj1 p   obj2 p            else if  Array isArray obj2 p              obj1 p    obj1 p  concat obj2 p            else           obj1 p    obj2 p                 catch e             Property in destination object not set  create it and set its value        obj1 p    obj2 p               return obj1

User · Answer

ECMAScript 2018 Standard Method  You would use object spread   let merged       obj1     obj2     merged is now the union of obj1 and obj2  Properties in obj2 will overwrite those in obj1       There s no limit to the number of objects you can merge      Later properties overwrite earlier properties with the same name     const allRules       obj1     obj2     obj3     Here is also the MDN documentation for this syntax  If you re using babel you ll need the babel-plugin-transform-object-rest-spread plugin for it to work   ECMAScript 2015  ES6  Standard Method     For the case in question  you would do     Object assign obj1  obj2        There s no limit to the number of objects you can merge      All objects get merged into the first object       Only the object in the first argument is mutated and returned      Later properties overwrite earlier properties with the same name     const allRules   Object assign     obj1  obj2  obj3  etc      see MDN JavaScript Reference     Method for ES5 and Earlier  for  var attrname in obj2    obj1 attrname    obj2 attrname       Note that this will simply add all attributes of obj2 to obj1 which might not be what you want if you still want to use the unmodified obj1   If you re using a framework that craps all over your prototypes then you have to get fancier with checks like hasOwnProperty  but that code will work for 99  of cases   Example function          Overwrites obj1 s values with obj2 s and adds obj2 s if non existent in obj1     param obj1     param obj2     returns obj3 a new object based on obj1 and obj2     function merge options obj1 obj2       var obj3           for  var attrname in obj1    obj3 attrname    obj1 attrname         for  var attrname in obj2    obj3 attrname    obj2 attrname         return obj3

User · Answer

I ve used Object create   to keep the default settings  utilising   proto   or Object getPrototypeOf        function myPlugin  settings        var defaults              keyName      string 1    string 2              var options   Object create  defaults        for  var key in settings    options key    settings key       myPlugin     keyName     string 3    string 4           This way I can always  concat    or  push    later   var newArray   options  keyName   concat  options   proto    keyName        Note  You ll need to do a hasOwnProperty check before concatenation to avoid duplication

User · Answer

I need to merge objects today  and this question  and answers  helped me a lot  I tried some of the answers  but none of them fit my needs  so I combined some of the answers  added something myself and came up with a new merge function  Here it is     var merge   function         var obj               i   0          il   arguments length          key      for    i  lt  il  i              for  key in arguments i                 if  arguments i  hasOwnProperty key                     obj key    arguments i  key                                     return obj       Some example usages   var t1         key1  1      key2   test       key3   5  2  76  21     var t2         key1            ik1   hello           ik2   world           ik3  3          var t3         key2  3      key3            t1  1          t2  2          t3                a1  1              a2  3              a4   21  3  42   asd                       console log merge t1  t2    console log merge t1  t3    console log merge t2  t3    console log merge t1  t2  t3    console log merge     t1    key1  1

User · Answer

This solution creates a new object and is able to handle multiple objects   Furthermore  it is recursive and you can chose weather you want to overwrite Values and Objects       function extendObjects              var newObject                      var overwriteValues    false          var overwriteObjects   false           for   var indexArgument   0  indexArgument  lt  arguments length  indexArgument                    if   typeof arguments indexArgument       object                       if   arguments indexArgument      overwriteValues True                           overwriteValues   true                                else if   arguments indexArgument      overwriteValues False                           overwriteValues   false                                                 else if   arguments indexArgument      overwriteObjects True                           overwriteObjects   true                         else if   arguments indexArgument      overwriteObjects False                           overwriteObjects   false                                    else                    extendObject  arguments indexArgument   newObject  overwriteValues  overwriteObjects                                      function extendObject  object  extendedObject  overwriteValues  overwriteObjects                  for   var indexObject in object                      if   typeof object indexObject       object                           if   typeof extendedObject indexObject       undefined     overwriteObjects                             extendedObject indexObject    object indexObject                                              extendObject  object indexObject   extendedObject indexObject   overwriteValues  overwriteObjects                       else                        if   typeof extendedObject indexObject       undefined     overwriteValues                             extendedObject indexObject    object indexObject                                                                             return extendedObject                      return newObject             var object1               a   1  b   2  testArr    888    innArr   1    777    data     e   12  c     lol   1    rofl     O   3            var object2               a   6  b   9  data     a   17  b   18  e   13  rofl     O   99  copter     mao   1        hexa     tetra   66          var object3               f   13  g   666  a   333  data     c     xD   45      testArr    888    innArr   3    555            var newExtendedObject   extendObjects   overwriteValues False    overwriteObjects False   object1  object2  object3      Contents of newExtendedObject     a  1  b  2  testArr   888   innArr  1  777   data    e  12  c    lol  1  xD  45   rofl    O  3  copter    mao  1    a  17  b  18   hexa    tetra  66   f  13  g  666    Fiddle  http   jsfiddle net o0gb2umb

User · Answer

merge two object using Object assign and spread operator   Wrong way Modify original object because targeting o1   var o1     X  10    var o2     Y  20    var o3     Z  30    var merge   Object assign o1  o2  o3   console log merge       X 10  Y 20  Z 30  console log o1          X 10  Y 20  Z 30    Right ways   Object assign     o1  o2  o3      targeting new object     o1     o2     o3      spreading objects    x000D   x000D  var o1     X  10    x000D  var o2     Y  20    x000D  var o3     Z  30    x000D   x000D  console log  Does not modify original objects because target       x000D  var merge   Object assign     o1  o2  o3   x000D  console log merge        X  10  Y  20  Z  30   x000D  console log o1  x000D   x000D  console log  Does not modify original objects   x000D  var spreadMerge       o1     o2     o3   x000D  console log spreadMerge   x000D  console log o1   x000D   x000D   x000D

User · Answer

This merges obj into a  default  def  obj has precedence for anything that exists in both  since obj is copied into def  Note also that this is recursive   function mergeObjs def  obj        if  typeof obj     undefined             return def        else if  typeof def     undefined             return obj            for  var i in obj            if  obj i     null  amp  amp  obj i  constructor    Object                def i    mergeObjs def i   obj i              else               def i    obj i                       return def     a    x    y    123    b    x    z   123   console log mergeObjs a  b        x   y    123   z   123

User · Answer

Object assign TargetObject  Obj1  Obj2

User · Answer

For those using Node js  there s an NPM module  node extend  Install   npm install node extend   Usage   var extend   require  node extend    var destObject   extend true      sourceObject      Where sourceObject is the object whose properties will be copied into another

User · Answer

Here s my stab which   Supports deep merge Does not mutate arguments Takes any number of arguments Does not extend the object prototype Does not depend on another library  jQuery  MooTools  Underscore js  etc   Includes check for hasOwnProperty Is short            Recursively merge properties and return new object     obj1  amp lt - obj2    amp lt -          function merge          var dst               src          p          args      splice call arguments  0             while  args length  gt  0            src   args splice 0  1  0           if  toString call src       object Object                  for  p in src                    if  src hasOwnProperty p                         if  toString call src p        object Object                              dst p    merge dst p         src p                          else                           dst p    src p                                                                             return dst       Example   a          p1    p1a        p2              a            b            c              p3   true       p5   null       p6              p61    p61a            p62    p62a            p63                  aa                bb                cc                      p64                  p641    p641a                      b          p1    p1b        p2              d            e            f              p3   false       p4   true       p6              p61    p61b            p64                  p642    p642b                      c          p1    p1c        p3   null       p6              p62    p62c            p64                  p643    p641c                      d   merge a  b  c            d              p1    p1c            p2                  d                e                f                      p3   null           p5   null           p6                  p61    p61b                p62    p62c                p63                      aa                    bb                    cc                              p64                      p641    p641a                    p642    p642b                    p643    p641c                                    p4   true

User · Answer

It s worth mentioning that the version from the 140byt es collection is solving the task within minimum space and is worth a try for this purpose   Code   function m a b c  for c in b b hasOwnProperty c  amp  amp   typeof a c   0    o  m a c  b c   a c  b c      Usage for your purpose   m obj1 obj2     Here s the original Gist

User · Answer

ES2018 TypeScript  Many answers are OK but I ve come up with a more elegant solution to this problem when you need to merge two objects without overwriting overlapping object keys   My function also accepts unlimited number of objects to merge as function arguments    I m using TypeScript notation here  feel free to delete the  object   type in the function argument if you re using plain JavaScript    const merge       objects  object      gt      return objects reduce  prev  next    gt        Object keys prev  forEach key   gt          next key         next key      prev key               return next

User · Answer

There are different ways to achieve this  Object assign targetObj  sourceObj    targetObj       targetObj     sourceObj

User · Answer

For not-too-complicated objects you could use JSON   var obj1     food   pizza   car   ford    var obj2     animal   dog   car   chevy   var objMerge   objMerge   JSON stringify obj1    JSON stringify obj2         food    pizza   car   ford    animal   dog   car   chevy    objMerge   objMerge replace                      replace with comma for valid JSON  objMerge   JSON parse objMerge        food   pizza   animal   dog   car   chevy      Of same keys in both objects  the last object s value is retained     Mind you that in this example      must not occur within a string

User · Answer

My way   function mergeObjects defaults  settings        Object keys defaults  forEach function key default            if  typeof settings key default      undefined                 settings key default    defaults key default             else if  isObject defaults key default    amp  amp  isObject settings key default                  mergeObjects defaults key default   settings key default                           function isObject object            return Object prototype toString call object        object Object               return settings

User · Answer

Merge properties of N objects in one line of code An Object assign method is part of the ECMAScript 2015  ES6  standard and does exactly what you need   IE not supported  var clone   Object assign     obj     The Object assign   method is used to copy the values of all enumerable own properties from one or more source objects to a target object   Read more    The polyfill to support older browsers  if   Object assign      Object defineProperty Object   assign         enumerable  false      configurable  true      writable  true      value  function target           use strict         if  target     undefined    target     null            throw new TypeError  Cannot convert first argument to object                   var to   Object target         for  var i   1  i  lt  arguments length  i              var nextSource   arguments i           if  nextSource     undefined    nextSource     null              continue                    nextSource   Object nextSource            var keysArray   Object keys nextSource           for  var nextIndex   0  len   keysArray length  nextIndex  lt  len  nextIndex                var nextKey   keysArray nextIndex             var desc   Object getOwnPropertyDescriptor nextSource  nextKey             if  desc     undefined  amp  amp  desc enumerable                to nextKey    nextSource nextKey                                       return to

[javascript] How can I merge properties of two JavaScript objects dynamically?

Examples related to javascript

Examples related to javascript-objects