Object-Oriented JavaScript (OOP)

ADVERTISEMENT

What Is Object-Oriented JavaScript?

Object-Oriented Programming (OOP) is a way to structure your code using objects — self-contained units that bundle data (properties) and behavior (methods) together.

JavaScript supports OOP using objects, constructor functions, and the modern class syntax.

JavaScript Objects Overview

In JavaScript, objects are collections of key-value pairs.

Example:

let person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log("Hello, I'm " + this.name);
  }
};

person.greet(); // Output: Hello, I'm Alice

You can access properties using dot or bracket notation:

console.log(person.name); // Alice
console.log(person["age"]); // 25

Constructor Functions

Before ES6, constructor functions were used to create object templates.

Example:

function Car(brand, year) {
  this.brand = brand;
  this.year = year;
  this.start = function () {
    console.log(this.brand + " started");
  };
}

let myCar = new Car("Toyota", 2022);
myCar.start(); // Toyota started

Using new with a constructor creates a new object based on the function’s structure.

Classes and the class Keyword

In ES6, JavaScript introduced the class keyword — a cleaner, more familiar syntax for defining object blueprints.

Example:

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

  speak() {
    console.log(this.name + " makes a sound.");
  }
}

let dog = new Animal("Dog");
dog.speak(); // Dog makes a sound.

Note: Under the hood, classes still use prototypes, but the syntax is easier to manage.

Static Methods

Static methods belong to the class itself, not instances of the class.

Example:

class MathUtils {
  static square(n) {
    return n * n;
  }
}

console.log(MathUtils.square(4)); // 16

You call static methods directly on the class, not on objects created from the class.

Encapsulation

Encapsulation means keeping internal details hidden and exposing only what’s necessary.

In JavaScript, you can simulate encapsulation using private fields (introduced in ES2022).

Example:

class BankAccount {
  #balance = 0;

  deposit(amount) {
    if (amount > 0) this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

let account = new BankAccount();
account.deposit(1000);
console.log(account.getBalance()); // 1000
// account.#balance = 500; // ❌ Error: private field

Private fields start with # and can only be accessed within the class.

Inheritance

Inheritance allows one class to inherit the properties and methods of another.

Example:

class Vehicle {
  constructor(type) {
    this.type = type;
  }

  move() {
    console.log(this.type + " is moving");
  }
}

class Bike extends Vehicle {
  constructor(brand) {
    super("Bike");
    this.brand = brand;
  }
}

let myBike = new Bike("Honda");
myBike.move(); // Bike is moving

The extends keyword is used to inherit, and super() calls the parent constructor.

Polymorphism

Polymorphism means different objects can respond differently to the same method.

Example:

class Shape {
  draw() {
    console.log("Drawing a shape");
  }
}

class Circle extends Shape {
  draw() {
    console.log("Drawing a circle");
  }
}

class Square extends Shape {
  draw() {
    console.log("Drawing a square");
  }
}

let shapes = [new Shape(), new Circle(), new Square()];

for (let shape of shapes) {
  shape.draw();
}

Each class overrides the draw() method with its own version.

Abstraction

Abstraction hides complexity and exposes only the necessary parts.

JavaScript doesn’t support true abstract classes like Java or C#, but you can simulate it using methods that are meant to be overridden.

Example:

class Payment {
  process() {
    throw new Error("process() must be implemented by subclass");
  }
}

class PayPal extends Payment {
  process() {
    console.log("Processing PayPal payment...");
  }
}

let payment = new PayPal();
payment.process(); // Output: Processing PayPal payment...

This forces a consistent interface while leaving implementation to subclasses.

Summary

  • JavaScript uses objects to organize data and behavior.
  • Use constructor functions or classes to create reusable object blueprints.
  • Encapsulation protects internal data using private fields.
  • Inheritance allows sharing behavior between classes.
  • Polymorphism enables different behaviors under a common interface.
  • Abstraction helps hide details and enforce consistency.
  • Use static methods for utility functions that don’t depend on object instances.

That’s it — you’ve covered all the fundamentals of JavaScript in a structured, beginner-friendly tutorial series!

ADVERTISEMENT