The Ultimate JavaScript Mastery Series – Part 2

Getting started

• OOP (Object-oriented programming)
  • A programming paradigm centered around objects rather than functions
  • 4 pillars
    • Encapsulation
      • Related variables and functions are combined into an objects
        • variables => properties
        • functions = > methods
    • Abstraction
      • Benefits:
        • Simpler interface
        • Reduce the impact of change
    • Inheritance
      • A way to eliminate redundant code
    • Polymorphism

Advantages of OOP

Objects

Abstraction

• Hide the implementation details and show the essentials

Private Properties and Methods

• Closure determines what variables will be accessible to an inner function
• Instead declaring the properties and methods as property, declaring them as local variable would prevent accessing from outside
• Getter & Setter

Inheritance

Enable an object to take on properties or methods from another object

• Every object in JavaScript, except one object, has a prototype or parent. It inherits all them members from its prototype.
• When accessing a property or a method on an object, JavaScript engine first looks for it first on the object itself, if nothing found, then its prototype.
• Objects created by a given constructor will have the same prototype.
• Object.getOwnPropertyDescriptor() -> attributes of the property
  • writable -> read only?
  • enumerable -> show up in the key list?
  • configurable -> able to be deleted?
• Parent (prototype) of an object is the same with its constructor.prototype
• Prototype members vs instance members
  • instance members are move accessible
  • prototype members and instance members can access each other
• Object.keys(obj) -> returns instance members
• for (let key in obj) -> returns all members (instance + prototype)
• Avoid extending built-in objects

Prototypical Inheritance

new Circle.prototype.constructor() => new Circle();

// Make Circle inherit from Shape
Circle.prototype = Object.create(Shape.prototype);
// Circle.prototype.constructor() => new Shape();

// Reset constructor
Circle.prototype.constructor = Circle;

// Call super constructor
function Shape(color) {
  this.color = color;
}

function Circle(radius, color) {
  Shape.call(this, color);
  this.radius = radius;
}

// Intermediate Function Inheritance
function extend(Child, Parent) {
  Child.prototype = Object.create(Parent.prototype);
  Child.prototype.constructor = Child;
}

// Method Overriding -> Polymorphism 


// Composition / Mixin over Inheritance
// Use mixins to combine multiple objects 
// and implement composition in JavaScript. 
const canEat = { 
    eat: function() {}
};

const canWalk = {
    walk: function() {}
};

function mixin(target, ...sources) {
    // Copies all the properties from all the source objects 
    // to the target object. 
    Object.assign(target, ...sources);
}

function Person() {}

mixin(Person.prototype, canEat, canWalk);

ES6 Classes

Syntactic sugar over prototypical inheritance.

Hoisting

• Function Declarations are hoisted while function expressions are not
• Both Class declaration and expression are not hoisted

Static Methods

Use to implement utility functions that are not tied to a particular object.

The this keyword

‘use strict’ prevent modifying global object

Private Members

Using Symbols

• Abstraction means hiding the detail and complexity, and showing only the essentials
• Symbol is essentially a unique identifier, not a constructor function

WeakMap()

Inheritance & method overriding

// Inheritance 
class Triangle extends Shape {
    constructor(color) {
        // To call the base constructor 
        super(color);
    }

    draw() {
        // Call the base method 
        super.draw();

        // Do some other stuff here
    }
}

ES6 Tooling

Module

• Benefits
  • Maintainability
  • Reuse
  • Abstract
• Module formats
  • AMD (Asynchronised Module Definition) -> Browser (RequireJS)
  • CommonJs -> Node.js
    • module.exports
    • require()
  • UMD (Universal Module Definition) -> Browser & Node.js
  • ES6 Modules -> Browser
    • export class Obj
    • import {} from ”

ES6 Tooling

Transpiler: translator + compiler

• Babel
  • babel-preset: combination of new feature plugins

Bundler