References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript Object.assign() method

Method JavaScript All modern browsers Updated
Quick answer

The Object.assign() method copies the properties of one or more source objects into a target object and returns that target. Object.assign({}, a, b) merges a and b into a new object. Later sources overwrite earlier ones. The modern spread syntax {...a, ...b} does the same job and is usually preferred.

Overview

Object.assign() merges objects. It copies every own enumerable property from the source objects you pass into the first object — the target — and returns the target. The classic use is combining defaults with overrides: Object.assign({}, defaults, options) gives a new object where the user's options win over the defaults.

The key behavior to internalize is that it mutates the target. Passing an existing object as the target changes it in place. That's why you so often see {} as the first argument — it creates a fresh target so the real sources stay untouched. Properties from later sources overwrite earlier ones, which is exactly what makes the override pattern work.

Today the spread operator covers most of this ground more readably: {...defaults, ...options} is the same merge without the mutation footgun. Both do a shallow copy, though — nested objects are shared by reference, not cloned — so for deep copies you'll want structuredClone() instead.

Syntax

const target = Object.assign(target, ...sources)

Object.assign({}, defaults, options)  // merge into a new object

// modern equivalent with spread
const merged = { ...defaults, ...options }

Parameters

The Object.assign() method accepts the following parameters.

Parameter Description
target The object that receives the copied properties. It is mutated and returned. Pass {} to keep sources untouched.
sources One or more objects whose own enumerable properties are copied in. Later sources overwrite earlier ones.

Example

Live example
<pre id="out" style="font:15px ui-monospace,monospace"></pre>
<script>
  const defaults = { theme: 'light', size: 14 };
  const options  = { size: 18 };

  const config = Object.assign({}, defaults, options);

  document.getElementById('out').textContent = JSON.stringify(config);
  // {"theme":"light","size":18}
</script>

Best practices

  • Pass {} as the target to merge without mutating your source objects.
  • Order matters — later sources overwrite earlier ones, so put overrides last.
  • Prefer the spread syntax {...a, ...b} in modern code; it's clearer and non-mutating.
  • Both do a shallow copy — use structuredClone() when you need a deep copy.

Frequently asked questions

How do I merge two objects in JavaScript?
Use Object.assign({}, a, b) or the spread syntax {...a, ...b}. Properties from the second object overwrite the first.
Does Object.assign() change the original object?
It mutates the target (the first argument). Pass {} as the target to leave your source objects unchanged.
Is Object.assign() a deep copy?
No, it's shallow — nested objects are copied by reference. Use structuredClone() for a deep copy.
Should I use spread or Object.assign()?
For most merges the spread syntax {...a, ...b} is preferred for readability. Object.assign() is still useful when you intentionally want to mutate an existing target.