SyntaxShelf

Merge objects

2 snippets in JavaScript

JSJavaScript

Spread Operator

JS · Variables & Constants
Syntax
const merged = [...arr1, ...arr2];
const merged = { ...obj1, ...obj2 };
Example
const defaults = { theme: "light", lang: "en" };
const prefs = { theme: "dark", fontSize: 16 };
const config = { ...defaults, ...prefs };
console.log(config);
Output
{ theme: "dark", lang: "en", fontSize: 16 }

Note Later properties overwrite earlier ones. Only performs a shallow copy -- nested objects are still shared by reference.

Merging Objects

JS · Objects
Syntax
Object.assign(target, ...sources)
{ ...obj1, ...obj2 }
Example
const defaults = { theme: "light", lang: "en", debug: false };
const userPrefs = { theme: "dark", debug: true };

const settings = { ...defaults, ...userPrefs };
console.log(settings);
Output
{ theme: "dark", lang: "en", debug: true }

Note Both approaches are shallow. Later sources overwrite earlier ones. Use structuredClone for deep merging or a library for recursive merge.

Frequently asked questions

How do you merge objects?
JavaScript covers this with 2 copy-ready snippets on this page. The "Spread Operator" snippet in JavaScript uses `const merged = [...arr1, ...arr2];`.
Which code does the JavaScript example use?
The "Spread Operator" snippet uses `const merged = [...arr1, ...arr2];`, from the Variables & Constants section of the JavaScript cheat sheet.
What other JavaScript snippets are shown for "merge objects"?
Besides "Spread Operator", this page also shows "Merging Objects".
Is there anything to watch out for?
Yes. For "Spread Operator": Later properties overwrite earlier ones. Only performs a shallow copy -- nested objects are still shared by reference.

Browse all tasks by intent