Merge objects

2 snippets in JavaScript

JSJavaScript

Spread Operator

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.