How can I add or remove object properties without mutating the original?
Quick answer
For a simple JavaScript object, make a new object with { ...original, active: true } to add or replace a property. To omit a property, use const { secret, ...publicData } = original. Both create a new outer object instead of changing original. These are shallow operations: nested object values are still shared references, so changing a nested value through the copy can affect the original. [S1]
The question, the details, the next step.
I have an object and want to add a property without changing it. What should I write, and how can I check that the original stayed the same?
Put the original object's properties into a new object with spread syntax, then add the property you want. For example:
const original = { name: "Mina", role: "editor" };
const withActive = { ...original, active: true };The result is original equal to { name: "Mina", role: "editor" }, while withActive is { name: "Mina", role: "editor", active: true }. The spread creates a new outer object; this code does not change original. [S1]
If the new object already has a property with that name, the later value wins. For instance, { ...original, role: "reviewer" } gives the copy role: "reviewer" while leaving original.role as "editor". This is useful when you want to derive a modified object rather than edit the one you started with.
How do I make a copy without one property, such as omitting an internal secret field?
Use rest destructuring to take out the property you want to omit and collect the remaining properties into a new object:
const original = { name: "Mina", role: "editor", secret: "placeholder" };
const { secret, ...publicData } = original;Here original still has all three properties, including secret. publicData is { name: "Mina", role: "editor" }. The variable secret receives the omitted value; it is not included in publicData. This pattern makes a new outer object and does not delete anything from original. [S1]
Choose a destructuring name that makes the intended omission clear. If the property name is not present, the remaining object still contains the other properties; there is simply no matching value to take out.
Does this also give me a fully independent copy if my object has nested data?
No. Spread and rest make a shallow copy: they create a new outer object, but nested object values remain shared references. [S1] For example:
const original = { name: "Mina", settings: { theme: "light" } };
const copy = { ...original };original and copy are different outer objects, but both refer to the same settings object. So this change also changes the nested value seen through original:
copy.settings.theme = "dark";The add-or-omit examples are suitable when you are changing top-level properties and do not intend to edit shared nested objects. If you need nested data to be independent, consider how that data should be copied separately; these examples do not provide a deep-copy method. Object spread also does not copy non-enumerable properties or the original object's prototype. [S1]
Can you show both patterns together in a small example, and give me a quick way to choose?
Here is one object with separate copies for adding and omitting a property:
const original = { name: "Mina", role: "editor", active: false };
const enabled = { ...original, active: true };
const { role, ...withoutRole } = original;The results are original = { name: "Mina", role: "editor", active: false }, enabled = { name: "Mina", role: "editor", active: true }, and withoutRole = { name: "Mina", active: false }. Neither operation edits the original. [S1]
Use spread in an object literal when you want to preserve the existing properties and add or override a top-level property. Use rest destructuring when you want to collect the other properties while leaving out a named one. Check the values of both the original and the copy when you are learning the pattern. If the object contains nested objects or arrays, remember that checking the top-level properties does not mean nested data is independent.
A practical checklist
Use
{ ...original, key: value }to add or override a top-level property in a new object.Use
const { key, ...copy } = originalto omit a named property from a new object.Inspect both the original and the copy to confirm the intended top-level results.
Check whether nested objects or arrays are shared before changing nested values.
Remember that omitting a property from a copy does not delete it from the original.
A few more useful answers
Does object spread change the original object?
No. In an object literal, { ...original } creates a new outer object, and adding a later property changes that new object rather than the original. [S1]
Will the copy include the original object's prototype and non-enumerable properties?
No. Object-literal spread copies enumerable own properties; it does not copy non-enumerable properties or the prototype. [S1]
What if I want to omit more than one property?
Destructure each property you want to leave out, then collect the rest. For example: const { secret, token, ...publicData } = original;
Sources
References used for this guide.
- [S1] Spread syntax (...) — JavaScript | MDN developer.mozilla.org · Checked