Understanding Objects in JavaScript

Updating Object Properties

Changing an existing property’s value uses the same dot or bracket notation, on the left side of an assignment:

const student = { name: "Priya", age: 20, course: "Computer Science" };

student.age = 21;
console.log(student.age); // 21

student["course"] = "Data Science";
console.log(student.course); // "Data Science"

Note that student itself was declared with const — that only prevents reassigning student to a completely different object; it doesn't prevent modifying properties within the object, which is exactly what's happening above.

Adding and Deleting Properties

Adding a new property

Simply assign a value to a key that doesn’t exist yet — no special syntax needed:

student.email = "priya@example.com";
console.log(student);
// { name: "Priya", age: 21, course: "Data Science", email: "priya@example.com" }

Deleting a property

The delete operator removes a property entirely:

delete student.email;
console.log(student);
// { name: "Priya", age: 21, course: "Data Science" }

Looping Through Object Keys

Unlike arrays, objects are commonly traversed by their property names. A for...in loop iterates over enumerable string-keyed properties, including inherited enumerable properties.

const student = { name: "Priya", age: 21, course: "Data Science" };

for (const key in student) {
  console.log(`${key}: ${student[key]}`);
}
// name: Priya
// age: 21
// course: Data Science

Notice student[key] uses bracket notation here — key is a variable holding the current key name on each pass through the loop, which is exactly the situation bracket notation is required for.

An alternative: Object.keys()

const keys = Object.keys(student);
console.log(keys); // ["name", "age", "course"]

keys.forEach(key => {
  console.log(`${key}: ${student[key]}`);
});

Object.keys() returns an array containing an object's own enumerable string-keyed property names.
It does not include inherited properties or symbol keys. These keys can then be iterated over using familiar array methods like forEach() — a common alternative to for...in.

Array vs Object: A Clear Comparison

A simple way to decide which one fits: if the data is a collection of similar things (a list of student names), reach for an array. If the data is one thing with multiple distinct properties (one student’s name, age, and course), reach for an object. Real applications very often combine both — an array of objects — like a list of multiple students, each represented as their own object:

const students = [
  { name: "Priya", age: 20 },
  { name: "Aarav", age: 21 },
];

Practice Assignment

1. Create an object representing a student

const student = {
  name: "Meera",
  age: 19,
  course: "Web Development",
};

2. Add another property

Already included above — try adding one more, like grade:

student.grade = "A";

3. Update one property

student.age = 20;
console.log(student.age); // 20

4. Print all keys and values using a loop

for (const key in student) {
  console.log(`${key}: ${student[key]}`);
}
// name: Meera
// age: 20
// course: Web Development
// grade: A

Try adding a new property, deleting one, and re-running the loop to see exactly how the output changes each time — a fast, hands-on way to build real confidence with objects.

Final Takeaway

Objects exist to group related data together as one coherent thing, using clear, named keys instead of scattered, disconnected variables. Dot notation is the everyday way to read and write properties when the key is known upfront; bracket notation steps in when the key is dynamic or contains special characters. Adding a property is as simple as assigning to a new key; delete removes one entirely. And for...in (or Object.keys()) lets you walk through every property without needing to know the key names in advance. Once this clicks, the difference from arrays becomes obvious too: arrays are for ordered collections of similar things; objects are for one thing with several distinct, named properties — and real applications lean on both, constantly, often together.

Frequently Asked Questions

Can an object property hold another object or an array?

> Yes — object values can be any type, including other objects or arrays. This is exactly how more complex, nested data (like a student object containing an array of their enrolled courses) gets represented in JavaScript.

Why does const allow me to modify an object’s properties?

> const only prevents reassigning the variable itself to point to a different value entirely. The object it points to can still be freely modified — its properties added, changed, or deleted — since that doesn't change what const is actually protecting.

When should I use for…in versus Object.keys()?

> Both work for looping through an object’s keys. Object.keys() is often preferred in modern code since it returns a real array, letting you use familiar array methods like .map() or .forEach() directly, rather than being limited to a plain loop.

Is there a risk in using bracket notation instead of dot notation?

> Not inherently — they’re functionally equivalent when the key is a valid identifier. Bracket notation is simply required in specific situations (dynamic keys, keys with special characters); using dot notation as the default for everyday, known keys is just a matter of readability convention.