Understanding Objects in JavaScript

You already know how to store a single value in a variable:

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

But what if all three of these belong to the same thing — the same person? Storing them as separate, unconnected variables makes your code messy and hard to manage.

This is exactly what objects solve.

1. What Is an Object?

An object is a collection of related data stored as key-value pairs.

Think of it like a real-world ID card. Your ID card does not store one thing — it stores your name, your age, your city, your photo, all together, all labelled clearly.

┌─────────────────────────┐
│  ID Card                │
│  name  → "Alice"        │
│  age   → 22             │
│  city  → "Mumbai"       │
└─────────────────────────┘

In JavaScript, that ID card looks like this:

let person = {
    name: "Alice",
    age:  22,
    city: "Mumbai"
};

Each line is a key-value pair:

• The key is the label (name, age, city)

• The value is the data ("Alice", 22, "Mumbai")

• Each pair is separated by a comma

• The whole thing is wrapped in curly braces { }

💡 Objects let you group related data together under one variable name — keeping your code organised and meaningful.

---

2. Creating an Object

Use curly braces { } and write your key-value pairs inside, separated by commas.

let person = {
    name:  "Alice",
    age:   22,
    city:  "Mumbai",
    isStudent: true
};

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

You can store any data type as a value — strings, numbers, booleans, arrays, even other objects:

let student = {
    name:    "Bob",
    age:     20,
    marks:   [88, 92, 76],       // array as a value
    address: {                    // object inside an object
        city:    "Delhi",
        pincode: "110001"
    }
};

💡 Try it: Open your browser console (F12), create a person object, then type the variable name and press Enter. You will see all the key-value pairs printed out!

---

3. Accessing Properties

There are two ways to read a value from an object.

Dot Notation — The Most Common Way

Write the object name, a dot, then the key name:

let person = {
    name: "Alice",
    age:  22,
    city: "Mumbai"
};

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

Bracket Notation — For Dynamic Access

Write the object name, then the key as a string inside square brackets:

console.log(person["name"]); // Alice
console.log(person["age"]);  // 22

Bracket notation becomes essential when the key is stored in a variable:

let key = "city";
console.log(person[key]); // Mumbai — reads whatever key holds

Accessing a Key That Does Not Exist

console.log(person.email); // undefined — no error, just undefined

💡 When to use which? Use dot notation by default — it is cleaner. Use bracket notation when you have a key stored in a variable, or when the key has spaces or special characters.

---

4. Updating Properties

Access the property and assign a new value — just like updating a variable.

let person = {
    name: "Alice",
    age:  22,
    city: "Mumbai"
};

// Before
console.log(person.age); // 22

// Update
person.age = 23;

// After
console.log(person.age); // 23

You can update using either dot or bracket notation:

person["city"] = "Pune";
console.log(person.city); // Pune

💡 Updating a property does not affect any other properties in the object — only the one you target.

---

5. Adding and Deleting Properties

Adding a New Property

Simply assign a value to a key that does not exist yet:

let person = {
    name: "Alice",
    age:  22
};

// Add new properties
person.email   = "alice@example.com";
person.country = "India";

console.log(person);
// { name: 'Alice', age: 22, email: 'alice@example.com', country: 'India' }

Deleting a Property

Use the delete keyword:

let person = {
    name:  "Alice",
    age:   22,
    city:  "Mumbai",
    email: "alice@example.com"
};

delete person.email;

console.log(person);
// { name: 'Alice', age: 22, city: 'Mumbai' }

💡 delete permanently removes the key-value pair from the object. Accessing the deleted key afterwards returns undefined.

---

6. Looping Through Object Keys

To go through every key in an object, use a for...in loop.

let person = {
    name: "Alice",
    age:  22,
    city: "Mumbai"
};

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

// name: Alice
// age: 22
// city: Mumbai

key takes the value of each property name one by one, and person[key] gives the corresponding value (bracket notation is required here since key is a variable).

Printing Keys and Values Separately

// Get all keys as an array
console.log(Object.keys(person));
// ['name', 'age', 'city']

// Get all values as an array
console.log(Object.values(person));
// ['Alice', 22, 'Mumbai']

💡 Object.keys() and Object.values() are incredibly useful when you need to inspect or iterate over an object's contents.

---

Arrays vs Objects

A common question for beginners is: when should I use an array, and when should I use an object?

	Array	Object
Structure	Ordered list of values	Named key-value pairs
Access	By index number ([0], [1])	By key name (.name, ["age"])
Best for	A list of similar items	A single entity with properties
Example	["Alice", "Bob", "Charlie"]	{ name: "Alice", age: 22 }

// Use an array — list of similar items
let fruits = ["Apple", "Banana", "Mango"];

// Use an object — one entity with multiple properties
let person = {
    name: "Alice",
    age:  22,
    city: "Mumbai"
};

💡 Simple rule: If your data is a list of things → use an array. If your data describes one thing with multiple labelled properties → use an object.

---

Practice Assignment

Work through all four tasks in your browser console or a code editor.

Task 1 — Create a student object

let student = {
    name:   "Rahul",
    age:    20,
    course: "Computer Science"
};

console.log(student);
// { name: 'Rahul', age: 20, course: 'Computer Science' }

Task 2 — Add more properties

student.grade    = "A";
student.isActive = true;

console.log(student);
// { name: 'Rahul', age: 20, course: 'Computer Science', grade: 'A', isActive: true }

Task 3 — Update one property

student.age = 21;
console.log("Updated age:", student.age); // Updated age: 21

Task 4 — Print all keys and values using a loop

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

// name      → Rahul
// age       → 21
// course    → Computer Science
// grade     → A
// isActive  → true

🎯 Bonus challenge: Use delete to remove the grade property, then loop through the object again. Observe what changes.

---

Quick Reference

// ── CREATE ───────────────────────────────────
let person = {
    name: "Alice",
    age:  22,
    city: "Mumbai"
};

// ── ACCESS ───────────────────────────────────
person.name        // "Alice"   — dot notation
person["age"]      // 22        — bracket notation
let k = "city";
person[k]          // "Mumbai"  — dynamic key

// ── UPDATE ───────────────────────────────────
person.age  = 23;
person["city"] = "Pune";

// ── ADD ──────────────────────────────────────
person.email = "alice@example.com";

// ── DELETE ───────────────────────────────────
delete person.email;

// ── LOOP ─────────────────────────────────────
for (let key in person) {
    console.log(key, "→", person[key]);
}

// ── KEYS & VALUES ────────────────────────────
Object.keys(person);    // ['name', 'age', 'city']
Object.values(person);  // ['Alice', 23, 'Pune']

---

Wrapping Up

Objects are one of the most powerful and frequently used features in JavaScript. Here is everything you have learned:

• An object stores related data as key-value pairs, wrapped in { }

• Access properties with dot notation (person.name) or bracket notation (person["name"])

• Update, add, and delete properties directly by targeting their key

• Loop through all properties with for...in, or use Object.keys() / Object.values()

• Use an array for lists; use an object when describing a single entity

Once you are comfortable with objects, you will be ready for object methods, this, and eventually classes — all of which build directly on top of what you have just learned.