Understanding Object-Oriented Programming in JavaScript

Source: Dev.to

Hello readers 👋, welcome back to the 9th blog in this JavaScript series.

Imagine you are a car manufacturer. You don’t build each car from scratch, right? You have a blueprint (or design) that defines what a car should have: wheels, engine, doors, colour options, etc. Then you use that blueprint to create many cars – each car is an object made from the same blueprint.

This is exactly what Object‑Oriented Programming (OOP) is all about. You create a blueprint (called a class) and then create multiple objects (called instances) from it.

In this post we’ll explore how JavaScript implements OOP using classes and objects, with simple, practical examples.

Object‑Oriented Programming (OOP)

OOP is a programming style that organizes code around objects rather than functions and logic. An object can contain:

• Data – properties (e.g., name, age)
• Actions – methods (e.g., drive(), displayInfo())

The main idea is to model real‑world things – a person, a car, a student – as objects in your code.

Real‑World Analogy: Blueprint → Objects

What Is a Class in JavaScript?

A class is a template for creating objects. It encapsulates the data and behaviour that its objects will have.

JavaScript introduced the class syntax in ES6 (2015) as syntactic sugar over the existing prototype‑based inheritance. Think of a class simply as a blueprint.

Syntax

class ClassName {
  // properties and methods
}

Creating a Simple Class and Object

class Car {
  // Constructor – runs when a new object is created
  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }

  // Method
  displayInfo() {
    console.log(`This is a ${this.color} ${this.brand}.`);
  }
}

// Creating objects (instances) from the class
const car1 = new Car('Toyota', 'red');
const car2 = new Car('Honda', 'blue');

car1.displayInfo(); // This is a red Toyota.
car2.displayInfo(); // This is a blue Honda.

Explanation

• constructor is a special method that initializes the object’s properties (this.brand, this.color).
• this refers to the current instance.
• new Car(...) creates a fresh object based on the class.

Constructor Method

The constructor is like the assembly line in a factory: it takes raw materials (parameters) and builds the object.

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

  introduce() {
    console.log(`Hi, I'm ${this.name}, ${this.age} years old, from ${this.city}.`);
  }
}

const person1 = new Person('Raj', 25, 'Delhi');
person1.introduce(); // Hi, I'm Raj, 25 years old, from Delhi.

If you don’t define a constructor, JavaScript supplies an empty one by default.

Methods Inside a Class

Methods are functions that belong to the class and define the behaviour of its objects.

class Calculator {
  constructor(value = 0) {
    this.value = value;
  }

  add(num) {
    this.value += num;
    return this; // enables chaining
  }

  subtract(num) {
    this.value -= num;
    return this;
  }

  getValue() {
    return this.value;
  }
}

const calc = new Calculator(10);
calc.add(5).subtract(3); // chaining
console.log(calc.getValue()); // 12

Methods can read and modify the object’s properties via this.

Basic Idea of Encapsulation

Encapsulation bundles data (properties) and the methods that operate on that data into a single unit (the class) and controls access to the internals.

Think of a car: you don’t need to know how the engine works to drive it; you just use the steering wheel and pedals.

In JavaScript we can indicate that some properties are “private” (true privacy uses the # syntax). Even without true privacy, encapsulation helps keep code organized and prevents accidental interference.

class BankAccount {
  constructor(owner, balance) {
    this.owner = owner;
    this.balance = balance; // ideally this would be private
  }

  deposit(amount) {
    if (amount > 0) {
      this.balance += amount;
      console.log(`Deposited ${amount}. New balance: ${this.balance}`);
    }
  }

  withdraw(amount) {
    if (amount <= this.balance) {
      this.balance -= amount;
      console.log(`Withdrew ${amount}. New balance: ${this.balance}`);
    } else {
      console.log('Insufficient funds!');
    }
  }
}

const myAccount = new BankAccount('Satya', 1000);
myAccount.deposit(500);   // Deposited 500. New balance: 1500
myAccount.withdraw(2000); // Insufficient funds!

The balance property is still publicly accessible, which isn’t ideal. In modern JavaScript you can declare it as #balance to make it truly private.

Conclusion

• OOP organizes code around objects that contain both data and behaviour.
• A class is a blueprint for creating those objects.
• The constructor initializes an object’s properties when it is created.
• Methods define what an object can do, and they can access or modify the object’s own state via this.
• Encapsulation groups related data and behaviour together and controls how that data is accessed.

Understanding these fundamentals will make it easier to write clean, reusable, and maintainable JavaScript code. Happy coding!

Key Takeaways

• Define what objects can do.
• Encapsulation bundles data and methods, hiding internal details.
• Classes make it easy to create multiple objects with the same structure, promoting reusability and organization.

As you progress, you’ll learn more advanced OOP concepts like inheritance, polymorphism, and private fields. For now, practice creating classes and objects – it’s the foundation of modern JavaScript development.

Hope you liked this blog. If there’s any mistake or something I can improve, do tell me. You can find me on LinkedIn and X; I post more stuff there.