CODE PAGE

OOP Code

This is ES6 code. In ES5, JavaScript used functions as classes. Now, JavaScript has a class, super, etc. keywords for more traditional OOP.

BASIC

Here is a basic class with a constructor that gets called first. It receives two parameters that get stored as public properties. There is a method called sum() that adds these. We did not need to make a class to do this - just showing the format.

class MyClass {
    constructor(a=1, b=2) { // parameters with default values
        this.a = a;  // make a property
        this.b = b;
    }
    sum() { // make a method   
        return this.a + this.b;
    }
}
const myObject = new MyClass(20); // create object from class
const total = myObject.sum(); 
console.log(total, myObject.a); // 22 20

// A second object can have its own sum.
// Each object is called an instance of the class and has its own properties
const myObject2 = new MyClass(50, 50);
const total2 = myObject2.sum(); // 100

// VERSION 2 - methods in constructor

class MyClass {
    constructor(a=1, b=2) { // parameters with default values
        // the keyword this refers to the object made
        // so the sum function will be stored on the object as a method 
        // this is handy as we have access to the parameters here
        // and that keeps the values of a and b private
        this.sum = () => { // make a method   
            return a + b;
        }
    }    
}
const myObject = new MyClass(20); // create object from class
const total = myObject.sum(); 
console.log(total, myObject.a); // 22 undefined

// VERSION 3 - private properties

const MyClass {
    #a; #b; // declare private properties
    constructor(a=1, b=2) { // parameters with default values
        this.#a = a;  // assign parameter to private property
        this.#b = b;
    }
    sum() { // make a method   
        return this.#a + this.#b;
    }
}
const myObject = new MyClass(20); // create object from class
const total = myObject.sum(); 
console.log(total, myObject.a); // 22 undefined

INHERITANCE

Here is an example of inheritance where the Sub class extends (inherits) from Base class. Other sub classes can be made that have different additions.

class Base {
	constructor () {this.public = "hello";}
	publicMethod() {console.log("wow");}	
}
class Sub extends Base {
	super(); // call the super class
	constructor () {this.public2 = "world";}
	publicMethod2() {console.log("now");}
}

const obj = new Sub(); // create object from Sub class that extends Base class
console.log(obj.public + " " + obj.public2); // hello world
obj.publicMethod();  // wow
obj.publicMethod2(); // now

OVERRIDE

Here the sub class has a method called the same as the base class. This is called overriding. We can access the base method using the super keyword that refers to the super class. This way, sub classes can act differently if desired.

class Base {
    constructor () {this.public = "hello";}
    publicMethod() {console.log("wow");}	
}
class Sub extends Base {
    super();  // call the super class
    constructor () {this.public2 = "world";}
    publicMethod() { // overrides Base publicMethod		
        console.log("like"); 
        super.publicMethod(); // calls Base's version using super
    }
}

const obj = new Sub(); // create object from Sub class that extends Base class
obj.publicMethod();   // like wow

GETTER SETTER

Getter and Setter methods are accessed like a property but run functions. It is very common to want to provide a convenient property on the outside but do a series of steps on the inside. Perhaps we want to convert a property value or constrain it to a range. Maybe we have to move things around when a property is set. Here we demonstrate a private property. This is one that can be used across the methods, but it is not directly available to the outside.

class MyClass {
    #x;  // declare a private property - only for inside the class
    constructor() {
        this.#x = 0; // set the private property
    }
    get x() {
        return this.#x; // return our private value
    }
    set x(value) { // must have one parameter
        this.#x = Math.max(0, value); // make sure x >= 0 
    }	
}
const obj = new MyClass(); 
obj.x = -15; // this calls the set method which runs the boundary check
console.log(obj.x);  // 0 as returned by the get method

STATIC

Use the static keyword to store properties or methods right on class. Like Math.random() is a static method of the Math class.

class Cake {
    static num = 0; // property that belongs to class
    constructor() {
        Cake.num++;
    }
    static getPrice() {
    return Cake.num * 20;
    }
}
new Cake();
new Cake(); // make two cakes
console.log(Cake.getPrice()); // call static method (40)
console.log(Cake.num); // or access static property (2)