Object-Oriented Programming (OOP) sounds scary at first, but the core ideas are actually very intuitive—especially if you think in terms of real-world things like cars, students, or users in an app.
In this article, we’ll walk through OOP in JavaScript step by step, using simple examples and analogies:
What OOP means
Blueprint → object analogy
What a class is in JavaScript
Creating objects using classes
The constructor method
Methods inside a class
Basic idea of encapsulation
A small assignment: build a Student class
What Is Object-Oriented Programming (OOP)?
Object-Oriented Programming (OOP) is a way of organizing code around objects instead of just functions and data.
An object is a bundle of:
Data (called properties), and
Behavior (called methods, which are functions attached to the object).
OOP focuses on:
Modeling real-world entities (like Car, Person, Student) in code.
Keeping related data and behavior together.
Reusing code through classes and instances.
Real-World Analogy: Blueprint → Objects
Think of a car factory:
In OOP terms:
So:
What Is a Class in JavaScript?
A class in JavaScript is a template for creating objects with the same structure and behavior.
Inside a class, you typically define:
The constructor (how objects are initialized)
Properties (data each object will have)
Methods (functions each object can use)
Basic class example: Car
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
start() {
console.log(`\({this.brand} \){this.model} is starting...`);
}
stop() {
console.log(`\({this.brand} \){this.model} is stopping.`);
}
}
Here:
Car is the class (blueprint).
brand and model These are the properties each car will have.
start and stop are methods (behaviors).
Creating Objects Using Classes (Instantiating)
To create an object from a class, you use the new keyword.
const car1 = new Car("Toyota", "Corolla");
const car2 = new Car("Tesla", "Model 3");
car1.start(); // "Toyota Corolla is starting..."
car2.start(); // "Tesla Model 3 is starting..."
car1 and car2 are different objects (instances) of the Car class.
They share the same structure and behavior, but can hold different data.
This is where reusability shines:
The Constructor Method
The constructor is a special method inside a class that runs when you create a new object.
class ClassName {
constructor(parameter1, parameter2) {
// initialization code
}
}
Example: Person class
class Person {
constructor(name, age, city) {
this.name = name;
this.age = age;
this.city = city;
}
introduce() {
console.log(`Hi, I'm \({this.name}, \){this.age} years old from ${this.city}.`);
}
}
const person1 = new Person("Alice", 25, "Delhi");
const person2 = new Person("Rahul", 30, "Mumbai");
person1.introduce(); // "Hi, I'm Alice, 25 years old from Delhi."
person2.introduce(); // "Hi, I'm Rahul, 30 years old from Mumbai."
Methods Inside a Class
Methods are functions that belong to the class and operate on that object’s data.
Example: Student with methods
class Student {
constructor(name, age, course) {
this.name = name;
this.age = age;
this.course = course;
}
printDetails() {
console.log(`Student: \({this.name}, Age: \){this.age}, Course: ${this.course}`);
}
celebrateBirthday() {
this.age += 1;
console.log(`Happy birthday, \({this.name}! You are now \){this.age}.`);
}
}
const student1 = new Student("Neha", 19, "Computer Science");
student1.printDetails(); // "Student: Neha, Age: 19, Course: Computer Science"
student1.celebrateBirthday(); // "Happy birthday, Neha! You are now 20."
student1.printDetails(); // "Student: Neha, Age: 20, Course: Computer Science"
Key points:
Methods live inside the class body (not inside the constructor).
Inside methods, this refers to the specific object calling the method.
Methods help keep data + behavior together, which is core to OOP.
Basic Idea of Encapsulation
Encapsulation is about bundling data and methods together and hiding internal details as much as possible.
In simpler terms:
An object should protect its own data.
Other parts of your code should interact with the object through its methods, not by directly messing with every internal detail.
In our Student example:
name, age, and course are the data.
printDetails() and celebrateBirthday() are the behaviors related to that data.
Instead of writing:
student1.age = student1.age + 1;
console.log(student1.age);
We call:
student1.celebrateBirthday();
Benefits:
If you ever change how birthdays are handled (e.g., logging, validations), you only change it inside the class.
Outside code doesn’t need to know the details; it just calls the method.
In more advanced OOP, encapsulation involves access modifiers (like private, protected), but for now, just remember:
- Encapsulation = keeping related data and functions together, and exposing a clean, simple interface (methods) to the outside.
Another Simple Example: Car Blueprint Revisited
Let’s revisit our car analogy with a full mini example:
class Car {
constructor(brand, model, year) {
this.brand = brand;
this.model = model;
this.year = year;
this.isRunning = false;
}
start() {
if (!this.isRunning) {
this.isRunning = true;
console.log(`\({this.brand} \){this.model} started.`);
} else {
console.log(`\({this.brand} \){this.model} is already running.`);
}
}
stop() {
if (this.isRunning) {
this.isRunning = false;
console.log(`\({this.brand} \){this.model} stopped.`);
} else {
console.log(`\({this.brand} \){this.model} is already stopped.`);
}
}
}
const carA = new Car("Honda", "Civic", 2020);
const carB = new Car("Maruti", "Swift", 2018);
carA.start(); // "Honda Civic started."
carA.stop(); // "Honda Civic stopped."
carB.start(); // "Maruti Swift started."
The class defines what every car knows and can do.
Each instance (carA, carB) has its own state (isRunning, brand, model, year).
The methods enforce a simple encapsulated behavior (e.g., don’t start an already running car).
Assignment: Build a Student Class
Here’s a practical assignment you can copy into a .js file or console.
1. Create a class called Student
- Add properties
name and age use the constructor.
class Student {
constructor(name, age) {
this.name = name;
this.age = age;
}
printDetails() {
console.log(`Student: \({this.name}, Age: \){this.age}`);
}
}
2. Create multiple student objects
const student1 = new Student("Rahul", 20);
const student2 = new Student("Sara", 22);
const student3 = new Student("Amit", 19);
student1.printDetails(); // "Student: Rahul, Age: 20"
student2.printDetails(); // "Student: Sara, Age: 22"
student3.printDetails(); // "Student: Amit, Age: 19"
3. Extend the assignment (optional)
class Student {
constructor(name, age, course) {
this.name = name;
this.age = age;
this.course = course;
}
printDetails() {
console.log(`Student: \({this.name}, Age: \){this.age}, Course: ${this.course}`);
}
}
const s1 = new Student("Rahul", 20, "Computer Science");
const s2 = new Student("Anita", 21, "Information Technology");
s1.printDetails();
s2.printDetails();
You can easily convert these into simple diagrams.
1. Blueprint
Label this as: “One blueprint, many objects”.
2. Class → Instance relationship visual
On the left: class Student { ... }
On the right: several bubbles/boxes:
student1: { name: "Rahul", age: 20 }
student2: { name: "Sara", age: 22 }
Arrows from the Student class to each student object.
Label: “Class → Instance (Object)”.
Summary
OOP organizes your code around objects that combine data and behavior.
A class is a blueprint; an object is a real instance built from that blueprint.
The constructor sets up the initial state (properties) of each object.
Methods inside a class define what the objects can do.
Encapsulation is about keeping data + methods together and exposing a clean interface, improving reusability and maintainability.
You can model real-world concepts like Car, Person, and Student directly in your code using classes and objects.
Happy Coding!
