Understanding Object-Oriented Programming in JavaScript
The Big Idea: Blueprints and Buildings
Imagine you want to build a house. You don't just start laying bricks randomly. You need a blueprint.
The Blueprint is the plan. It says every house must have a door, two windows, and a roof. But the blueprint itself is not a house—you can't live in it.
The House is the actual object. It is built using the blueprint. You can build ten houses from one single blueprint. Some might be blue, some might be white, but they all follow the same structure.
In JavaScript, the blueprint is called a Class, and the house is the Object (or Instance).
Level 1: Defining a Class
To create our blueprint in JavaScript, we use the class keyword. Inside this class, we use a special function called a constructor. This is the "setup" phase that runs the moment you create a new object.
The Constructor Method
Think of the constructor as the person who takes your specific requirements (like "I want a red car") and applies them to the blueprint.
JavaScript
class Car {
constructor(brand, color, topSpeed) {
this.brand = brand;
this.color = color;
this.topSpeed = topSpeed;
}
}
Level 2: Mass Production (Instantiating Objects)
Now that we have the Car blueprint, we can create as many cars as we want using the new keyword. Each car will have its own unique properties, but they all share the same "DNA."
JavaScript
const myDailyDriver = new Car("Tata", "White", 160);
const myDreamCar = new Car("Porsche", "Guards Red", 310);
console.log(myDailyDriver.brand); // Tata
console.log(myDreamCar.brand); // Porsche
Level 3: Adding Capabilities (Methods)
A car isn't just a list of stats; it also does things. In a class, we add functions to define what our objects can do. These are called Methods.
JavaScript
class Car {
constructor(brand, color) {
this.brand = brand;
this.color = color;
this.isRunning = false;
}
startEngine() {
this.isRunning = true;
return "The " + this.brand + " engine is now roaring!";
}
}
const myCar = new Car("Mahindra", "Black");
console.log(myCar.startEngine()); // The Mahindra engine is now roaring!
Level 4: Keeping Data Safe (Encapsulation)
Encapsulation is a fancy word for a simple concept: Privacy.
Imagine your car has an engine. You can turn the key to start it, but you shouldn't be able to reach inside the engine and manually move the pistons while driving. Encapsulation means we hide the complex internal workings and only show the user the "buttons" they need to interact with.
In JavaScript, we do this by keeping data inside the class and only allowing it to be changed through specific methods. This prevents accidental bugs and keeps our code organized.
Final Quest: The Student Management System
For this assignment, we need to create a system that can handle multiple students in our cohort. Instead of writing separate objects for every person, we use a class.
Assignment Implementation
JavaScript
class Student {
constructor(name, age, course) {
this.name = name;
this.age = age;
this.course = course;
}
// Method to display details
showDetails() {
console.log("Student Name: " + this.name);
console.log("Age: " + this.age);
console.log("Enrolled in: " + this.course);
console.log("---------------------------");
}
}
// Creating multiple student objects (Instantiating)
const student1 = new Student("Prakash Jha", 24, "Web Dev Cohort 2026");
const student2 = new Student("Anjali Sharma", 22, "Web Dev Cohort 2026");
// Calling the method
student1.showDetails();
student2.showDetails();
By using this class, if we ever want to add a new property (like "grade"), we only have to change it in one place (the blueprint), and every student object will instantly have that new capability. That is the power of OOP.
What is next on the dashboard?
We have cleared the heavy hitters. You have Variables and Data Types, Control Flow, and JavaScript Operators left. Which one should we finish next to get you closer to 100% completion?