Understanding Objects in JavaScript

When you first start writing JavaScript, you usually lean heavily on arrays. Arrays are fantastic for lists: a list of active users, a list of temperatures, a sequence of blog posts.

But arrays have a structural limitation. They are fundamentally ordered by numbers. If you store a user's data in an array, it might look like this:

const studentData =["Alice", 22, "Computer Science", "Nagpur"];

If you want to access Alice’s age, you have to remember that it lives at index 1. If you want her course, that’s index 2.

This is brittle. What if we add her middle name at index 1? Suddenly, all the index numbers shift, and every piece of code relying on studentData[1] breaks. Arrays care about where something is. But when we represent complex data, we usually care about what it is.

We need a way to label our data. We need objects.

What is an Object?

At its core, a JavaScript object is a collection of key-value pairs.

Instead of organizing data by a numbered index, an object organizes data by a name (the key). You can think of it like a real-world dictionary: you look up a word (the key) to find its definition (the value).

Let's rewrite our Alice data as an object:

const student = {
  name: "Alice",
  age: 22,
  course: "Computer Science",
  city: "Nagpur"
};

Array vs. Object: The Mental Model

To visualize the difference, think of how the computer routes your request for data:

Array Layout (Index → Value)

• 0 ➔ "Alice"

• 1 ➔ 22

• 2 ➔ "Computer Science"

Object Layout (Key → Value)

• "name" ➔ "Alice"

• "age" ➔ 22

• "course" ➔ "Computer Science"

With an object, the structure documents itself. You don't have to guess what 22 means; the key "age" tells you exactly what it is.

Accessing Data: Dots and Brackets

Creating an object is easy enough, but how do we get the data back out? JavaScript gives us two tools for this: dot notation and bracket notation. Understanding the difference between them is one of the most important early hurdles in JS.

1. Dot Notation (The Default)

Dot notation is the cleanest and most common way to read a property. You type the object name, a dot, and the exact name of the key.

console.log(student.name); // Output: "Alice"
console.log(student.age);  // Output: 22

Use dot notation whenever you know the exact name of the key you want to access while writing your code.

2. Bracket Notation (The Escape Hatch)

Sometimes, dot notation isn't enough. What if your key has a space in it?

const user = {
  "first name": "Bob",
  age: 30
};

// console.log(user.first name); // Syntax Error!
console.log(user["first name"]); // Output: "Bob"

Because "first name" isn't a valid JavaScript identifier (it has a space), the dot notation breaks. Bracket notation allows you to pass the key as a string.

More importantly, bracket notation evaluates variables. This is its superpower. If you are writing a function that needs to look up a dynamic property, you must use brackets.

const propertyToFind = "course";

// Dot notation looks for a literal key named "propertyToFind"
console.log(student.propertyToFind); // undefined

// Bracket notation evaluates the variable to "course", then looks it up
console.log(student[propertyToFind]); // Output: "Computer Science"

The rule of thumb: Default to dot notation for readability. Reach for bracket notation when the key is stored in a variable or is an invalid JavaScript string (like having spaces or starting with a number).

Mutating Objects: Add, Update, and Delete

Objects are mutable. You can change their shape and contents at any time, even if they were declared with const. (The const keyword just means you can't reassign the student variable to a completely new object; it doesn't freeze the object's internal properties).

Updating and Adding Properties

JavaScript doesn't distinguish between updating an existing property and adding a new one. If the key exists, JS overwrites the value. If it doesn't exist, JS creates it.

// Updating an existing property
student.age = 23; 

// Adding a new property
student.graduated = false;

console.log(student.age);       // Output: 23
console.log(student.graduated); // Output: false

Deleting Properties

If you need to completely remove a key-value pair from an object, you use the delete operator.

delete student.city;

console.log(student.city); // Output: undefined

Looping Through Objects

Because objects aren't numbered lists, you can't use a standard for (let i = 0; ...) loop to go through them. Instead, JavaScript provides the for...in loop specifically designed to iterate over object keys.

Here is how you can step through every property in an object and print both the key and the value. Notice how we use bracket notation here, because the key is a dynamic variable!

const laptop = {
  brand: "Apple",
  model: "MacBook Pro",
  ram: "16GB"
};

for (let key in laptop) {
  // 'key' is the variable holding the property name (e.g., "brand")
  // 'laptop[key]' grabs the value (e.g., "Apple")
  
  console.log(`\({key}: \){laptop[key]}`);
}

// Output:
// brand: Apple
// model: MacBook Pro
// ram: 16GB

This pattern is foundational. Whether you are validating a form submitted by a user or formatting a payload to send to a database, you will frequently need to walk through an object's keys just like this.

Putting It Into Practice

Reading about objects only gets you so far. The best way to internalize how key-value pairs work, and especially when to use dot versus bracket notation, is to build and manipulate one yourself.