Understanding JavaScript Objects: Properties, Access, and Loops

Arrays are great for lists. But what if you need to describe something — with multiple details about it? That's where objects come in. They're one of the most important building blocks in JavaScript, and once you understand them, everything clicks.

🤔 What Is an Object and Why Do We Need It?

Imagine you want to store information about a person — their name, age, and city. You could use separate variables:

let name = "Priya";
let age  = 22;
let city = "Mumbai";

This works for one person. But what if you have 50 people? You'd have 150 variables with no connection between them. That's chaos.

An object lets you group all related data under one roof:

const person = {
  name: "Priya",
  age:  22,
  city: "Mumbai"
};

Now everything about Priya lives in one place. That's the power of objects.

🗂️ Objects Are Key-Value Pairs

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

Key     →  Value
───────────────────
name    →  "Priya"
age     →  22
city    →  "Mumbai"

The key is like a label (always a string)
The value is the data attached to that label (can be any type — string, number, boolean, array, even another object)

Think of it like a real-world identity card:

┌─────────────────────────────┐
│        IDENTITY CARD        │
├─────────────┬───────────────┤
│ name        │  Priya        │
│ age         │  22           │
│ city        │  Mumbai       │
└─────────────┴───────────────┘

Each row on the card is a key-value pair. Together, they describe one complete thing.

📦 Arrays vs Objects — What's the Difference?

People often confuse arrays and objects. Here's the key distinction:

Feature	Array	Object
Structure	Ordered list of values	Key-value pairs
Access by	Index number (0, 1, 2...)	Key name ("name", "age"...)
Best for	Multiple items of the same type	Describing one thing with details
Example	List of student names	Details of one student

// Array — a list of things
const fruits = ["apple", "mango", "banana"];
console.log(fruits[0]); // "apple"

// Object — details about one thing
const student = {
  name: "Arjun",
  age:  20,
  course: "Computer Science"
};
console.log(student.name); // "Arjun"

Use an array when you have multiple items of the same kind. Use an object when you're describing one item with different properties.

🛠️ Creating an Object

There are two common ways to create objects. The most popular is the object literal syntax — using curly braces {}:

const person = {
  name: "Rahul",
  age:  28,
  city: "Delhi"
};

You can also use new Object(), but object literals are cleaner and preferred:

// Less common — but valid
const person = new Object();
person.name = "Rahul";
person.age  = 28;

Stick with the literal {} syntax — it's shorter and more readable.

🔍 Accessing Properties

Once you have an object, you'll want to read its values. JavaScript gives you two ways to do this.

1. Dot Notation

The most common and readable way:

const person = {
  name: "Priya",
  age:  22,
  city: "Mumbai"
};

console.log(person.name); // "Priya"
console.log(person.age);  // 22
console.log(person.city); // "Mumbai"

2. Bracket Notation

Uses a string key inside square brackets:

console.log(person["name"]); // "Priya"
console.log(person["city"]); // "Mumbai"

When should you use bracket notation?

When the key is stored in a variable, or when the key has spaces or special characters:

const key = "age";
console.log(person[key]); // 22  ✅ — works with a variable

const profile = {
  "full name": "Priya Sharma",  // key with a space
  "home-city": "Mumbai"         // key with a hyphen
};

console.log(profile["full name"]);  // "Priya Sharma" ✅
console.log(profile.full name);     // ❌ SyntaxError — dot notation breaks here

💡 Rule of thumb: Use dot notation by default. Switch to bracket notation when you have a variable key or a key with special characters.

✏️ Updating Object Properties

You can change the value of any existing property using either notation:

const person = {
  name: "Rahul",
  age:  28,
  city: "Delhi"
};

// Update using dot notation
person.age  = 29;
person.city = "Bangalore";

console.log(person.age);  // 29
console.log(person.city); // "Bangalore"

Objects created with const can still have their properties updated — const only prevents reassigning the variable itself, not changing what's inside it.

// This is NOT allowed (reassigning the variable)
person = { name: "Someone else" }; // ❌ TypeError

// This IS allowed (updating a property)
person.name = "Rohit"; // ✅ Works fine

➕ Adding New Properties

You can add a property that didn't exist before — just assign it:

const person = {
  name: "Priya",
  age:  22
};

// Add new properties
person.city    = "Mumbai";
person.isStudent = true;

console.log(person);
// { name: "Priya", age: 22, city: "Mumbai", isStudent: true }

❌ Deleting Properties

Use the delete operator to remove a property:

const person = {
  name: "Priya",
  age:  22,
  city: "Mumbai"
};

delete person.city;

console.log(person);
// { name: "Priya", age: 22 }

console.log(person.city); // undefined

Once deleted, accessing that key returns undefined.

🔁 Looping Through an Object

What if you want to go through all the keys and values in an object? Use a for...in loop:

const person = {
  name: "Priya",
  age:  22,
  city: "Mumbai"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

// Output:
// name: Priya
// age: 22
// city: Mumbai

At each step of the loop, key holds the property name (like "name", "age"), and person[key] gives you its value.

You can also use Object.keys(), Object.values(), and Object.entries() for more control:

const person = { name: "Priya", age: 22, city: "Mumbai" };

// Get all keys
console.log(Object.keys(person));
// ["name", "age", "city"]

// Get all values
console.log(Object.values(person));
// ["Priya", 22, "Mumbai"]

// Get key-value pairs as arrays
console.log(Object.entries(person));
// [["name", "Priya"], ["age", 22], ["city", "Mumbai"]]

🎯 Putting It All Together — A Complete Example

const car = {
  brand: "Toyota",
  model: "Camry",
  year:  2020,
  color: "Silver"
};

// Access
console.log(car.brand);       // "Toyota"
console.log(car["model"]);    // "Camry"

// Update
car.color = "Black";

// Add new property
car.mileage = 45000;

// Delete a property
delete car.year;

// Loop through all properties
for (let key in car) {
  console.log(`\({key}: \){car[key]}`);
}

// Output:
// brand: Toyota
// model: Camry
// color: Black
// mileage: 45000

🗺️ Object Structure — Visual Overview

const student = {
  ┌──────────┬────────────────────┐
  │  KEY     │  VALUE             │
  ├──────────┼────────────────────┤
  │  name    │  "Meera"           │
  │  age     │  21                │
  │  course  │  "Web Development" │
  │  active  │  true              │
  └──────────┴────────────────────┘
}

Access:   student.name      → "Meera"
          student["course"] → "Web Development"

Update:   student.age = 22

Add:      student.city = "Pune"

Delete:   delete student.active

Loop:     for (let key in student) { ... }

🎯 Key Takeaways

An object is a collection of key-value pairs — perfect for describing one thing with multiple properties
Create objects using {} (object literal syntax)
Access properties with dot notation (obj.key) or bracket notation (obj["key"])
Use bracket notation when the key is stored in a variable or contains special characters
Add properties by simply assigning a new key; delete them with the delete operator
Loop through objects with for...in or use Object.keys(), Object.values(), Object.entries()

Command Palette