How to Add/Remove Object Properties in JavaScript

Use dot notation or bracket notation to add, update, and remove object properties as your data changes. This is the standard way to manage user profiles, settings, cart items, and dynamic API payloads.

What you’ll build or solve

You’ll learn how to add and remove object properties in JavaScript. You’ll also know when to use dot notation, bracket notation, and the delete operator.

When this approach works best

This approach is the right choice when object data needs to change after creation.

Common real-world scenarios include:

• Updating user profiles
• Toggling settings
• Adding cart metadata
• Removing temporary fields
• Cleaning API payloads

This is a bad idea when the data should stay immutable for state management. In that case, create a new object instead of mutating the original.

Prerequisites

You only need:

• A JavaScript file or browser console
• A basic object
• Basic object syntax knowledge

Step-by-step instructions

Step 1: Add, update, and remove properties

Use dot notation to add or update a known property name.

const user = {
  name: "Alex"
};

user.age = 30;
user.name = "Jordan";

console.log(user);

Use bracket notation when the key is dynamic.

const fieldName = "email";
user[fieldName] = "alex@example.com";

To remove a property, use delete.

delete user.age;

What to look for:

• Dot notation is best for known keys
• Bracket notation works for dynamic keys
• delete removes the property completely
• Updating uses the same syntax as adding
• Prefer immutable copies in state-heavy apps

Examples you can copy

Add a settings field

const settings = {
  theme: "dark"
};

settings.notifications = true;

Dynamic profile update

const key = "role";
user[key] = "admin";

Remove temp data

delete user.tempToken;

Common mistakes and how to fix them

Mistake 1: Using dot notation with a variable key

What the reader might do:

const key = "email";
user.key = "alex@example.com";

Why it breaks: this creates a literal key property instead of using the variable value.

Corrected approach:

user[key] = "alex@example.com";

Mistake 2: Expecting delete to return the object

What the reader might do:

const updatedUser = delete user.age;

Why it breaks: delete returns a boolean, not the updated object.

Corrected approach:

delete user.age;

Then use the original object variable.

Mistake 3: Mutating shared state unexpectedly

What the reader might do:

const updated = user;
updated.role = "admin";

Why it breaks: both variables reference the same object.

Corrected approach:

const updated = {
  ...user,
  role: "admin"
};

Troubleshooting

If the wrong property name appears, check whether you needed bracket notation.

If the removed field still exists, confirm the correct key name.

If shared state changes unexpectedly, clone the object first.

If updates fail in frameworks, use immutable object copies.

Quick recap

• Use dot notation for known keys
• Use bracket notation for dynamic keys
• Use delete to remove properties
• Updating uses the same syntax as adding
• Clone objects when mutation is unsafe