Accessing & Modifying Object Properties in JavaScript: A Complete Guide

JavaScript objects are everywhere in modern web development. If you’ve ever worked with user information, app configurations, or API calls, you’ve already encountered objects; they’re an essential part of JavaScript development. To work with objects seamlessly, you should know how to access the data they hold and modify it when the situation calls for it.

But why is this important? Understanding these concepts forms the backbone of JavaScript programming. If you can confidently read and update object properties, you can manage data dynamically, build flexible applications, and avoid common bugs.

Before we dive into the practical steps, let’s start by understanding what you’ll learn in this guide.

What You’ll Learn

By the end of this article, you’ll be able to:

• Understand what object properties are in JavaScript
• Access object properties using dot notation and bracket notation
• Modify properties by updating, adding, and deleting them
• Check if a property exists before using it
• Apply best practices when working with objects

Sounds good? Great! Let’s start by understanding what object properties really are, and then we’ll move step by step into accessing and modifying them.

What Are Object Properties in JavaScript?

In JavaScript, an object is a collection of key-value pairs. A property name (or key) is usually a string, and its value can hold any data type: numbers, text, arrays, functions, or other objects.

Here’s an example:

const user = {
name: "Wisdom",
age: 30,
isAdmin: true
};

In this object:

name, age, and isAdmin are property names.
"Wisdom", 30, and true are their values.

Now that you know what properties are, the next question is: How do we access them? Let’s find out.

How to Access Object Properties in JavaScript

Accessing properties means retrieving their values from an object. JavaScript gives us two main ways to do this: dot notation and bracket notation.

Let’s start with the most common one: dot notation.

Dot Notation

Dot notation is simple and widely used. You just type the object name, followed by a dot, and then the property name.

Example:

console.log(user.name);  // Output: Wisdom
console.log(user.age);   // Output: 30

Use dot notation when:

• The property name must be a valid JavaScript identifier, meaning it cannot include spaces or special characters.
• You know the property name beforehand.

But what if the property name comes from a variable or contains spaces? Dot notation won’t work in those cases. That’s where bracket notation comes in.

Bracket Notation

Bracket notation allows you to retrieve properties by passing a string or a variable as the key.

Example:

console.log(user["name"]);  // Output: Wisdom
// Using a variable as the key
const key = "age";
console.log(user[key]);     // Output: 30

Use bracket notation when:

• The property name is not fixed but generated dynamically from a variable.
• The property name has spaces or special characters.

So far, you’ve learned how to read properties. Objects aren’t only meant for reading; you’ll frequently need to update them or add new properties. Let’s see how to do that.

How to Modify Object Properties in JavaScript

Modifying properties includes:

• Updating an existing property.
• Adding a new property.
• Deleting a property.

Let’s go through these one by one.

Updating an Existing Property

If you need to modify a property, give it a different value.

Example:

user.age = 30;
console.log(user.age);  // Output: 30

Bracket notation works too:

user["isAdmin"] = false;
console.log(user.isAdmin);  // Output: false

Now, what if the property doesn’t exist yet? That leads us to adding new properties.

Adding a New Property

Adding a property is just like updating—if it’s not already there, JavaScript will create it.

Example:

user.country = "Nigeria";
console.log(user.country);  // Output: Nigeria

Great! But sometimes, you also need to remove a property. Let’s see how.

Deleting a Property

To delete a property from an object, use the delete operator.

Example:

delete user.isAdmin;
console.log(user);
// Output: { name: 'Wisdom', age: 30, country: 'Nigeria' }

Now you know how to read, update, add, and delete properties. Before making any changes, it’s best to check if the property already exists. Let’s see how to do that.

How to Check if a Property Exists

JavaScript provides two common ways:

console.log("name" in user);            // true
console.log(user.hasOwnProperty("age")); // true

This is helpful when dealing with optional properties, like when fetching data from APIs.

Now, let’s explore a few best practices for handling object properties effectively.

Best Practices for Working with Objects

• Stick to dot notation if the property name is simple and already known.
• Use bracket notation for dynamic keys or when property names have spaces.
• Avoid frequent addition or removal of properties for performance reasons.
• Use Object.freeze() or Object.seal() when you want to make objects immutable.

Conclusion

Objects are one of the most powerful features in JavaScript, and understanding how to access and modify their properties is essential for any developer. You’ve learned how to:

• Access properties using dot and bracket notation.
• Update existing properties.
• Add new ones.
• Delete unwanted properties.
• Check if a property exists.

Master these basics, and you’ll be ready to work with complex data structures in real-world applications.

You can reach out to me via LinkedIn