Object-Oriented Programming (OOP) in JavaScript Explained for Beginners
Understanding Object-Oriented Programming (OOP) in JavaScript
When programs become larger, managing variables and functions separately can become messy. Object-Oriented Programming (OOP) helps us organize code in a structured and reusable way.
In JavaScript, OOP allows us to create objects that contain both data (properties) and behavior (methods).
This makes code easier to maintain, reuse, and understand.
What is Object-Oriented Programming?
Object-Oriented Programming is a programming style where we structure code using objects.
An object typically contains:
Properties → data about the object
Methods → actions the object can perform
For example:
let person = {
name: "Rahul",
age: 22,
greet() {
console.log("Hello!");
}
};
Here:
nameandageare propertiesgreet()is a method
OOP helps group related data and functionality together.
Real-World Analogy: Blueprint → Objects
Think about how cars are made.
A blueprint defines how a car should look and behave:
brand
color
engine type
speed
But the blueprint itself is not an actual car.
Using that blueprint, factories can create many cars.
Blueprint → Car Design
Objects created from blueprint:
Car 1 → Red Toyota
Car 2 → Blue Honda
Car 3 → Black BMW
In programming terms:
Class → Blueprint
Object → Actual item created from the blueprint
What is a Class in JavaScript?
A class is a template used to create objects.
It defines the structure and behavior that objects will have.
Example:
class Person {
}
Right now the class is empty.
Next, we add properties and methods.
The Constructor Method
The constructor is a special method that runs automatically when a new object is created.
It is used to initialize properties.
Example:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
Explanation:
constructor()runs when a new object is createdthisrefers to the current objectwe assign values to object properties
Creating Objects from a Class
Objects are created using the new keyword.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
let person1 = new Person("Rahul", 22);
let person2 = new Person("Anita", 25);
Now we have two objects:
person1 → { name: "Rahul", age: 22 }
person2 → { name: "Anita", age: 25 }
Both objects were created using the same class.
Methods Inside a Class
Classes can also contain methods, which define behavior.
Example:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
introduce() {
console.log("Hi, my name is " + this.name);
}
}
Using the method:
let person1 = new Person("Rahul", 22);
person1.introduce();
Output:
Hi, my name is Rahul
Methods allow objects to perform actions.
Basic Idea of Encapsulation
Encapsulation means combining data and behavior in a single structure.
Instead of storing data and functions separately, they are grouped together inside a class.
Example:
class Car {
constructor(brand, speed) {
this.brand = brand;
this.speed = speed;
}
accelerate() {
this.speed += 10;
console.log(this.brand + " speed is now " + this.speed);
}
}
Here:
brandandspeed→ dataaccelerate()→ behavior
Everything related to the Car is contained inside one structure.
This keeps code organized and easier to maintain.
Why OOP is Useful
Object-Oriented Programming helps in several ways.
Code Reusability
We can create many objects from the same class.
Better Organization
Related data and behavior stay together.
Easier Maintenance
When projects grow, structured code is easier to manage.
Assignment
Create a Student class with the following requirements.
Properties
name
age
Method
printDetails()
Expected output example:
Name: Rahul
Age: 20
Create multiple student objects and call the method.
Example Solution
class Student {
constructor(name, age) {
this.name = name;
this.age = age;
}
printDetails() {
console.log("Name:", this.name);
console.log("Age:", this.age);
}
}
let student1 = new Student("Rahul", 20);
let student2 = new Student("Anita", 21);
student1.printDetails();
student2.printDetails();
Simple Diagram
Class (Blueprint)
Student
-----------------
name
age
printDetails()
↓
Objects (Instances)
student1 → { name: "Rahul", age: 20 }
student2 → { name: "Anita", age: 21 }
