JavaScript Objects
JavaScript Object Spread
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
Example
javascript
const base = { a: 1 };
const extended = { ...base, b: 2 };
console.log(Object.keys(extended).join(","));The output is a,b.
Spread and Rest
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
Syntax
javascript
const copy = { ...original };
const { a, ...rest } = original;Spread builds an object; rest collects what is left over.
Copying an Object
A copy means changes do not affect the original.
Example
Example
javascript
const original = { name: "Ada" };
const copy = { ...original };
copy.name = "Grace";
console.log(original.name);The original still says Ada.
Merging Objects
Later properties win when the names clash.
Example
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.
Updating One Property
This is the standard way to change a property without mutating.
Example
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 Properties
Rest collects everything you did not name.
Example
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.
It Is a Shallow Copy
Nested objects are shared, not copied.
Changing a nested property affects both objects.
Example
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
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>Try It Yourself
Run the above example in the Try It Editor.
Try swapping the order:
Put ...chosen first and see the theme change back.
Important Points
- Spread copies properties into a new object.
- When names clash, the later one wins.
- Rest collects the remaining properties during destructuring.
- Spread is the standard way to update without mutating.
- It is a shallow copy, so nested objects are shared.
Conclusion
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.