Understanding Object-Oriented Programming in JavaScript

Suppose you have a factory where you make cars. You have deals with different car brands and they ask you to make cars for them. Now you can do two things, since there is more than one brand you will actually setup a new factory for a new brand or you can build cars from different brands from a single factory which will save you time, electricity, money, labor etc. This concept of making different cars is OOPs.

// Define a Car class (blueprint)

class Car {
  constructor(company, model category) {
    this.brand = brand;     
    this.color = color;     
    this.category = category          
  }

  startEngine() { // method: every car can start its engine
    console.log${this.brand} engine started.);
  }
}


// Create (instantiate) car objects from the blueprint
const car1 = new Car("Toyota", "Hilux",true,’SUV);
const car2 = new Car("BMW", "BMW",false,’Sedan’);
const car3 = new Car("Mahindra", "Scorpio",true, ‘SUV’);

car1.startEngine(); // Output: "Hilux engine started."
car2.startEngine(); // Output: "BMW engine started."
car2.startEngine(); // Output: "Scorpio engine started."

What Object-Oriented Programming(OOP) means

Object Oriented Programming is a style of programming where you organize your software design around data (objects) rather than functions and logic. In JavaScript, this is achieved by using Constructors or Classes to create multiple instances of objects that share the same blueprint.

However, JavaScript is a prototype based language, which uses prototypes. Under the hood, when you write a class, JavaScript is essentially converting it into a combination of functions and objects. It was introduced in ES6 (2015) primarily to make the language more approachable for developers coming from "class-based" backgrounds like Java, C#, or Python.

 What’s Actually Happening?

When you define a class, JavaScript treats it as a special type of function. Here is the side-by-side comparison of how your "Sugar" looks vs. the "Raw" engine code:

The "Sugar" (Modern Class)

class Hero {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return I am ${this.name};
  }
}

The "Raw" (Function-Based Prototype)

This is what JavaScript is actually doing behind the scenes:

function Hero(name) {
  this.name = name;
} 

// Adding a method to the prototype so all instances share it

Hero.prototype.greet = function() {
  return "I am " + this.name;
};

Why do we need OOPs in Javascript

Because you don’t have to write hundreds of function if the work can be done in few class based OOPs, given below are few points to justify it. 

• Modularity: You can troubleshoot an object without breaking the rest of your app. Means you will actually need to fix the main object, others will follow.

• Reusability: You can use inheritance to avoid "Spaghetti Code" (messy, tangled logic). Means why we need to write the same functionality again and again , right ?, we can get it from another object

• Scalability: It makes it much easier to manage large codebases with hundreds of moving parts. Now we don't have to write different objects for same kind of functionality.

4 pillars of OOP

To master OOP, you just need to understand these four core concepts:

• Encapsulation

Encapsulation is about keeping the data (variables) and the methods (functions) that manipulate that data bundled together inside an object. It also involves hiding the internal workings from the outside world to restrict direct access to internal state

• Abstraction

Abstraction means hiding the complex logic and showing only the necessary "interface" to the user. Think of a coffee machine: you press a button (the interface), and you get coffee. You don't need to know how the internal boiler or pump works.

• Inheritance

Inheritance allows one class to derive properties and methods from another. This helps you reuse code rather than rewriting it. For example, a Dog class can inherit from an Animal class, animal class can have property like make sound, breathe etc. .

• Polymorphism

Polymorphism (meaning "many shapes") allows different objects to respond to the same method call in their own way. If you call a .speak() method on both a Cat and a Dog object, the cat meows while the dog barks

Class in JavaScript

In JavaScript, a Class is a blueprint for creating objects with specific properties and methods, in our case it’s the factory. A class itself doesn’t hold values, it describes what an object should have. You create actual objects from a class using the new keyword, new keyword is mandatory because it creates new instance every time is is called with class.

 For exmaple,

Class Person {
    Constructor(name,age, country){
    this.name=name
    this.age =age
    this.place = country
    }
}

const mehtab = new Person(‘mehtab’, 22,’India’)
const ramlal= new Person(‘ramlal’, 42, ‘Mars’)

Constructor method

We can create objects from a function. With the help of a constructor function, built-in objects like arrays, sets, and others are actually implemented.

In JavaScript, a constructor gets called when an object is created using the new keyword. The purpose of a constructor is to create a new object and set its values for any existing object properties.

Methods Inside a Class

Methods are functions defined within a class body (not inside the constructor function). They represent actions that instances of the class can perform. For example, a Car class might have accelerate or startEngine function. Every instance that is created with new keyword and this class will have the accces to those method.

class Car {
  constructor(brand) {
    this.brand = brand;
    this.speed = 0;
  }

  startEngine() {
    console.log{`${this.brand} engine started.`);
  }

  accelerate(amount) {
    this.speed += amount;
    console.log{`\({this.brand} is now going \){this.speed} km/h.`);
  }
}

Here, startEngine() and accelerate() are methods. All objects of the class share these method definitions, so the code is not duplicated for each object – this is part of how classes promote code reusability.

Encapsulation

Encapsulation means hiding the internal data of an object and allowing access only through methods.

Think of it like an login or registration system of websites there you cannot access passwords, you will need to use forgot password or etc.

That is encapsulation.

class User {
  #password;   // private property 
  constructor(password) {
    this.#password = password;
  }

  checkPassword(pass) {
    return pass === this.#password;
  }
}
 
const user = new User("1234");

console.log(user.checkPassword("1234")); // true
console.log(user.#password)  // Not allowed

Conclusion

In this blog, we understood about OOPs in JavaScript, which is way of writing scalable code, and it can create multiple instance with the help of new keyword. Constructor function create the new object from it. Encapsulation helps to hide internal data which users doesn't need to know.