JavaScript Object Properties: Adding, Updating, and Deleting Properties

by

JavaScript objects store related information using properties and values. When working with objects, you may need to add new properties, update existing values, or remove properties that are no longer required.

JavaScript makes these operations simple using dot notation, bracket notation, and the delete operator.

In this tutorial, you will learn how to add, update, and delete object properties with practical examples and outputs.

What Are JavaScript Object Properties?

An object property is a key-value pair that stores information about an object.

For example:

const student = {
    name: "Rahul",
    age: 21,
    course: "JavaScript"
};

console.log(student);

Output:

{
    name: 'Rahul',
    age: 21,
    course: 'JavaScript'
}

In this example, name, age, and course are properties of the student object.

You can access these properties using JavaScript dot notation or bracket notation.

Adding Properties to a JavaScript Object

You can add a new property to an existing object by assigning a value to a property name that does not already exist.

JavaScript supports two common approaches: dot notation and bracket notation.

Adding Properties Using Dot Notation

Dot notation uses a dot (.) between the object name and the property name.

Syntax:

objectName.propertyName = value;

Example:

const student = {
    name: "Rahul",
    age: 21
};

student.course = "JavaScript";

console.log(student);

Output:

{
    name: 'Rahul',
    age: 21,
    course: 'JavaScript'
}

The course property did not exist initially. The assignment student.course = "JavaScript" adds it to the object.

You can add multiple properties in the same way.

const student = {
    name: "Rahul"
};

student.age = 21;
student.city = "Hyderabad";
student.isEnrolled = true;

console.log(student);

Output:

{
    name: 'Rahul',
    age: 21,
    city: 'Hyderabad',
    isEnrolled: true
}

Adding Properties Using Bracket Notation

Bracket notation uses square brackets ([]) to specify a property name.

Syntax:

objectName["propertyName"] = value;

Example:

const student = {
    name: "Rahul"
};

student["age"] = 21;
student["course"] = "JavaScript";

console.log(student);

Output:

{
    name: 'Rahul',
    age: 21,
    course: 'JavaScript'
}

Bracket notation is useful when property names contain spaces or are stored in variables.

const student = {
    name: "Rahul"
};

const propertyName = "favorite subject";

student[propertyName] = "JavaScript";

console.log(student["favorite subject"]);

Output:

JavaScript

Here, the variable propertyName contains the property name. Bracket notation evaluates the variable and adds the corresponding property.

For more details, read the tutorial on JavaScript bracket notation.

Updating Properties in a JavaScript Object

Updating a property means changing the value of an existing property.

You can update properties using either dot notation or bracket notation.

Updating Properties Using Dot Notation

Syntax:

objectName.propertyName = newValue;

Example:

const student = {
    name: "Rahul",
    age: 21,
    course: "HTML"
};

student.course = "JavaScript";
student.age = 22;

console.log(student);

Output:

{
    name: 'Rahul',
    age: 22,
    course: 'JavaScript'
}

The course value changes from "HTML" to "JavaScript", and the age value changes from 21 to 22.

The original values are replaced rather than creating duplicate properties with the same keys.

Updating Properties Using Bracket Notation

You can also use bracket notation to update an existing property.

const product = {
    name: "Laptop",
    price: 50000,
    brand: "Dell"
};

product["price"] = 45000;

console.log(product.price);

Output:

45000

The price property now contains 45000 instead of 50000.

Updating Properties Dynamically

Bracket notation allows you to update a property when its name is stored in a variable.

const employee = {
    name: "Anjali",
    salary: 25000,
    department: "Sales"
};

const propertyName = "salary";

employee[propertyName] = 30000;

console.log(employee.salary);

Output:

30000

This technique is helpful when processing form inputs, user settings, or data received from an API.

Updating a Property Using a Calculation

You can use an existing property’s value to calculate its new value.

const product = {
    name: "Keyboard",
    price: 1000
};

product.price = product.price + 200;

console.log(product.price);

Output:

1200

You can also use the increment operator or compound assignment operators when appropriate.

const counter = {
    value: 5
};

counter.value++;
console.log(counter.value);

counter.value += 10;
console.log(counter.value);

Output:

6
16

Deleting Properties from a JavaScript Object

