Web Dev Day 17: Object-Oriented JS (The Blueprint)

📅 Date: April 24, 2026

🧠 Mood: The Engineer ⚙️

🔥 Topic: Web Dev Day 17: Object-Oriented JS (The Blueprint)

📐 Returning to Familiar Ground

Up to this point, I have been writing JavaScript in a very "procedural" way. Create a variable here, write a function there, attach an event listener. It works fine for small scripts like a Dark Mode toggle or a simple Crypto API fetch. But what happens when you are building a system with 1,000 users?

You cannot write 1,000 separate variables. You need a system. Having spent a significant amount of time grinding through data structures and algorithms in C++, the concept of structuring data is hardwired into my brain. Today, I finally brought that engineering mindset into the browser by diving into Object-Oriented Programming (OOP) in JavaScript. It is time to stop hardcoding data and start building blueprints.

---

🏭 Classes and the 'this' Keyword

Modern JavaScript (ES6) introduced the class syntax. It acts exactly like a factory template. Instead of creating a user from scratch every time, you define the "shape" of a user once, and then stamp out as many copies (objects) as you need.

1. The Constructor Method

Whenever you create a new object from your blueprint, a special function called the constructor() runs automatically. This is where you pass in the initial data—like the user's name or email—to set up that specific instance.

2. The Infamous 'this' Keyword

In JS, this points to the specific object that is currently executing the code. If I have two users, Sahil and Munmun, this.name will correctly point to "Sahil" when my object calls it, and "Munmun" when her object calls it, even though they share the exact same blueprint.

---

💻 Practical: Building the User Factory

Here is a clean implementation of a User class that encapsulates its own data and behavior (methods).

// 1. Define the Blueprint (Class)
class User {
    // The setup function
    constructor(username, role) {
        this.username = username;
        this.role = role;
        this.isOnline = false;
    }

    // A method (behavior) shared by all users
    login() {
        this.isOnline = true;
        console.log(`${this.username} has logged into the system.`);
    }

    // Checking status
    getStatus() {
        return `${this.username} is currently ${this.isOnline ? 'Online 🟢' : 'Offline 🔴'}`;
    }
}

// 2. Instantiate Objects using the 'new' keyword
const adminUser = new User("Sahil", "Admin");
const guestUser = new User("Munmun", "Guest");

// 3. Testing the logic
console.log(adminUser.getStatus()); // Sahil is currently Offline 🔴
adminUser.login();                  // Sahil has logged into the system.
console.log(adminUser.getStatus()); // Sahil is currently Online 🟢

// Notice how guestUser is unaffected by adminUser's actions
console.log(guestUser.getStatus()); // Munmun is currently Offline 🔴

The beauty of this is scalability. I can generate 10,000 users using a loop and that same User class, and my code remains incredibly clean and modular.

---

🎯 What's Next?

Classes in JavaScript are actually just "syntactic sugar" over something called Prototypal Inheritance. Tomorrow, I will dive deep into Prototypes to understand how JavaScript shares methods under the hood without wasting memory. The core JS deep dive continues!