Understanding Object-Oriented Programming in JavaScript
Object-Oriented Programming (OOP) is one of the most important programming concepts every JavaScript developer should understand. Instead of writing code as a long sequence of instructions, OOP help us organize code into objects that represents real-world things.
But what exactly is OOP, and why should we care?
Let's break it down in simple way.
What is Object-Oriented Programming?
Object-Oriented Programming is a programming style where we structure our code using objects.
An object is simply a collection of:
Properties (data) - information about the object
Methods (function) - actions the object can perform
Think of objects as real world entities in code.
Example:
const car = {
brand: "Toyota",
speed: 120,
drive() {
console.log("Car is driving");
}
}
Here:
brandandspeed-> propertiesdrive()->method
Real-World Analogy: Blueprint --> Objects
The easiest way to understand OOP is by thinking about blueprints.
A blueprint describes how something should be built, but it is not the actual object.
Imagine a car factory:
A blueprint defines how car should be built.
The factory uses that blueprint to create multiple cars.
In programming:
| Real World | Programming |
|---|---|
| Blueprint | Class |
| Car | Object |
So a class is like a blueprint, and objects are the actual products created from it.
What is a Class in JavaScript?
A class defines the structure for creating objects.
It defines:
What properties objects should have.
What methods objects can perform.
Example:
class Car {
constructor(brand, color) {
this.brand = brand;
this.color = color;
}
}
Here we defined a Car class, but no car exists yet.
Creating Objects Using Classes
Once a class is defined, we can create objects using the new keyword.
Example:
const car1 = new Car("Toyota", 120);
const car2 = new Car("Honda", 140);
console.log(car1);
console.log(car2);
Output conceptually:
Car { brand: "Toyota", speed: 120 }
Car { brand: "Honda", speed: 140 }
Both objects follow the same structure defined in the class.
This is the power of code reuse.
The Constructor Method
The constructor is a special method that runs automatically when a new object is created.
It is used to initialize object properties.
Example:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
When we create new person:
const p1 = new Person("Tony", 24);
The constructor automatically sets:
name-> Tonyage-> 24
Methods Inside a Class
Classes can also contain methods, which define behaviors of objects.
Example:
class Person {
constructor(name, age) {
this.name = name;
this.age = age
}
greet() {
console.log("Hello, my name is " + this.name);
}
}
Create an object and call the method:
const person1 = new Person("Steve", 25);
persone1.greet();
Output:
Hello, my name is Steve
Basic Idea of Encapsulation
Encapsulation means bundling data and methods together inside a class and controlling how they are accessed.
Instead of writing scattered code, we organize everything related to an object in one place.
Example:
class BankAccount {
constructor(owner, balance) {
this.owner = owner;
this.balance = balance;
}
deposit(amount) {
this.balance += amount;
}
getBalance() {
return this.balance;
}
}
const account = new BankAccount("Natasha", 1000);
account.deposit(500);
console.log(account.getBalance);
Here:
ownerandbalance-> datadepositandgetBalance-> behavior
Everything related to band account is contained inside the class.
Why OOP is Helpful
Using OOP provides several benefits:
Code Reusability
We can reuse the same class to create many objects.Better Organization
Code becomes easier to read and maintainReal-World Modeling
Programs can represent real-world things like users, products, cars, etc
Assignment
Try on your own First:
Step 1: Create a Student Class
class Student {
constructor(name, age) {
this.name = name;
this.age = age;
}
printDetails() {
console.log(this.name + " is " + this.age + " years old.");
}
}
Step 2: Create multiple objects
const s1 = new Student("Clint", 20);
const s2 = new Student("Bruce", 22);
const s3 = new Student("Peter", 19);
Step 3: Call the methods
s1.printDetails();
s2.printDetails();
s3.printDetails();
Expected output:
Clint is 20 years old.
Bruce is 22 years old.
Peter is 19 years old.
Final Thoughts
Object-Oriented Programming might sound complicated at first, but the core idea is simple:
Use classes as blueprints and objects as real instance.
Once we understand this concept, writing structured JavaScript becomes much easier.




