History of classes in JS

What is a class in the programming language world?

Class gives a blueprint for creating objects, providing initial values for state (member variables) and implementations of behavior (member functions or methods)

By default almost all object-oriented languages(Python, Java, C++..) support classes. They provide a way to create objects with some state and behavior.

Example in Python:

# Class declaration
class Train:
    def __init__(self):
        self._source = ""
        self._destination = ""

    def set_source(self, source):
        self._source = source

    def set_destination(self, destination):
        self._destination = destination

    def go(self):
        print("Going from %s to %s"%(self._source, self._destination))

# Instantiation
train = Train()
train.set_source("Kadapa")
train.set_destination("Chennai")
train.go()

But Javascript doesn't have such feature in olden days before ES6. So developers came up with a pattern like below using the power of closures in the JS.

Example in Javascript - implementation 1:

// class-ish declaration
function Train() {
  var _source = ""
  var _desination = ""

  function set_source(source) {
    _source = source
  }

  function set_destination(destination) {
    _desination = destination
  }

  function go() {
    console.log(`Going from ${this._source} to ${this._desination}`)
  }

  return {
      set_source: set_source,
      set_destination: set_destination,
      go: go
    }
}

// Instantiation
train = Train()
train.set_source("Kadapa")
train.set_destination("Chennai")
train.go()

This gives same feel like other programing languages. But it is not so efficent because every intance of Train will hold entire copy of all functions and variables.

So below code is the ideal implementation developers follow in JS using the power of prototypes.

Example in Javascript - implementation 2:

// class-ish declaration
function Train() {
  this._source = ""
  this._desination = ""
}

Train.prototype.set_source = function(source) {
  this._source = source
}

Train.prototype.set_destination =  function(destination) {
  this._desination = destination
}

Train.prototype.go =  function() {
  console.log(`Going from ${this._source} to ${this._desination}`)
}

// Instantiation
train = new Train()
train.set_source("Kadapa")
train.set_destination("Chennai")
train.go()

Above code will use benifits we are getting from prototypes and function constructors in JS. So, all Train instances will have a different copy of members(source, destination) but single copy of methods for all instances.

Since we need to do this technique a lot to create a class like objects. JS core team added a class reserved keyword to the JS to make our life easier.
Under the hood it does the same thing as our prototype code. It is just syntactic sugar in javascript.

My beloved class implementation

// class declaration
class Train {
  constructor(){
    this._source = ""
    this._desination = ""
  }

  set_source(source) {
    this._source = source
  }

  set_destination(destination) {
    this._desination = destination
  }

  go() {
    console.log(`Going from ${this._source} to ${this._desination}`)
  }
}

// Instantiation
train = new Train()
train.set_source("Kadapa")
train.set_destination("Chennai")
train.go()