Understanding Object-Oriented Programming (OOP) in JavaScript
When programs become bigger, we need a better way to organize code.
That is where Object-Oriented Programming (OOP) helps.
OOP is a programming style where we create objects that contain data and actions together.
Let’s understand it in a very simple way.
1. What is Object-Oriented Programming?
Object-Oriented Programming means organizing code using objects.
An object contains:
Properties → data
Methods → actions
Example: A car
A car has:
Properties
- color
- brand
- speed
Methods
- start()
- stop()
- accelerate()
So an object combines data + behavior.
2. Real-World Analogy: Blueprint → Objects
Imagine you want to build cars.
First, engineers create a blueprint.
Car Blueprint
- color
- brand
- speed
Using this blueprint, we can create many cars.
Example:
Car 1 → Red BMW
Car 2 → Blue Audi
Car 3 → Black Tesla
In programming:
Blueprint → Class
Real Car → Object
So:
Class = blueprint
Object = real thing created from blueprint
3. What is a Class in JavaScript?
A class is a template used to create objects.
Example:
class Car {
}
This class is like a design plan.
We will use it to create many cars.
4. Creating Objects Using Classes
We use the new keyword to create objects.
Example:
class Car {
constructor(brand) {
this.brand = brand;
}
}
let car1 = new Car("BMW");
let car2 = new Car("Audi");
console.log(car1.brand);
console.log(car2.brand);
Output:
BMW
Audi
Here:
Car→ classcar1,car2→ objects
5. The Constructor Method
The constructor runs automatically when an object is created.
It helps us initialize properties.
Example:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
Now we can create objects.
let p1 = new Person("Rahul", 25);
let p2 = new Person("Anita", 22);
Each object gets its own values.
6. Methods Inside a Class
Methods are functions inside a class.
They describe what the object can do.
Example:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log("Hello, my name is " + this.name);
}
}
Create object:
let person1 = new Person("Rahul", 25);
person1.greet();
Output:
Hello, my name is Rahul
Here:
greet()is a method.
7. Basic Idea of Encapsulation
Encapsulation means keeping related data and functions together.
Example:
class BankAccount {
constructor(balance) {
this.balance = balance;
}
deposit(amount) {
this.balance += amount;
}
}
Here the object stores:
data → balance
action → deposit()
Both are inside the same class.
This makes code clean and organized.
Simple Visualization
Blueprint → Object
Class: Car
│
├─ brand
├─ color
└─ start()
Objects created:
car1 → BMW
car2 → Audi
car3 → Tesla
One blueprint → many objects.
Why OOP is Useful
Object-Oriented Programming helps developers:
✔ organize code
✔ reuse code
✔ build large applications
✔ keep data and functions together
Modern frameworks like React, Node.js apps, and backend systems often use OOP concepts.
Assignment Practice
Try this in your browser console.
1. Create a Student Class
class Student {
constructor(name, age) {
this.name = name;
this.age = age;
}
printDetails() {
console.log("Name: " + this.name);
console.log("Age: " + this.age);
}
}
2. Create Multiple Student Objects
let student1 = new Student("Ravi", 20);
let student2 = new Student("Anjali", 21);
3. Call the Method
student1.printDetails();
student2.printDetails();
Output:
Name: Ravi
Age: 20
Name: Anjali
Age: 21
Each object has its own data, but they share the same class structure.
Class → Instance Relationship
Class (Blueprint)
↓
Student Class
↓
Objects (Instances)
student1
student2
student3
One class can create many objects.