Skip to content

Instantly share code, notes, and snippets.

@ahtcx
Last active April 29, 2024 17:13
Show Gist options
  • Star 88 You must be signed in to star a gist
  • Fork 10 You must be signed in to fork a gist
  • Save ahtcx/0cd94e62691f539160b32ecda18af3d6 to your computer and use it in GitHub Desktop.
Save ahtcx/0cd94e62691f539160b32ecda18af3d6 to your computer and use it in GitHub Desktop.
Deep-Merge JavaScript objects with ES6
// ⚠ 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
}
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}
@Pomax
Copy link

Pomax commented May 10, 2022

  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.

@Rehanmp
Copy link

Rehanmp commented Sep 15, 2022

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

@enten
Copy link

enten commented Oct 15, 2022

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.

@pkit
Copy link

pkit commented Apr 18, 2023

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

@TacticalSystem
Copy link

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), {})

@gavin-lb
Copy link

gavin-lb commented Jun 9, 2023

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)

@Pomax
Copy link

Pomax commented Jun 30, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment