Last active
June 9, 2024 14:56
-
-
Save ahtcx/0cd94e62691f539160b32ecda18af3d6 to your computer and use it in GitHub Desktop.
Deep-Merge JavaScript objects with ES6
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ⚠ 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 | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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} |
@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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.