JavaScript Objects: Your Code's "Labeled Storage Unit"

Imagine you’re building a student profile. If you use separate variables like studentName, studentAge, and studentCourse, you’re just carrying around a handful of loose papers. If you have 50 students, you’ll be buried in paperwork.

In the real world, we use a Student File or a Folder to keep all that info together. In JavaScript, that folder is an Object.

1. What is an Object?

An object is a collection of properties. Think of it as a dictionary where you have a word (the key) and its definition (the value).

Structure:

{
    key: value;
}

Why do we need objects?

• Logical grouping – Keeps related data (like a student’s name and marks) in one place.
• Readability – student.age is clearer than random variables like age1.

2. Creating an Object

The most common way to create an object is using an Object Literal with curly braces {}.

// Creating a student "folder"
const student = {
    name: "Veer",
    age: 20,
    course: "Web Development",
    isGraduated: false,
};

3. Accessing Properties: Two Ways

Once you’ve stored your data, how do you access it?

Dot Notation (.)

This is the most common and readable approach.

console.log(student.name); // "Veer"

Bracket Notation ([])

This is like looking up a word in a dictionary using a string. It’s useful if your key name is stored in a variable.

const query = "course";
console.log(student[query]); // "Web Development"

4. Updating, Adding, and Deleting Properties

Objects in JavaScript are dynamic, meaning you can modify them even after creation.

You can update, add, or delete properties using dot notation or bracket notation.

Updating a Property

Dot Notation

student.age = 21; // Veer had a birthday

Bracket Notation

student["age"] = 21;

Both update the value of age.

Adding a New Property

Dot Notation

student.city = "Delhi";

Bracket Notation

student["city"] = "Delhi";

This creates a new property called city.

Deleting a Property

Dot Notation

delete student.isGraduated;

Bracket Notation

delete student["isGraduated"];

This removes the property completely.

When Should You Use Bracket Notation?

Bracket notation is useful when the property name is dynamic.

const key = "course";

console.log(student[key]); // "Web Development"

Dot notation cannot use variables, but bracket notation can.

Tip:

• Use dot notation most of the time because it is cleaner.
• Use bracket notation when the key is dynamic.

5. Looping Through an Object

Objects are not accessed by numeric indexes like arrays, so we use the for...in loop.

for (let key in student) {
    console.log(`${key}: ${student[key]}`);
}

• key → property name
• student[key] → property value

Example output:

name: Veer
age: 20
course: Web Development

6. Objects vs Arrays: Quick Comparison

Summary Challenge: The Student Profile

Try this in your console:

1. Create a car object with brand, model, and year.
2. Add a method using an arrow function.
3. Add a color property after creation.
4. Delete the year property.
5. Loop through the object and print the final profile.

Example starter:

const car = {
    brand: "Toyota",
    model: "Fortuner",
    year: 2022,
    start: () => console.log("Engine started!"),
};

By mastering objects, you move from writing simple scripts to managing real‑world data structures in JavaScript.