Posted on Apr 12, 2022

Object Oriented Programming

OOP is a programming paradigm (a way of coding) that’s used to organize software into reusable pieces of code through classes and objects. You can think of a class as a template or building block for your code, that contains methods and properties common to certain objects that you can extend to create what you need.

Here is an example:

class Developer {
    constructor(name, language) {
        this.name = name;
        this.language = language;
    }

    getDeveloperProfile(){
        return `${this.name} can code in ${this.language}`
    }
}

class FrontendDev extends Developer {
  constructor(name, language, framework) {
    super(name, language); 
        this.framework = framework;
  }

  getFramework() {
    console.log(`${this.name} is a ${this.language} developer and knows ${this.framework}.`);
  }
}

let frontendDeveloper = new FrontendDev('Anna', 'Javascript', 'React');
frontendDeveloper.getFramework(); // Anna is a javascript developer and knows React

There are some basic principles when coding in OOP:

Encapsulation

When talking about encapsulation, we refer to grouping up functions and variables that are related in objects.

Let’s refactor some code into OOP.
Here’s our starting point:

const bookName = 'Steppenwolf'
const bookAuthor = 'Herman Hesse'
const bookYear = 1927

function getBookInfo(name, author, year) {
    return `The book ${name} was written by ${author} in ${year}`
}

getBookInfo(bookName, bookAuthor, bookYear);

OOP way:

const book = {
    name: 'Steppenwolf',
    author: 'Herman Hesse',
    year: 1927,
    getInfo: function() {
        return `The book ${name} was written by ${author} in ${year}`
    }
}

book.getInfo();

Abstraction

When talking about abstraction in OOP, we refer to exposing the properties and methods that we are actually going to be using and leaving the inner working hidden. This makes the usage of the object much easier and lets you make changes easier.

For example:

class Developer {
    constructor(name, language) {
        this.name = name;
        this.language = language;
    }

    #ratePerHour = 30 // private variable
    #totalMonthlyHours = 160 // private variable

    getDeveloperProfile(){
        const salary = this.#ratePerHour * this.#totalHours;
        return `${this.name} can code in ${this.language}`
    }

    getDeveloperSalary() {
        const totalSalary = this.#ratePerHour * this.#totalMonthlyHours;
        return `The salary for a developer is ${totalSalary}usd per month`
    }
}

In this case, we can’t access totalHours and ratePerHour variables outside of our class, but if we call getDeveloperSalary() we will get the total amount calculated.

Inheritance

Inheritance is what allows us to remove repeated code and share properties and methods between objects.

For example, a button and a div are both html elements (HTMLElement) and the both have a hidden property and a click() method.

When talking about prototype inheritance, we are referring to a javascript feature that allows to add methods and properties, and that can be chained as well (a prototype can have a prototype, and so on).

Polymorphism

Polymorphism allows us to overwrite methods and properties from a previous object. For example, let’s imagine for a second that all plants need a 100

const book = function () {}

book.prototype.amountOfPages = function() {
   return "a book has many pages"
}

const novel = function() {}
novel.prototype = Object.create(book.prototype);
novel.prototype.amountOfPages = function() {                 
   return "a book has many more pages!"
}