Mastering OOP(Object Oriented Programming) in JavaScript

Object-oriented programming refers to languages that use objects in programming.4 pillar of object-oriented programming.

Encapsulation

Inheritance

Abstraction

Polymorphism

Now we understand 4 pillars of object-oriented programming by the code. It is easier to understand that by the code.

// Player details

let playerName = "Virat Koli"
let birthDay = "1986-11-5"
let monthlySalary = 200000
let noOfMonths = 12

function calculate_age(age){
    const ageCalculate = Date.now() - new Date(age).getTime()
    const ageDate = new Date(ageCalculate)
    return Math.abs(ageDate.getFullYear() - 1970)
    
}

function getSalary(mothlySalary, noOfMonths) {
    return (monthlySalary * noOfMonths).toLocaleString()
}

console.log(calculate_age(birthDay));
console.log(getSalary(monthlySalary, noOfMonths));

It is a functional programming. Every programming function is independent. When the code base is big maintaining this function is tough. If you declare the function this way parameter will be increased. It makes the code base complex. It is a problem for us. We can make it solve by OOP (object-oriented programming).

Encapsulation :

class Player{
    #name;
    #birthday;
    #noOfMonths;
    #monthlySalary
    constructor(name, birthDay, monthlySalary, noOfMonths){
        this.#name = name;
        this.#birthday = birthDay;
        this.#monthlySalary = monthlySalary;
        this.#noOfMonths = noOfMonths
    }

    calculate_age(){
        const ageCalculate = Date.now() - new Date(this.#birthDay).getTime()
        const ageDate = new Date(ageCalculate)
        return Math.abs(ageDate.getFullYear() - 1970)
};
getSalary() {
    return (this.#monthlySalary * this.#noOfMonths).toLocaleString()
}
}

const player = new Player("Musfiq", '1980-03-30', 2000000, 12)
console.log(player.calculate_age())
console.log(player.getSalary())

Encapsulation in JavaScript refers to all data and methods that operate on that data within a single unit, which is called a class in JavaScript. JavaScript Encapsulation is a way of hiding the implementation details of a class from outside access and only exposing a public interface that can be used to interact with the class. We can use this class for unlimited time dynamically. If you make our property private you will use #variable_name or #function_name.

Inheritance :

class Player{
    #name;
    #age 
    constructor(name, age){
        this.#name = name;
        this.#age = age 
    }
    getPlayerDetails(){
        return `${this.#name} is ${this.#age} years old. `
    };
}

class Cricketer extends Player{
    #centuries
    constructor(name, age, centuries){
        super(name, age)
        this.#centuries = centuries
    }
 
}



class Footboller extends Player{
    #goals
    constructor(name, age, goals){
        super(name, age)
        this.#goals = goals
    }
}

const cricketer = new Cricketer('Tamim Iqbal', 35, 14)
const footboller  = new Footboller('Lionel Messi', 37, 100)
console.log(cricketer.getPlayerDetails());
console.log(footboller.goals);

The JavaScript inheritance is a mechanism that allows us to create new classes on the basis of already existing classes. It provides flexibility to the child class to reuse the methods and variables of a parent class. It is very useful for code readability.

Abstraction :

class BetterArray{
    #items 
    constructor(){
        this.#items = []
    }
    getItems(){
        return [...this.#items]
    }
    addItem(item){
        this.#items.push(item)
    }
    removeItem(itemToDelete){
        this.#items = this.#items.filter(item => item !== itemToDelete)
    }
    modifyItem(itemToChange, newValue){
        const index = this.#items.indexOf(itemToChange)
        if (index !== -1) {
            this.#items[index] = newValue
        }
    }
}

const array = new BetterArray()
 array.addItem('Tanvir')
array.addItem('Mamun')
console.log(array.getItems());
array.modifyItem('Tanvir', 'Shipon')
console.log(array.getItems());

The JavaScript abstraction is basically a process of hiding the implementation details and displaying only the functionality to all the users. It reduces the duplication of the code.

Polymorphism :

class Player{
    #name;
    #age 
    constructor(name, age){
        this.#name = name;
        this.#age = age 
    }
    getPlayerDetails(){
        return `${this.#name} is ${this.#age} years old. `
    };
    getName(){
        return this.#name
    }
    getAge(){
        return this.#age
    }
}

class Cricketer extends Player{
    #centuries
    constructor(name, age, centuries){
        super(name, age)
        this.#centuries = centuries
    }
    getPlayerDetails(){
        return `${this.getName()} এর বয়স  ${this.getAge()} বছর `
    };
 
}

class Footboller extends Player{
    #goals
    constructor(name, age, goals){
        super(name, age)
        this.#goals = goals
    }
}

const cricketer = new Cricketer('Tamim Iqbal', 35, 14)
const footboller  = new Footboller('Lionel Messi', 37, 100)
console.log(cricketer.getPlayerDetails());

poly means many and morphism means transforming one form into another. Polymorphism means the same function with different signatures is called many times. Programmers can use the same method name repeatedly.