Stop 04 · JavaScriptTopics · 21/36

OOP

Part of the Frontend Developer Roadmap

In short

Object-oriented programming is a way of organising code around things that hold data and know how to act on it. It shows up in interviews and in most large codebases.

Object-Oriented Programming — structuring code around objects with encapsulated state and behavior, using classes, inheritance and polymorphism. OOP is one way to organize software around state and behavior, and its usefulness depends on whether objects and relationships actually fit the problem being solved.

The jaadu mascot drives a yellow and green auto-rickshaw and waves.

Think of it like this

The auto-rickshaw

Every auto has a meter, fuel and a driver (data) and it can start, stop and calculate a fare (behaviour). You never open the engine to ride one. You just say "chalo". Hiding the messy insides behind simple actions is the heart of OOP.

Watch it happen

One loop, many fare() methods

for loop
Auto(4)
Cab(4)

ride.fare()

1/6The loop asks the first ride for its fare. It doesn't check the type.

The big ideas

What you need to know

Encapsulation

Keep data and the methods that change it together, and hide the internals. In JavaScript, #private fields help.

Inheritance

A child class reuses a parent's code with extends. Useful, but long inheritance chains get hard to change.

Polymorphism

Different classes share a method name, like fare(), and each does its own version. The caller doesn't care which one it got.

Composition often wins

Building objects out of smaller parts ("has a") is usually easier to change than deep "is a" family trees.

See it in code

Walk through the code

js
1class Vehicle {2  constructor(km) { this.km = km; }3  fare() { return 0; }4}5class Auto extends Vehicle {6  fare() { return 30 + this.km * 15; }7}8class Cab extends Vehicle {9  fare() { return 50 + this.km * 20; }10}11 12const rides = [new Auto(4), new Cab(4)];13for (const ride of rides) {14  console.log(ride.constructor.name, ride.fare());15}16// Auto 90   Cab 130

1/3Vehicle stores km and has a default fare.

The loop calls fare() without checking the type. Each class answers in its own way. That's polymorphism, and adding a Bike class later needs no change to the loop.

Save yourself the pain

Common mistakes

Oops

Building five levels of inheritance: Vehicle, Motor, Car, Sedan, CitySedan.

Do this instead

Keep inheritance shallow. Pass in smaller parts, like a fare calculator, instead of inheriting everything.

Oops

Turning every small helper into a class.

Do this instead

JavaScript is happy with plain functions and objects. Use a class when you have many objects sharing data and behaviour.

Your mission

Fare app in OOP

~30 min

Quick check

Auto and Cab each have their own fare() method, and the loop calls ride.fare() without checking the type. Which OOP idea is this?

Go deeper

  1. 1Model a small real-world domain (e.g. a library) with classes and relationships. Validate your understanding by applying it in a small practical example.
  2. 2Practice encapsulation using private class fields (`#field`). Test it with at least one normal case and one edge case so you can explain the behavior confidently.
  3. 3Compare an OOP solution to the same problem solved functionally.

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge