OOP JavaScript

Continuing my breakdown of Functional Programming I’m going to go over some concepts from Object Oriented Programming using ES6.

Class & Object

  • Objects is a thing which can be seen or touched, in software we try to represent the same real-life thing with objects.
  • Object Oriented Programing is nothing but code around that object.
  • Class is not an object, it’s like a blueprint which can generate objects. So, class helps to set the classification of objects with its properties and capabilities.
  • Any number of instance can be created from a class, each instance is called Object.
class Car {
  /* Properties and Actions */
}
let figo = new Car();

console.log(typeof Car);            // function
console.log(typeof figo);           // object
console.log(figo instanceof Car);   // true

Constructor, Properties and Methods

  • A Constructor is a function that gets called automatically when you create an instance of the class.
  • Instance variables get created and initialized using constructor.
  • Instance variables are nothing but called properties of the object.
  • Methods are again functions which attached with instance and all instance created from the same class will have those methods or actions.
  • Accessing properties and methods inside class, we need this keyword.
class App {
  // constructor
  constructor(name) {
    this.name = name
  }

  // arrow function
  checkUser = (id) => {
    console.log(id)
  }
}

let myApp = new App('john');
console.log(myApp.name) // returns john
myApp.checkUser('424') // returns 424

Static Properties & Methods

The static keyword defines a static method for a class. Static methods aren’t called on instances of the class. Instead, they’re called on the class itself. These are often utility functions, such as functions to create or clone objects.

Static method calls are made directly on the class and are not callable on instances of the class. Static methods are often used to create utility functions.

class App {
  // constructor
  constructor() {
    this.name = 'john'
    console.log(App.staticMethod());
    console.log(this.constructor.staticMethod())
  }

  static staticMethod() {
    return 'static method'
  }
}

let myApp = new App();
// => static method
// => static method

Getters & Setters

With getters and setters we different things on getting a value and setting something with functions, perfect for validation.

class App {
  constructor(name) {
      this._name = name;
  }

  // getter
  get name() {
      return this._name;
  }

  // setter
  set name(val) {
      this._name = val;
  }
}

let myApp = new App('john');
console.log(myApp.name) // => john
myApp.name = 'peter' // set value
console.log(myApp.name) // => peter

Inheritance

class Meetup {
    organise() {
        console.log('Organising Meetup');
    }
    static getMeetupFounderDetails() {
        console.log("Meetup Founder Details");
    }
}

class techMeet extends Meetup {
    organise() {
        //super.organise();
        console.log('Organising techMeet');
        super.organise();
    }
    static getMeetupFounderDetails() {
        console.log("techMeet Founder Details");
        super.getMeetupFounderDetails();
    }
}

let js = new techMeet();

js.organise();
/* Output:
Organising techMeet
Organising Meetup */

techMeet.getMeetupFounderDetails();
/* Output:
techMeet Founder Details
Meetup Founder Details */

References