Understanding Object-Oriented Programming in JavaScript

Introduction Hey there, fellow developer! Imagine building a massive web app where your...

Introduction

Hey there, fellow developer!

Imagine building a massive web app where your code feels like a chaotic pile of functions and variables. Then one day you discover Object-Oriented Programming (OOP) — and suddenly everything clicks into place like LEGO bricks. OOP isn’t just another fancy term; it’s the secret weapon that makes your JavaScript code reusable, organized, and scalable.

In this beginner-friendly guide, we’ll break down OOP in JavaScript using simple real-world examples (no overwhelming jargon, promise!). By the end, you’ll be able to create your own classes, instances, and understand why OOP makes developers’ lives so much easier. Let’s dive in!

What Object-Oriented Programming (OOP) Means?

Object-Oriented Programming is a programming paradigm (a style of writing code) that organizes software design around objects (specifically, instances of classes) rather than functions and logic.

Think of it this way:

• In procedural code, you write step-by-step instructions.
• In OOP, you model real-world things as objects that have properties (key-value pairs data) and behaviours (methods/functions).

The goal? Code reusability. Once you create a blueprint for something, you can reuse it a thousand times without rewriting code. This makes maintenance and collaboration smoother.

What is a Class in JavaScript?

In JavaScript (ES6 and above), a class is a blueprint for creating objects. It’s syntactic sugar over JavaScript’s prototype-based inheritance and constructor function, but it feels much more familiar if you’ve used OOP in other languages like Java.

You define a class using the class keyword:

class Car {
  // properties and methods go here
}

Simple, right? No more messy constructor functions from old-school JavaScript.

Real-World Analogy: Blueprint → Class → Objects

Let’s use the classic Car example (super easy to visualize).

• A blueprint (technical drawing) of a car defines everything: engine size, color options, wheels, etc.
• The actual cars rolling out of the factory are built from that blueprint. Each car has the same structure but can have different colors, mileage, or features.

You don’t redesign the entire car every time you want a new one — you just use the blueprint and tweak a few details.

That’s exactly how OOP works in JavaScript: the blueprint = Class, and the cars = Objects/Instances.

Creating Instances Using Classes + The new Keyword

Once you have a class, you create actual objects (instances) using the new keyword.

const myCar = new Car();

What does new actually do internally? (Quick peek under the hood)
The new keyword is like a mini factory:

1. It creates a brand-new empty object {}.
2. It sets the new object's [[Prototype]] (internal prototype link) to the class's prototype property. This enables method sharing without copying methods to every instance.
3. It binds this inside the constructor to point to this new object.
4. It runs the constructor function (which usually adds properties via this.property = value).
5. It implicitly automatically returns the newly created object.

This is what makes each instance unique while sharing the same structure. No new? You’ll get errors or unexpected behaviour — so always use it unless it's a factory-method!

Constructor Method

Every class can have a special method called constructor. It runs automatically when you create an object with new and is perfect for setting initial properties.

class Car {
  constructor(make, model, year) {
    this.make = make;      // 'this' refers to the new object
    this.model = model;
    this.year = year;
  }
}

const tesla = new Car("Tesla", "Model Y", 2025);
console.log(tesla.make); // Tesla

Methods Inside a Class

Methods are functions attached to the class. They define what the object can do.

class Car {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  startEngine() {
    console.log(`${this.make} ${this.model} engine started!`);
  }

  getAge() {
    return new Date().getFullYear() - this.year;
  }
}

const tesla = new Car("Tesla", "Model Y", 2025);
tesla.startEngine();     // Tesla Model Y engine started!
console.log(tesla.getAge()); // 1 (or whatever the current year is)

Notice how we reuse the same methods across all car objects? Reusability in action!

Note: These methods are nothing but the syntactic-sugar of prototype-based methods. Thus these methods doesn't get copied each time when an instance is created, it's in the shared memory.

Hands-On Example: Building a Student Class (Assignment Time!)

Let’s apply everything we learned. Create a Student class as your mini project:

class Student {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  printDetails() {
    console.log(`Student: ${this.name}, Age: ${this.age}`);
  }
}

// Creating multiple student objects
const student1 = new Student("Ritam", 22);
const student2 = new Student("Priya", 20);
const student3 = new Student("Aarav", 21);

student1.printDetails(); // Student: Ritam, Age: 22
student2.printDetails(); // Student: Priya, Age: 20
student3.printDetails(); // Student: Aarav, Age: 21

Boom! One class → unlimited students. This is the power of OOP.

The Four Pillars of OOP (Basic Ideas)

OOP rests on four foundational concepts which are more oftenly said as Four Pillars of Object-oriented Programming. Here’s the super-simple version:

• Abstraction: Hide complex details and show only what’s necessary. (Like pressing the “Start” button on your car — you don’t need to know how the engine works internally.)
• Encapsulation: Bundle data and methods together and restrict direct access (in JS we often use _privateVariable convention or #private fields). Keeps your object safe!
• Inheritance: Create a new class which is based on an existing one. A Student class can inherit from a Person class and get name/age for free, then add its own features.
• Polymorphism: Same method name, different behavior. A Person can speak(), but a Student can override it to say something different.

These pillars are what make OOP truly magical — and why your code stays DRY (Don’t Repeat Yourself).

Conclusion: Why You Should Love OOP in JavaScript

You’ve just gone from “What even is a class?” to “I can build reusable Student class!”

OOP in JavaScript gives you:

• Cleaner, more organized code
• Massive reusability (write once, use everywhere)
• Easier maintenance and collaboration
• A mental model that matches the real world

Next time you start a project, try modeling it with classes first — your future self will thank you.

Challenge for you: Extend the Student class with inheritance (make a CollegeStudent that adds major and overrides printDetails). Share your code in the comments!

Happy coding!