How to merge two objects in JavaScript

1Spread syntax: { ...a, ...b }Recommended

Object spread (ES2018) copies the own enumerable properties of each object into a new object literal, left to right. A later property with the same key overwrites the earlier one, so the object you want to take priority goes last. The inputs are never modified, and you can spread as many objects as you like and mix in literal keys anywhere in the list.

const defaults = { host: "localhost", port: 8080, debug: false };
const overrides = { port: 9090, debug: true };

const config = { ...defaults, ...overrides };
console.log(config);
console.log(defaults); // untouched

// Order decides who wins: the later object overrides the earlier one
console.log({ ...overrides, ...defaults });

// Any number of sources, plus literal keys before or after
const env = { host: "db.internal" };
console.log({ ...defaults, ...overrides, ...env, timeout: 30 });

Prints { host: 'localhost', port: 9090, debug: true }, then the unchanged defaults. Swapping the order prints { port: 8080, debug: false, host: 'localhost' }: the values now come from defaults, and the key order follows where each key first appeared, not which object won. The last line prints { host: 'db.internal', port: 9090, debug: true, timeout: 30 }. This is the same idea as Python's {**a, **b}.

2Object.assign (merges into its first argument)

Object.assign(target, ...sources) (ES2015) was the standard answer before spread existed, and it follows the same last-wins rule. The difference is where the result goes: it copies every source into the target and returns that same target object. Passing your defaults as the first argument therefore rewrites them for every other piece of code that holds a reference. Pass a fresh {} as the target when you want a copy.

const defaults = { host: "localhost", port: 8080 };
const overrides = { port: 9090, debug: true };

// Object.assign copies every source into the FIRST argument and returns it
const result = Object.assign(defaults, overrides);
console.log(defaults);
console.log(result === defaults);

// Pass a fresh {} as the target to leave the inputs alone
const base = { host: "localhost", port: 8080 };
const copy = Object.assign({}, base, overrides);
console.log(copy);
console.log(base);

The first call prints { host: 'localhost', port: 9090, debug: true } for defaults itself, and true: the return value is the target. With {} as the target you get the same merged object while base stays { host: 'localhost', port: 8080 }. Today Object.assign({}, a, b) and { ...a, ...b } are interchangeable for plain data; reach for Object.assign when you really do want to update an existing object, such as this in a constructor. One subtle difference: Object.assign sets properties, so it runs setters on the target, while spread only defines plain properties on a new object.

3Shallow merge: nested objects are replaced, not merged

Both spread and Object.assign are shallow. They only look at the top-level keys, so when both objects have a nested object under the same key, the later one replaces the earlier one entirely. They also don't copy nested objects: the merged object points at the very same inner objects as its inputs, so changing one through the copy changes the original.

const base = { db: { host: "localhost", port: 5432 }, debug: false };
const override = { db: { port: 6543 }, debug: true };

// The whole db object from override replaces base.db: host is lost
const merged = { ...base, ...override };
console.log(merged);

// Nested objects are shared, not copied
const copy = { ...base };
copy.db.port = 1;
console.log(base.db.port);
console.log(copy.db === base.db);

Prints { db: { port: 6543 }, debug: true }: db.host is gone, because override.db replaced base.db as a whole. Then 1 and true: editing copy.db edited base.db, since they are the same object. For configuration objects with nested sections, that first result is usually a bug, which is what the next section fixes.

4A small recursive deep merge

JavaScript has no built-in deep merge. The usual fix is a short recursive function: walk the source's keys, and when both sides hold a plain object, merge those two recursively; otherwise the source value wins. Deciding what counts as a "plain object" is the important part. Arrays, Dates, Maps and class instances all have typeof "object", but you almost never want to merge their insides, so the check below only accepts objects whose prototype is Object.prototype (or null).

// Only merge into plain {} objects; arrays, Dates, Maps and class instances are values
function isPlainObject(value) {
  if (value === null || typeof value !== "object") return false;
  const proto = Object.getPrototypeOf(value);
  return proto === Object.prototype || proto === null;
}

function deepMerge(target, source) {
  const result = { ...target };
  for (const [key, value] of Object.entries(source)) {
    if (isPlainObject(value) && isPlainObject(result[key])) {
      result[key] = deepMerge(result[key], value); // both sides are objects: recurse
    } else {
      result[key] = value; // anything else: the source wins
    }
  }
  return result;
}

const base = {
  db: { host: "localhost", port: 5432, pool: { min: 1, max: 5 } },
  tags: ["a", "b"],
  since: new Date("2026-01-01"),
};
const override = {
  db: { port: 6543, pool: { max: 20 } },
  tags: ["c"],
  since: new Date("2026-09-01"),
};

const merged = deepMerge(base, override);
console.log(merged.db);
console.log(merged.tags, merged.since);
console.log(base.db.port, base.db.pool.max); // the inputs are untouched
console.log(merged.tags === override.tags); // leaf values are shared, not copied

merged.db prints { host: 'localhost', port: 6543, pool: { min: 1, max: 20 } }: host and pool.min survive from base two levels down. The array and the date are treated as single values, so the next line prints [ 'c' ] 2026-09-01T00:00:00.000Z. Then 5432 5: every level is copied with spread, so base is untouched. The last line prints true: values taken from the source are shared, so wrap the result in structuredClone() if you need a fully independent copy. Libraries such as lodash's merge do the same job with more rules; check how they treat arrays, since lodash merges them index by index instead of replacing them.

5Which should you use?

6Conditionally adding a property

Spread also answers the question of how to add a key only when a condition holds, without an if after the literal. Write ...(condition && { key: value }) inside the object literal. When the condition is true, the small object is spread in. When it is false, you spread false, and spreading false, null or undefined adds nothing (it doesn't throw, unlike spreading them into an array). The ternary form ...(condition ? { key } : {}) says the same thing more explicitly.

function buildQuery({ search, page, admin }) {
  return {
    limit: 20,
    ...(search && { search }),        // only when search is truthy
    ...(page > 1 ? { page } : {}),    // the ternary form, explicit about the empty case
    ...(admin && { includeDeleted: true }),
  };
}

console.log(buildQuery({ search: "shoes", page: 1, admin: false }));
console.log(buildQuery({ search: "", page: 3, admin: true }));

// Spreading false, null or undefined into an object adds nothing
console.log({ ...false, ...null, ...undefined });

// Watch out: 0 and "" are falsy, so && drops them too
const retries = 0;
console.log({ ...(retries && { retries }) });
console.log({ ...(retries !== undefined && { retries }) });

Prints { limit: 20, search: 'shoes' } and { limit: 20, page: 3, includeDeleted: true }: the empty search and page 1 left no trace. Spreading the falsy values prints {}. The last two lines show the trap: retries && { retries } evaluates to 0, so a real zero is dropped and you get {}. Test what you actually mean, here retries !== undefined, and the key comes through as { retries: 0 }.