Understanding Object-Oriented Programming in JavaScript

Programming is not only about writing code. It is about organizing ideas in a way that computers can understand and execute efficiently.
When software projects grow larger, simple scripts quickly become messy. Variables appear everywhere, functions become difficult to manage, and suddenly even small changes start breaking things.
This is where Object-Oriented Programming, often called OOP, becomes extremely valuable.
Object-Oriented Programming is a way of structuring code so that it mirrors the real world. Instead of writing disconnected pieces of code, we create objects that represent real-world entities and define how those entities behave.
In JavaScript, OOP allows developers to design programs using classes and objects, making code easier to reuse, understand, and maintain.
But to truly understand OOP, let’s start with something everyone understands: building cars.
The Car Factory Analogy: Blueprint to Real Objects
Imagine a car manufacturing company.
Before the company produces thousands of cars, engineers first design a blueprint. This blueprint defines the structure of the car: how the engine is placed, how many wheels it has, where the seats go, and what components the car will include.
However, the blueprint itself is not a car. It is simply a design.
Using that blueprint, the factory can produce many different cars. One might be red, another black, another white. One might have a sunroof, another might not. But fundamentally, they all follow the same design.
In programming, this blueprint is what we call a class.
The actual cars produced from the blueprint are called objects.
If we visualize this idea, it looks something like this:
Each car is an instance created from the same design.
This is exactly how Object-Oriented Programming works in JavaScript.
What Exactly is Object-Oriented Programming?
Object-Oriented Programming is a programming paradigm where we organize code around objects instead of separate functions and variables.
Each object contains two main things:
Properties – information about the object
Methods – actions the object can perform
For example, consider a car object.
A car has characteristics such as:
brand
color
speed
But it can also perform actions such as:
start
stop
accelerate
Instead of writing these separately throughout our program, OOP allows us to combine them into one structure.
So conceptually we might imagine something like:
Car
├ brand
├ color
├ speed
├ start()
└ stop()
This grouping makes code much easier to understand.
Classes in JavaScript: The Blueprint of Objects
In JavaScript, a class is essentially the blueprint we discussed earlier. It defines how objects should look and behave.
Before ES6, JavaScript handled objects using constructor functions and prototypes, which could be confusing for beginners. Modern JavaScript introduced the class keyword, making OOP much easier to understand.
Let’s create our first class.
class Car {
brand = "Toyota";
color = "Red";
}
Here we created a class called Car.
But something important to understand is that a class by itself does nothing. It only describes how objects should look.
To actually use it, we must create objects.
Creating Objects from a Class
To create objects from a class in JavaScript, we use the new keyword.
This tells JavaScript to build a new instance based on the class design.
class Car {
brand = "Toyota";
color = "Red";
}
const car1 = new Car();
const car2 = new Car();
Now we have two objects: car1 and car2.
Even though they come from the same class, they are separate objects in memory.
We can access their properties like this:
console.log(car1.brand);
console.log(car2.color);
This idea is extremely powerful because one class can generate thousands of objects.
In large applications, this helps developers avoid repeating the same code again and again.
The Constructor: Giving Objects Their Identity
So far, every car we created has the same brand and color. That’s not very realistic.
In real life, every car is different. Some are Toyota, some are Honda, some are black, some are blue.
To give each object its own data, JavaScript provides a special method called the constructor.
The constructor automatically runs whenever a new object is created.
Let’s improve our class.
class Car {
constructor(brand, color) {
this.brand = brand;
this.color = color;
}
}
The constructor receives parameters when we create an object.
Now we can create unique cars.
const car1 = new Car("Toyota", "Red");
const car2 = new Car("Honda", "Black");
const car3 = new Car("BMW", "White");
Each object now has its own values.
If we print them:
console.log(car1.brand);
console.log(car2.brand);
console.log(car3.brand);
We will see:
Toyota
Honda
BMW
The keyword this is extremely important here. It refers to the current object being created.
Methods: Teaching Objects How to Behave
So far, our objects only store information. But real objects do more than just hold data — they perform actions.
This is where methods come in.
Methods are functions defined inside a class that describe what an object can do.
Let’s add behavior to our car.
class Car {
constructor(brand, color) {
this.brand = brand;
this.color = color;
}
start() {
console.log(this.brand + " is starting.");
}
stop() {
console.log(this.brand + " has stopped.");
}
}
Now when we create a car, it knows how to start and stop.
const car1 = new Car("Toyota", "Red");
car1.start();
car1.stop();
Output:
Toyota is starting.
Toyota has stopped.
Now our object behaves much more like a real-world entity.
Another Example: Modeling a Person
To make this concept even clearer, imagine we are modeling people in a program.
A person has:
a name
an age
And a person can perform actions like introducing themselves.
We can create a class like this:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
introduce() {
console.log("Hello, my name is " + this.name);
}
}
Now we create people.
const person1 = new Person("Ali", 22);
const person2 = new Person("Sara", 24);
person1.introduce();
person2.introduce();
Output:
Hello, my name is Ali
Hello, my name is Sara
With just one class, we can represent many different people.
Encapsulation: Keeping Things Organized
One of the key principles of Object-Oriented Programming is encapsulation.
Encapsulation simply means bundling data and the methods that operate on that data inside a single unit.
Think about a bank account.
A bank account contains a balance, but you cannot directly modify the balance whenever you want. Instead, you must use specific operations like depositing or withdrawing money.
We can represent this idea with a class.
class BankAccount {
constructor(owner, balance) {
this.owner = owner;
this.balance = balance;
}
deposit(amount) {
this.balance += amount;
}
withdraw(amount) {
this.balance -= amount;
}
}
Here the balance is controlled by methods. This structure protects data and keeps the program organized.
Encapsulation helps developers prevent mistakes and maintain control over how data changes.
Why Developers Love Object-Oriented Programming
Once applications grow large, OOP becomes incredibly helpful.
Instead of writing messy, repetitive code, developers can design clear structures.
A single class can generate hundreds or even thousands of objects, all sharing the same behavior but holding different data.
This approach improves:
code readability
maintainability
scalability
reusability
For example, imagine building a school management system.
Instead of managing students manually, we can create a Student class, then generate thousands of student objects.
Student Example
Create a Student class that represents students in a system.
The class should contain:
Properties:
name
age
Method:
- printDetails()
Example implementation:
class Student {
constructor(name, age) {
this.name = name;
this.age = age;
}
printDetails() {
console.log("Student Name: " + this.name);
console.log("Student Age: " + this.age);
}
}
Now create multiple students.
const student1 = new Student("Ali", 20);
const student2 = new Student("Sara", 21);
const student3 = new Student("Ahmed", 19);
student1.printDetails();
student2.printDetails();
student3.printDetails();
By completing this exercise, you will gain practical experience with:
classes
constructors
objects
methods
Object-Oriented Programming is one of the most important concepts in modern software development.
It allows developers to design programs that resemble the real world, making complex systems easier to understand and maintain.
By mastering classes, objects, constructors, and methods in JavaScript, you build a strong foundation for creating larger applications such as:
dashboards
APIs
management systems
e-commerce platforms
full-stack applications
The key is simple: start small and practice often.
Try creating classes like:
Car
User
Product
Student
BankAccount
Every small project will strengthen your understanding of OOP.
Soon, you will begin to see the world of programming not as disconnected lines of code, but as systems of interacting objects working together.