JavaScript Classes Overview

javascript_classes_overview.js

"use strict";

// Imperative way
let rect1 = {a: 50, b: 30};

let calculateRectArea = (rect) => {
    return rect.a * rect.b;
}

console.log(calculateRectArea(rect1));

// Object oriented way (plain objects)
let rect2 = {
    a: 50,
    b: 30,
    calculateArea: function () {
        return this.a * this.b;
    },
};

console.log(rect2.calculateArea());

// Create another rectangle without reimplementing calculateArea
let rect3 = Object.create(rect2, {a: {value: 60}, b: {value: 40}});

rect2.a = 60;
rect2.b = 40;

console.log(rect3.calculateArea());
console.log(rect2.calculateArea());

// Create a square with plain objects, huh?!
let square1 = Object.create(rect2, {a: {value: 15}, b: {value: 15}});

console.log(square1.calculateArea());

// Another square, wait...
let square2 = Object.create(square1, {a: {value: 20}, b: {value: 19}});

console.log(square2.calculateArea());

// Check if is square (explicit function syntax is required for "this")
square1.isSquare = function() {
    return this.a === this.b;
};

console.log(square1.isSquare());

square2 = Object.create(square1, {a: {value: 20}, b: {value: 19}});

console.log(square2.isSquare());

// What?! But... BUT!!!
let square3 = Object.create(square1, {a: {value: 0.1 * 0.2}, b: {value: 0.02}})

console.log(square3.isSquare());

// There's also another way of "extending" other objects
let square4 = {a: 40, b: 40, __proto__: rect2}

console.log(square4.calculateArea());

// Object oriented way, the function syntax
function RectFn(a, b) {
    // implicit: let this = {};

    this.a = a;
    this.b = b;

    this.calculateArea = function () {
        return this.a * this.b;
    }

    this.isSquare = function () {
        return this.a === this.b;
    }

    // implicit: return this;
}

let rect4 = new RectFn(20, 50);

console.log(rect4.calculateArea(), rect4.isSquare());

// Extend it using prototype chain
function SquareFn(a) {
    RectFn.call(this, a, a);

    this.isSquare = function() {
        return true;
    }
}

let square5 = new SquareFn(25);

console.log(square5.calculateArea(), square5.isSquare());

// Object oriented way (>= ECMA Script 6)
class Rect {
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }

    get area() {
        return this.calculateArea();
    }

    set values(obj) {
        this.a = obj.a;
        this.b = obj.b;
    }

    calculateArea() {
        return this.a * this.b;
    }

    isSquare() {
        return this.a === this.b;
    }
}

let rect5 = new Rect(50, 30);

console.log(rect5.area, rect5.isSquare());

rect5.values = {a: 15, b: 15};
console.log(rect5.area, rect5.isSquare());

class Square extends Rect {
    constructor(a) {
        super(a, a);
    }

    isSquare() {
        return true;
    }
}

let square6 = new Square(10);

console.log(square6.area, square6.isSquare());