Deep-Merge JavaScript objects with ES6

deep-merge.js

// ⚠ IMPORTANT: this is old and doesn't work for many different edge cases but I'll keep it as-is for any of you want it
// ⚠ IMPORTANT: you can find more robust versions in the comments or use a library implementation such as lodash's `merge`

// Merge a `source` object to a `target` recursively
const merge = (target, source) => {
  // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties
  for (const key of Object.keys(source)) {
    if (source[key] instanceof Object) Object.assign(source[key], merge(target[key], source[key]))
  }

  // Join `target` and modified `source`
  Object.assign(target || {}, source)
  return target
}

deep-merge.min.js

const merge=(t,s)=>{const o=Object,a=o.assign;for(const k of o.keys(s))s[k]instanceof o&&a(s[k],merge(t[k],s[k]));return a(t||{},s),t}

@Eunomiac if you're making the behaviour contingent on an explicit argument, there's no need for a console warn, but I would make that an options object for clone (for a single property) to align it with your merge. A bigger issue is that you're using the JSON mechanism for cloning, but JSON cannot represent arbitrary JS objects because it's intended for data transport only, so non-data like symbols and functions end up getting ignored by JSON.stringify. While you can use the JSON.parse(JSON.stringify)) trick as a one liner to clone a pure data object, it is not suitable for deep cloning JS objects.

Finally, note that if you have merge, clone is basically a fallthrough function:

function merge(target = {}, source={}) {
  // this does not need to rely on clone
  // ...code goes here...
  return target;
}

function clone(obj) {
  // this doesn't need its own code: cloning is the same as merging into an empty object
  return merge({}, obj);
}

@Pomax Thanks a ton for taking the time to explain, I really appreciate it!

I was aware of the limitations of the parse/stringify trick in terms of losing anything that wasn't pure data, I just kind of accepted that as a necessary limitation of cloning (I actually stole the trick out of Underscore.js's library -- it's how their _.clone() method works -- and so I assumed that was the "best way" to do it).

But your way is definitely superior, as I'd love to convert my un-mutating merge function into one that performs an actual full deep clone, including of non-data properties.

I do have a few hopefully-quick follow-up questions, if you'd be so kind:

1. Is there anything your method won't accurately clone? I'm thinking of things like getters/setters, class definitions, or more exotic function definitions like generators and whatnot?

2. The "merge into an empty object" trick is so elegant and obvious in hindsight, I can't believe it never occurred to me. Am I right in concluding that, to take your original function and make it return a merged object without mutating the target, all I need to do is merge the target into an empty object at the top of the function (... with {isMutatingOk: true}, to avoid an infinite loop)?

3. Would it be better to use new target.__proto__.constructor() instead of {} as the first parameter in the clone() function, to allow for merging array objects as well?

1. if you want to deep clone classed objects, you need to set the correct prototype on the resulting cloned object
2. not sure why you'd get an infinite loop at all? copy(source) falls through to merge({}, source), but a regular merge you want to update the target, you don't want a new object at all. However, for the times that you really do, merge(copy(target), source) is always an option since we have that copy function =)
3. always tricky, as you have no guarantee that the constructor will even run without any arguments. Copying as plain object first, and then forcing the original prototype on, is generally more likely to succeed, but you do miss out on whatever side-effects the constructor might have. There is no universal solution here unfortunately.

let target = {...existing,...newdata};
This code will be more than enough to merge the data by using javascript.

let target = {...existing,...newdata}; This code will be more than enough to merge the data by using javascript.

As explain by @ahtcx , this gist is old. But its purpose is to merge objects deeply.
The gist {...existing,...newdata} operates a non-deep merge: it's not the same purpose.

@rmp0101

let target = {...existing,...newdata}; This code will be more than enough to merge the data by using javascript.

What part of the word deep you don't understand?

Very usefull! If someone wants to use more than of two objects you can combine this function with Array.reduce() and an array of objects.
[{}, {}, {}].reduce((ci, ni) => merge(ci, ni), {})

Non-mutating deep merge and copy, making use of the newish structuredClone function for the copying

function deepMerge(target, source) {
  const result = { ...target, ...source };
  for (const key of Object.keys(result)) {
    result[key] =
      typeof target[key] == 'object' && typeof source[key] == 'object'
        ? deepMerge(target[key], source[key])
        : structuredClone(result[key]);
  }
  return result;
}

(some more care would be needed if you need to handle Arrays)

note that structuredClone still requires you to do prototype assignment for classed/prototyped objects, though. That doesn't come free.