JavaScript Objects
The JavaScript spread operator copies the properties of one object into another.
It is written as three dots before the object.
It is the usual way to copy or merge objects without changing the originals.
Example
javascript
const base = { a: 1 };
const extended = { ...base, b: 2 };
console.log(Object.keys(extended).join(","));The output is a,b.
Spread copies properties out of an object into a new one.
Rest collects the remaining properties into a new object during destructuring.
Both use three dots; the position tells you which is which.
Syntax
javascript
const copy = { ...original };
const { a, ...rest } = original;Spread builds an object; rest collects what is left over.
A copy means changes do not affect the original.
Example
javascript
const original = { name: "Ada" };
const copy = { ...original };
copy.name = "Grace";
console.log(original.name);The original still says Ada.
Later properties win when the names clash.
Example
javascript
const defaults = { theme: "light", size: "medium" };
const user = { theme: "dark" };
const settings = { ...defaults, ...user };
console.log(settings.theme + " " + settings.size);The user's theme overrides the default, and the size is kept.
This is the standard way to change a property without mutating.
Example
javascript
const user = { name: "Ada", active: false };
const updated = { ...user, active: true };
console.log(user.active + " " + updated.active);The original is untouched and a new object carries the change.
Rest collects everything you did not name.
Example
javascript
const user = { id: 1, name: "Ada", city: "London" };
const { id, ...details } = user;
console.log(Object.keys(details).join(","));The output is name,city.
Nested objects are shared, not copied.
Changing a nested property affects both objects.
Example
javascript
const original = { address: { city: "London" } };
const copy = { ...original };
copy.address.city = "Paris";
console.log(original.address.city);The output is Paris, because the inner object was shared.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Object Spread</title>
</head>
<body>
<h1>JavaScript Object Spread</h1>
<p id="result"></p>
<script>
const defaults = { theme: "light", size: "medium", lang: "en" };
const chosen = { theme: "dark" };
const settings = { ...defaults, ...chosen };
document.getElementById("result").innerHTML =
"theme: " + settings.theme + "<br>size: " + settings.size;
</script>
</body>
</html>Run the above example in the Try It Editor.
Try swapping the order:
Put ...chosen first and see the theme change back.
Object spread makes copying and merging a single expression.
It is the basis of the update-without-mutating pattern used across modern JavaScript.
Remember it only copies one level deep.