Skip to main content

Command Palette

Search for a command to run...

Understanding Object-Oriented Programming in JavaScript

Published
3 min read
Understanding Object-Oriented Programming in JavaScript
A

I am B-Tech 3rd year Student (Electrical Engineering)

In the previous lesson, we created objects manually. But what if you’re building a racing game with 100 different cars? Writing out a new object for every single car would be exhausting.

Object-Oriented Programming (OOP) is a style of programming that allows us to create a "blueprint" once and use it to build as many objects as we need.

Topics that we are going to cover in this blog are as follows

  • What Object-Oriented Programming (OOP) means

  • Real-world analogy (blueprint → objects)

  • What is a class in JavaScript

  • Creating objects using classes

  • Constructor method

  • Methods inside a class

  • Basic idea of encapsulation


The Real-World Analogy: Blueprint vs. Object

Think of an architect’s blueprint for a house. The blueprint itself isn't a house—you can’t live in it. However, you can use that one blueprint to build 50 identical houses.

  • The Class: This is the blueprint. It defines what properties (color, speed) and actions (drive, brake) a car should have.

  • The Object (Instance): This is the actual car built from the blueprint.


What is a Class in JavaScript?

A Class is a reserved keyword in JavaScript used to create this blueprint. It groups data (properties) and behavior (methods) together.


The constructor Method

Inside every class, there is a special function called the constructor. It’s the "setup" phase of your object. It runs automatically the moment you create a new object from the class.

class Car {
  constructor(brand, color) {
    this.brand = brand; // "this" refers to the specific car being built
    this.color = color;
  }
}

Creating Objects (Instantiations)

To build an object from our class, we use the new keyword.

const myCar = new Car("Tesla", "Red");
const friendsCar = new Car("BMW", "Blue");

console.log(myCar.brand); // Output: Tesla
console.log(friendsCar.brand); // Output: BMW

Adding Methods

A blueprint doesn't just describe how a car looks; it describes what it does. We add functions inside a class (without the function keyword) called methods.

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

  // This is a method
  drive() {
    console.log(this.brand + " is now driving!");
  }
}

const myCar = new Car("Tesla", "Red");
myCar.drive(); // Output: Tesla is now driving!

A Basic Idea of Encapsulation

Encapsulation sounds fancy, but the idea is simple: it’s about bundling data and the methods that use that data into one single unit (the class).

By keeping everything inside the class "capsule," we make our code more organized and prevent other parts of our program from accidentally messing with our car's data.


Why Use OOP?

  • Reusability: Build the logic once, create infinite objects.

  • Organization: It keeps related data and behavior in one place.

  • Scalability: It's much easier to manage 100 "Students" or "Products" when they all follow the same blueprint.


Conclusion

  • The Blueprint: A class is just the plan; it doesn't "exist" until you use the new keyword to create an instance.

  • The Constructor: This is your setup shop. It’s where you take raw data (arguments) and assign them to the object using this.

  • Encapsulation: By keeping data (properties) and actions (methods) inside one class, your code becomes cleaner, safer, and much easier to scale.