OOP (JavaScript - Mosh)

OOP using JavaScript.md

Object Oriented Programming In JavaScript

A programming paradigm centered around object rather than functions. An essential skill for every developer.

If a candidate has OOP on his resume he/she stands out because most of the languages are centered around OOP.

4 Pillars of OOP ->

• Encapsulation
• Abstraction
• Inheritance
• Polymorphism

Before OOP we had PROCEDURAL PROGRAMMING. The issue with this kind of programming was that while programming we usually copied lots of code and changing a single part of the code would break the code. So, to overcome this issue solution was OOP.

Encapsulation

In OOP we group related variable and functions that operate on them into objects and this is what we call encapsulation

// Procedural way
let baseSalary = 30000;
let overtime= 10;
let rate= 20;

function getWage(baseSalary, overtime, rate) {
    return baseSalary + (overtime * rate);
}

// Object Oriented Way
let employee = {
    baseSalary: 30000,
    overtime: 10,
    rate: 20,
    getWage: function() {
        return this.baseSalary + (this.overtime * this.rate);
    }
};

employee.getWage();

"The best functions are those with no parameters!!" - Uncle Bob - Robert C Martin

The fewer the parameters easier it is to maitain the function.

Abstraction

In this kind some of the object are hidden from others so that nothing else can neither affect them nor change them from other like 'private'.

Benifits -

• Simple Interface.
• Reduce the impact of change.

Inheritance

This is a mechanism that allows you to eliminate redundant code.

Polymorphism

• Poly -> many , morph -> form

It is a technique that allows you to get rid of long 'if/else' and 'switch/case' statements.

Encapsulation - We group related variables and functions together hence reducing complexcity + increase reusability.

Abstraction - Hide the details and complexcity and show the essentials hence reducing complexcity + isolate impact of changes.

Inheritance - Eliminate redundant code.

Polymorphism - Refactor ugly switch/case statements.

Setting up the development environment

Object Literals

Theirs a difference between properties and methods. Methods are those properties that are defined as functions.

JavaScript does NOT have 'class'.

Constructor

// Factory function
function createCircle(radius) {
    return {
        radius,
        draw: function() {
            console.log('draw');
        }
    }
}

const circle = createCircle(2);


// Constructor function
function Circle(radius) {   // <- the Constructor name must use Pascal notaiton
    this.radius = radius;
    this.draw = function() {
        console.log('draw');
    }
}

const another = new Circle(2); // <- 'new' hear create a new empty object such as {}

Constructor property

Every object in JavaScript has a constructor property, which points to the function or constructor that was used to create the object.

let x = {};
// let x = new Object();
new String() // '', "", ``
new Boolean() // true, false
new Number() // 1, 2, 3, 4, ...

Functions are Objects

Values Vs Reference types

Primitives are copied by their value. Objects are copied by their reference.

Adding or Removing properties

if you want to make a function as private declare it as

let function() {}  // this is a private function.
this.fucntion() {} // this is a public function.

Getters/Setters

Getters - These are used when a private property is required. Setters - These are used when a private property is to be changed.

Object.defineProperty(this, defaultLocation, {
    get: function(){
        return defaultLocation;
    },
    set: function(value) {
        if (!value.x || !value.y) 
            throw new Error(Invalid value);
        defaultLocation = value;
    }
})