You can remove a property from an object using the delete operator.

Syntax:

delete objectName.propertyName;

Deleting a Property Using Dot Notation

Example:

const student = {
    name: "Rahul",
    age: 21,
    course: "JavaScript"
};

delete student.age;

console.log(student);

Output:

{
    name: 'Rahul',
    course: 'JavaScript'
}

The age property is removed from the student object.

Deleting a Property Using Bracket Notation

You can also use bracket notation with the delete operator.

const product = {
    name: "Laptop",
    price: 50000,
    brand: "Dell"
};

delete product["brand"];

console.log(product);

Output:

{
    name: 'Laptop',
    price: 50000
}

The brand property is removed from the object.

Deleting a Property Dynamically

If the property name is stored in a variable, use bracket notation.

const employee = {
    name: "Anjali",
    salary: 30000,
    department: "IT"
};

const propertyName = "salary";

delete employee[propertyName];

console.log(employee);

Output:

{
    name: 'Anjali',
    department: 'IT'
}

This approach is useful when the property to remove is determined at runtime.

Checking Whether a Property Exists

After adding, updating, or deleting a property, you may want to check whether the property exists.

You can use the in operator to check whether a property exists on an object or its prototype chain.

const student = {
    name: "Rahul",
    age: 21
};

console.log("name" in student);
console.log("course" in student);

Output:

true
false

You can also use Object.hasOwn() to check whether a property belongs directly to the object.

console.log(Object.hasOwn(student, "name"));
console.log(Object.hasOwn(student, "course"));

Output:

true
false

This is particularly useful when working with objects whose properties can change over time.

Difference Between Adding, Updating, and Deleting Properties

OperationPurposeExample
AddingCreates a new propertystudent.city = "Hyderabad"
UpdatingChanges an existing valuestudent.age = 22
DeletingRemoves a propertydelete student.age

The assignment operator (=) can add a property if it does not exist or update it if it already exists. The delete operator removes a configurable property from an object.

Practical Example: Managing Product Details

The following example combines all three operations.

const product = {
    name: "Wireless Mouse",
    price: 799,
    brand: "Logitech"
};

// Add a new property
product.color = "Black";

// Update an existing property
product.price = 899;

// Delete an existing property
delete product.brand;

console.log(product);

Output:

{
    name: 'Wireless Mouse',
    price: 899,
    color: 'Black'
}

The program adds the color property, updates the price, and removes the brand property.

This type of property management is useful in shopping websites, employee management systems, and other applications that work with changing data.

Important Things to Remember

  • Use dot notation to add or update properties with known, valid identifier names.
  • Use bracket notation for dynamic property names or names containing spaces.
  • Assigning a value creates a property if it does not exist or updates it if it does.
  • Use delete to remove a property.
  • Use Object.hasOwn() to check whether a property belongs directly to an object.
  • The const keyword prevents reassignment of the object variable, but it does not automatically prevent changes to the object’s properties.

Frequently Asked Questions

How do you add a property to an object in JavaScript?

Assign a value to a new property using dot notation or bracket notation.

const user = {};
user.name = "Rahul";

console.log(user.name);

Output:

Rahul

How do you update an object property?

Assign a new value to the existing property.

const user = { name: "Rahul" };
user.name = "Anjali";

console.log(user.name);

Output:

Anjali

How do you delete an object property?

Use the delete operator.

const user = {
    name: "Rahul",
    age: 21
};

delete user.age;

console.log(user);

Output:

{ name: 'Rahul' }

Does assigning undefined delete a property?

No. Assigning undefined changes the property’s value but leaves the property present.

const user = { name: "Rahul" };

user.name = undefined;

console.log(user.name);
console.log(Object.hasOwn(user, "name"));

Output:

undefined
true

To remove the property itself, use delete user.name.

Can properties be added to an object declared with const?

Yes. const prevents reassignment of the variable, but properties of a regular mutable object can still be added, updated, or deleted.

What happens if you delete a property that does not exist?

For an ordinary object, the delete operator generally returns true when the property is absent. The object remains unchanged.

What to Learn Next

After learning how to add, update, and delete object properties, continue with JavaScript object methods to learn how to define functions inside objects and use the this keyword to access an object’s data.