Accessing and Modifying JavaScript Objects

JavaScript objects are one of the most fundamental data structures you will use as a developer. Once you know how to create an object, the next step is understanding how to read data from it and change it over time. This post covers both of those skills with practical examples you can run right now in your browser console.

A Quick Object Refresher

An object in JavaScript is a collection of key-value pairs. The keys are called properties, and the values can be strings, numbers, booleans, arrays, functions, or even other objects. Here is a simple example to work with throughout this post:

const router = {
  hostname: "R1",
  vendor: "Cisco",
  interfaces: 4,
  isOnline: true
};

Accessing Object Properties

There are two ways to read a property from an object: dot notation and bracket notation. Both accomplish the same goal, but each has its place.

Dot Notation

Dot notation is the most common and readable approach. You write the object name, a dot, and then the property name:

console.log(router.hostname);    // "R1"
console.log(router.interfaces);  // 4

Bracket Notation

Bracket notation uses a string inside square brackets. This is especially useful when the property name is stored in a variable, or when the property name contains spaces or special characters:

const key = "vendor";
console.log(router[key]);         // "Cisco"
console.log(router["isOnline"]);  // true

A good rule of thumb: use dot notation by default, and switch to bracket notation when the property name is dynamic or contains characters that would break dot syntax.

Modifying Object Properties

Objects in JavaScript are mutable by default. You can change any property value using the same dot or bracket notation, just combined with an assignment:

router.hostname = "Core-R1";
router["interfaces"] = 8;

console.log(router.hostname);    // "Core-R1"
console.log(router.interfaces);  // 8

Notice that even though router was declared with const, the properties can still be changed. The const keyword prevents you from reassigning the variable itself to a new object, but it does not freeze the contents of the object.

Adding New Properties

You can add properties to an object at any time, even after it was originally created. Simply assign a value to a property that does not yet exist:

router.location = "DataCenter-A";
router["managementIP"] = "192.168.1.1";

console.log(router.location);      // "DataCenter-A"
console.log(router.managementIP);  // "192.168.1.1"

Deleting Properties

If you need to remove a property entirely, use the delete operator:

delete router.isOnline;

console.log(router.isOnline);  // undefined

After deletion, accessing that property returns undefined rather than throwing an error. This is useful to know when you are checking whether a property exists before using it.

Checking if a Property Exists

There are two clean ways to check whether a property exists on an object before you try to use it:

• The in operator: returns true if the property exists on the object or its prototype chain.
• The hasOwnProperty() method: returns true only if the property belongs directly to the object, not inherited.

console.log("hostname" in router);              // true
console.log(router.hasOwnProperty("hostname")); // true
console.log("isOnline" in router);              // false (we deleted it)

Getting into the habit of checking for property existence before accessing it will save you from many undefined errors as your code grows more complex.

What's Next

Now that you can read, write, add, and delete properties on an object, the next natural step is learning how to loop through an object's properties. In the next post, we will cover for...in loops and Object.keys(), Object.values(), and Object.entries() so you can iterate over object data dynamically. These tools unlock a lot of power when you start working with real-world data structures.