Understanding Object-Oriented Programming in JavaScript
Introduction
Object-Oriented Programming simply OOP can feel like a heavy academic term, but it’s actually just a way to organize your code so it mirrors how we think about the world. Instead of having variables and functions floating around randomly,
We group them into "objects."
Here is a deep dive into the world of JavaScript OOP, broken down into bite-sized, logical pieces.
What Object-Oriented Programming (OOP) means
Object-Oriented Programming or OOPs refers to languages that use objects in programming. Object-oriented programming aims to implement real-world entities like inheritance, hiding, polymorphism, etc in programming.
The main aim of OOP is to bind together the data and the functions that operate on them so that no other part of the code can access this data except that function.
Real-world analogy (blueprint → objects)
Think of a Class as a blueprint for a house. The blueprint isn't a house itself, you can't live in it, and it doesn't have actual walls or plumbing. However, it defines exactly where the walls should go and what color the tiles should be.
An Object is the actual house built from that blueprint. You can use one blueprint (Class) to build dozens of houses (Objects). Each house has the same structure, but one might be painted blue while another is green.
Blueprint → Object diagram
What is a class in JavaScript
In modern JavaScript (ES6+), we use the class keyword. It’s a clean way to package data and behavior together.
A class is a user-defined data type. It consists of data members and member functions, which can be accessed and used by creating an instance of that class. It represents the set of properties or methods that are common to all objects of one type.
A class typically consists of three main parts:
Constructor: A special method that runs automatically when you create a new object. It’s used to set up the initial properties.
Properties: Data stored within the class (e.g., a car's color or brand).
Methods: Functions defined inside the class that describe what the object can do.
Class → Instance relationship visual
Creating objects using classes
1 . First define class
Constructor method : The constructor is a special method that runs automatically when you create a new object. Its job is to "set up" the object's initial properties.
Code:
class Car {
constructor(brand, model, year) {
this.brand = brand; // Property
this.model = model; // Property
this.year = year; // Property
}
// A method (functionality)
displayInfo() {
return `This is a \({this.year} \){this.brand} ${this.model}.`;
}
}
2 . Then create an actual object from that blueprint, use the new keyword.
Code:
const myCar = new Car("Tesla", "Model 3", 2024);
const spouseCar = new Car("Rivian", "R1S", 2023);
console.log(myCar.brand);
// Output: Tesla
console.log(spouseCar.displayInfo());
// Output: This is a 2023 Rivian R1S.
3 . Methods inside a class
It's gives objects to behavior
Objects aren't just containers for data, they can also do things. These functions inside a class are called methods.
Code:
class Car {
constructor(brand, color) {
this.brand = brand;
this.color = color;
this.isStarted = false;
}
// A method to change the state of the car
startEngine() {
this.isStarted = true;
console.log(`The \({this.color} \){this.brand} is roaring to life!`);
}
}
const myCar = new Car("Toyota", "Blue");
myCar.startEngine();
// Output: The Blue Toyota is roaring to life!
Basic idea of encapsulation
Encapsulation is a fancy word for "bundling."
It’s the practice of keeping the data (properties) and the code that handles it (methods) inside one "capsule" or unit.
Encapsulation is defined as the wrapping up of data under a single unit. It is the mechanism that binds together code and the data it manipulates.
In Encapsulation, the variables or data of a class are hidden from any other class and can be accessed only through any member function of their class in which they are declared. As in encapsulation, the data in a class is hidden from other classes, so it is also known as data-hiding.
Assignment Idea
1 . Create a class called Student
We use the class keyword followed by the name.
Code:
class Student {
// This is the shell of our blueprint
}
2 . Add properties like name and age
To give our students data, we use a special method called the constructor.
It runs automatically when we create a new student. We use this to make sure the data sticks to the specific student we are creating.
Code:
class Student {
constructor(name, age) {
this.name = name; // Assigns the name property
this.age = age; // Assigns the age property
}
}
3 . Add a method that prints student details
A method is just a function that lives inside the class. Since it's inside, it has access to the student's name and age using this.
Code:
class Student {
constructor(name, age) {
this.name = name;
this.age = age;
}
// Our new method
introduce() {
console.log(`Hello, my name is \({this.name} and I am \){this.age} years old.`);
}
}
4 . Create multiple student objects
Code:
// Creating the objects
const student1 = new Student("Atharv", 24);
const student2 = new Student("Raju", 27);
const student3 = new Student("Krishna", 20);
// Solving the final requirement: Calling the methods
student1.introduce();
// Output: Hello, my name is Atharv and I am 24 years old.
student2.introduce();
// Output: Hello, my name is Raju and I am 27 years old.
student3.introduce();
// Output: Hello, my name is Krishna and I am 20 years old.
Conclusion
Object-oriented programming in JavaScript lets you organize code by bundling related data and behavior into objects, think of classes (or prototypes) as blueprints and objects as the houses built from them.
Core ideas like encapsulation, inheritance, and polymorphism make code easier to reuse, extend, and reason about. Start small, practice with ES6 classes and prototype-based patterns, and you'll find OOP helps keep your projects clearer and more maintainable.
