«Back to Home

Learn JavaScript

Topics

Object-Oriented Programming (OOP) in JavaScript

Object-Oriented Programming (OOP) is a programming paradigm that helps developers organize code, reuse functionality, model real-world entities, and build scalable applications. JavaScript supports OOP through objects, classes, constructors, methods, inheritance, and the this keyword. Modern JavaScript provides class syntax similar to languages such as Java, C#, and Python.

1. What Is a Class?

A class is a blueprint for creating objects. For example, a Car class may define properties like brand and model, and methods like start() and stop(). Each instance created from this blueprint becomes an object.

Example: Creating a Class

class Car {
}

2. Constructor Method

The constructor() method executes automatically when creating an object using new.

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

let car1 = new Car("Honda", "City");
console.log(car1.brand);

Output:

Honda

3. Adding Methods to a Class

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

    start() {
        console.log(`${this.brand} ${this.model} started`);
    }

    stop() {
        console.log(`${this.brand} stopped`);
    }
}

let car = new Car("Honda", "Amaze");
car.start();

Output:

Honda Amaze started

4. this Keyword in Classes

Inside a class, this refers to the current object.

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

    greet() {
        console.log("Hello", this.name);
    }
}

let u = new User("Riya");
u.greet();

5. Inheritance (Extending Classes)

Inheritance allows one class to use the properties and methods of another using extends.

class Animal {
    eat() {
        console.log("Eating...");
    }
}

class Dog extends Animal {
    bark() {
        console.log("Barking...");
    }
}

let d = new Dog();
d.eat();
d.bark();

Output:

Eating...
Barking...

6. super() — Calling Parent Constructor

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

class Student extends Person {
    constructor(name, roll) {
        super(name);
        this.roll = roll;
    }
}

let s = new Student("Aman", 101);
console.log(s.name, s.roll);

7. Method Overriding

A child class can override a method of its parent.

class Person {
    greet() {
        console.log("Hello from Person");
    }
}

class Teacher extends Person {
    greet() {
        console.log("Hello from Teacher");
    }
}

let t = new Teacher();
t.greet();

Output:

Hello from Teacher

8. Getters and Setters

Used to safely access and update values.

class User {
    constructor(name) {
        this._name = name;
    }

    get name() {
        return this._name.toUpperCase();
    }

    set name(value) {
        this._name = value;
    }
}

let u = new User("riya");
console.log(u.name); // Riya

9. Static Methods

Static methods belong to the class, not its instances.

class MathUtil {
    static add(a, b) {
        return a + b;
    }
}

console.log(MathUtil.add(5, 3));

Real-Life Example 1: Bank Account Class

class BankAccount {
    constructor(owner, balance) {
        this.owner = owner;
        this.balance = balance;
    }

    deposit(amount) {
        this.balance += amount;
        console.log("Updated balance:", this.balance);
    }

    withdraw(amount) {
        if (amount > this.balance) {
            console.log("Insufficient funds");
        } else {
            this.balance -= amount;
            console.log("Updated balance:", this.balance);
        }
    }
}

let acc = new BankAccount("Riya", 1000);
acc.deposit(500);
acc.withdraw(300);

Real-Life Example 2: Student Marksheet

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

    total() {
        return this.marks.reduce((sum, m) => sum + m, 0);
    }
}

let s1 = new Student("Aman", [80, 90, 85]);
console.log("Total:", s1.total());

Example Program (Complete)

class Employee {
    constructor(name, salary) {
        this.name = name;
        this.salary = salary;
    }

    yearlySalary() {
        return this.salary * 12;
    }
}

class Manager extends Employee {
    constructor(name, salary, department) {
        super(name, salary);
        this.department = department;
    }

    details() {
        console.log(`${this.name}, ${this.department}, Salary: ${this.yearlySalary()}`);
    }
}

let m = new Manager("Riya", 50000, "HR");
m.details();

Output:

Riya, HR, Salary: 600000

Common Mistakes Beginners Make

  • Forgetting to use new when creating objects

  • Missing super() in child constructors

  • Using arrow functions incorrectly inside classes

  • Declaring properties outside the constructor

  • Confusing static methods with instance methods

Practice Tasks (Do It Yourself)

  • Create a Product class with name, price, and a method to show details.

  • Create an Animal class and extend it into Cat and Dog.

  • Add getters and setters for any property.

  • Create an Account class with deposit and withdraw.

  • Use inheritance to extend Vehicle into Car and Bike.