Design Patterns - JavaScript - Classes and Objects

In this tutorial we will learn to create classes and objects in JavaScript that will help in design patterns.

Classes and Objects in JavaScript

JavaScript got the class keyword in ES2015. Till then we were using the function keyword to create classes.

The class keyword is primarily a syntactical sugar over existing prototype-based inheritance.

To instantiate an object we use the new keyword.

Using the function keyword to create classes

Since JavaScript before ES2015 (ES6) was without the class keyword so, to create classes we used the function keyword. The this keyword helped in setting properties and method of the object.

In the following example we are creating a Box class using the function keyword.

// the Box class
function Box(length, breadth, height) {
  // properties
  this.length = length;
  this.breadth = breadth;
  this.height = height;

  // methods
  this.getVolume = function() {
    return this.length * this.breadth * this.height;
  };
}

// creating object of the Box class
var box = new Box(10, 20, 30);

console.log(box.getVolume());      // 6000

Following are the points to keep in mind when creating classes using the function keyword in JavaScript.

• We start the name of the class using capital letter.
• We instantiate (create object) using the new keyword.
• Properties and methods are added and are accessed using the this keyword.

We can also add the method getVolume to the constructor's prototype like the following.

// the Box class
function Box(length, breadth, height) {
  this.length = length;
  this.breadth = breadth;
  this.height = height;
}

// method added to the Box's prototype
Box.prototype.getVolume = function() {
  return this.length * this.breadth * this.height;
};

// creating object of the Box class
var box = new Box(10, 20, 30);

console.log(box.getVolume()); // 6000

Using the class keyword to create classes

With ES6 we get the class keyword, a syntactical sugar, to create classes in JavaScript.

In the following example we are creating Box class using the class keyword.

// the Box class
class Box {
  // constructor to set initialise the object
  constructor(length, breadth, height) {
    this.length = length;
    this.breadth = breadth;
    this.height = height;
  }

  getVolume() {
    return this.length * this.breadth * this.height;
  }
}

// creating object of the Box class
var box = new Box(10, 20, 30);

console.log(box.getVolume());    // 6000

Following are the points to keep in mind when creating classes using the class keyword in JavaScript.

• Start the name of the class using uppercase letter.
• Instantiate using the new keyword.
• Use the constructor keyword to initialise object.
• Use the this keyword to access properties and methods inside the class.

Prototypal inheritance in JavaScript

In the following example we are going to create Cube which will inherit the Box.

// the Box class
function Box(length, breadth, height) {
  this.length = length;
  this.breadth = breadth;
  this.height = height;
}

// method added to the Box's prototype
Box.prototype.getVolume = function() {
  return this.length * this.breadth * this.height;
};

// the Cube class that inherits the Box
function Cube(side) {
  // calling the Box's constructor
  Box.call(this, side, side, side);
}

// inheriting the methods from Box's prototype
Cube.prototype = Object.create(Box.prototype);

// creating object of the Cube class
var cube = new Cube(10);

console.log(cube.getVolume()); // 1000

In the above code the Cube class inherits the properties and methods of the Box class.

We use the call method to call the Box constructor from the context of Cube.

We use the Cube.prototype = Object.create(Box.prototype); to inherit the method defined on Box's prototype.

Using extends keyword to inherit in JavaScript

In the following example we are using the extends keyword to inherit.

// the Box class
class Box {
  // constructor to set initialise the object
  constructor(length, breadth, height) {
    this.length = length;
    this.breadth = breadth;
    this.height = height;
  }

  getVolume() {
    return this.length * this.breadth * this.height;
  }
}

// the Cube class inherits the Box
class Cube extends Box {
  constructor(side) {
    // calling the Box's constructor
    super(side, side, side);
    this.side = side;
  }
}

// creating object of the Cube class
var cube = new Cube(10);

console.log(cube.getVolume()); // 1000

With ES6 we have the extends keyword to inherit classes in JavaScript.