JavaScript Object-Oriented Programming (OOP)

Published 9 months ago

Object-Oriented Programming (OOP) is a programming paradigm based on the concept of objects. In JavaScript, OOP allows developers to create reusable and scalable code using objects, prototypes, and classes. In this guide, we will explore key OOP concepts in JavaScript, including object prototypes, constructor functions, classes, inheritance, and accessors.

1. Object Prototypes & Prototypal Inheritance

JavaScript is a prototype-based language, meaning objects can inherit properties and methods from other objects via prototypes.

Prototypes

Every JavaScript object has an internal property called [[Prototype]], which links to another object known as its prototype. This enables inheritance.

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

Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person("John");
person1.greet(); // Output: Hello, my name is John

In the example above, greet is defined on Person.prototype, so all instances of Person inherit it.

Prototypal Inheritance

Prototypal inheritance allows an object to inherit from another object.

const animal = {
    speak() {
        console.log("Animal speaks");
    }
};

const dog = Object.create(animal);
dog.speak(); // Output: Animal speaks

dog inherits the speak method from animal using Object.create.

2. Constructor Functions

Before ES6 classes, JavaScript used constructor functions to create objects.

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

Car.prototype.getDetails = function() {
    return `${this.brand} ${this.model}`;
};

const myCar = new Car("Toyota", "Camry");
console.log(myCar.getDetails()); // Output: Toyota Camry

Constructor functions are used with the new keyword to create instances.

3. class and extends

With ES6, JavaScript introduced the class syntax, making OOP more intuitive.

Defining a Class

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a sound`);
    }
}

const cat = new Animal("Whiskers");
cat.speak(); // Output: Whiskers makes a sound

Inheritance with extends

The extends keyword allows a class to inherit from another class.

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks`);
    }
}

const myDog = new Dog("Buddy");
myDog.speak(); // Output: Buddy barks

Here, Dog inherits from Animal but overrides the speak method.

4. super and this

The super keyword is used to call the constructor or methods of a parent class.

class Vehicle {
    constructor(type) {
        this.type = type;
    }
    displayType() {
        console.log(`This is a ${this.type}`);
    }
}

class Bike extends Vehicle {
    constructor(type, brand) {
        super(type); // Call parent constructor
        this.brand = brand;
    }
    displayInfo() {
        console.log(`This is a ${this.brand} bike`);
    }
}

const myBike = new Bike("motorbike", "Yamaha");
myBike.displayType(); // Output: This is a motorbike
myBike.displayInfo(); // Output: This is a Yamaha bike

The super call ensures that the Vehicle constructor runs before initializing Bike.

5. Getters & Setters

Getters and setters provide a way to control access to object properties.

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

    get name() {
        return this._name;
    }

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

    get age() {
        return this._age;
    }

    set age(newAge) {
        if (newAge > 0) {
            this._age = newAge;
        } else {
            console.log("Age must be positive");
        }
    }
}

const person = new Person("Alice", 25);
console.log(person.name); // Output: Alice
person.age = 30; // Updates age
console.log(person.age); // Output: 30

Using get and set, we can control how properties are read and modified.

Conclusion

JavaScript's OOP features make it powerful for building scalable applications. Understanding prototypes, constructor functions, classes, inheritance, super, this, and accessors will improve your ability to write clean, modular code. By leveraging these concepts, you can design maintainable applications with reusable components.

CodingPro