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}

@craigphicks @arnotes @c0d3r111 @cxe
I still consider myself fairly new to Javascript, and wanted to ask if the implementations you have posted since my version are improvements or corrections to any errors/inefficiencies in how I coded things, and, if so, what the shortcomings in my code are? (I realize this request goes a bit beyond the scope of this thread, but I would very much appreciate your insights all the same, if you are so inclined! Please and thanks in advance :) )

@Eunomiac

@craigphicks @arnotes @c0d3r111 @cxe
I still consider myself fairly new to Javascript, and wanted to ask if the implementations you have posted since my version are improvements or corrections to any errors/inefficiencies in how I coded things, and, if so, what the shortcomings in my code are? (I realize this request goes a bit beyond the scope of this thread, but I would very much appreciate your insights all the same, if you are so inclined! Please and thanks in advance :) )

In my case I was not improving, evaluating or criticizing your code, which looks fine to me.

My interpretation the code by @arnotes, @c0d3r111, @cxe is that they are aiming for the shortest length code expression of the single most likely use case.

I think the most "mind expanding: pointer I could give would be to check out what the lodash library has to offer for deep merging.The basic deep merge (https://lodash.com/docs/#merge) merges the arrays index by index, rather than append and dedupe, as shown in the example.

How about a custom deep merge with array append and dedupe?

I think it should be possible using lodash mergeWith and union functions. If you can figure it out and post it here I will read it for sure, and I think it will be relevant and valuable information for anyone else who visits this page.

Happy coding!

Hi there, thanks for such an elegant and short solution!

I've just faced some trouble after trying to merge two objects (one of them is deep).
So I just like to share my solution, just in case if someone faces it too.

Consider the following piece of code:

const firstObject = { test: 1 };

const secondObject = {
  firstLevel: {
    secondLevel: {
      thirdLevel: 'value'
    }
  }
};

const mergedObject = merge(firstObject, secondObject);
console.log(mergedObject);

If you try to reproduce it, you'll get an error Uncaught TypeError: Cannot read property 'secondLevel' of undefined.

This is because the merge script (5th line) tries to get target[key], while there is no 'secondLevel' key in target object.

Therefore, you can add an additional check for key existence by slightly modifying if condition, and the problem will be fixed:

if (source[key] instanceof Object && target.hasOwnProperty(key))

Hope this helps someone.

We can harden this a little by taken advantage of 2021 JS. First, weeding out the "primitive" null, because there's only one null and it's a straight assignment, not a property copy:

function merge(source, target) {
  for (const [key, val] of Object.entries(source)) {
    if (val !== null && typeof val === `object`) {
      target[key] ??=new val.__proto__.constructor();
      merge(val, target[key]);
    } else {
      target[key] = val;
    }
  }
  return target; // we're replacing in-situ, so this is more for chaining than anything else
}

With the improvements relying on iterating with key/values using for (const [k,v] of Object.entries(...)), and constructing "whatever this object was if it's missing in the target" based on the __proto__ constructor.

(and with swapped args because you look for needles in haystacks, and you merge sources into targets)

@Pomax This ^^ is the best solution to date and solves some multi-level nested object issues with the original gist. Good work!

For those who want a deep merge function that only mutates the original target if given permission, I've updated (and simplified) my earlier solution to make use of @Pomax 's great use of __proto__ constructors (something I know less than nothing about). I did decide to retain the original target, source ordering of the parameters, as it aligns with Object.assign() and I intuit merge() to be more similar to that than to needle/haystack search functions --- totally a matter of personal opinion, of course!

(I also decided to separate the cloneObj() and merge() functions, as the former is quite useful on its own and doesn't need to clutter up the latter's function body.)

function clone(obj, isStrictlySafe = false) {
  /* Clones an object. First attempt is safe. If it errors (e.g. from a circular reference),
        'isStrictlySafe' determines if error is thrown or an unsafe clone is returned. */
  try {
    return JSON.parse(JSON.stringify(obj));
  } catch(err) {
    if (isStrictlySafe) { throw new Error(err) }
    console.warn(`Unsafe clone of object`, obj);
    return {...obj};
  }
}

function merge(target, source, {isMutatingOk = false, isStrictlySafe = false} = {}) {
  /* Returns a deep merge of source into target.
        Does not mutate target unless isMutatingOk = true. */
  target = isMutatingOk ? target : clone(target, isStrictlySafe);
  for (const [key, val] of Object.entries(source)) {
    if (val !== null && typeof val === `object`) {
      if (target[key] === undefined) {
        target[key] = new val.__proto__.constructor();
      }
      /* even where isMutatingOk = false, recursive calls only work on clones, so they can always
            safely mutate --- saves unnecessary cloning */
      target[key] = merge(target[key], val, {isMutatingOk: true, isStrictlySafe}); 
    } else {
      target[key] = val;
    }
  }
  return target;
}

@Pomax If you happen by here somewhere along the line and are in a sharing mood, I'd love to hear your insights on the above --- I'm still learning JavaScript and am rabid for any pearls of wisdom I can find! :) (Oh, and that obviously goes for anyone else who happens by and has pearls to cast before... uh, me!)

@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.