The JavaScript Object.assign() method
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
<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?
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?
{} as the target to leave your source objects unchanged.Is Object.assign() a deep copy?
structuredClone() for a deep copy.Should I use spread or Object.assign()?
{...a, ...b} is preferred for readability. Object.assign() is still useful when you intentionally want to mutate an existing target.