How to define Javascript Classes

Posted on 18-Jun-2021

Because Javascript is a very flexible object oriented language when it comes to syntax, there will always be multiple ways to achieve the same thing.

Let's look on some quick examples on how to create classes in javascript:

1. Javascript class using a function

Using this method, you'll define different functions and will instantiate the object using new keyword. To define properties and methods, you'll use this keyword as in the following example:

function Car(brand) {
	this.brand = brand;
    this.color = "red";
    this.getInfo = getCarInfo;
}

// antipattern. see 1.1
function getCarInfo() {
	return 'This is a ' + this.color + ' ' + this.brand;
}

To instantiate the object you'll use the following approach:

var car1 = new Car('Optimus');
car1.color = "blue";

console.log(car1.getInfo());

1.1 Internal methods

In the above example, the getInfo method was defined as a separate function getCarInfo. The code will work fine, but is not recommended since the methods will be defined in the global scope and accessible directly from anywhere and you may endup with naming conflicts. One solution would be to define the methods inside the main constructor function:

function Car(brand) {
	this.brand = brand;
    this.color = "red";
    this.getInfo = function getCarInfo() {
        return 'This is a ' + this.color + ' ' + this.brand;
    };
}

You will instantiate the object just like in the above example without any changes;

1.2 Methods added to the prototype

An issue with the getInfo() method is that it will be recreated every time you create a new object. A more efficient way is to add getInfo() method to the prototype of the constructor function.

function Car(brand) {
	this.brand = brand;
    this.color = "red";
}

Car.prototype.getInfo = function(){
	return 'This is a ' + this.color + ' ' + this.brand;
};

2. Using object literals

Literals are shorter way to define objects and arrays in JavaScript.

Normal	Short
`var a = new Object();`	`var a = {};`
`var b = new Array();`	`var b = [];`

You can skip the class-like stuff and create an instance (object) immediately.

var car {
	brand: brand,
    color: "red",
    getInfo: function() {
        return 'This is a ' + this.color + ' ' + this.brand;
    }
}

In this case, you don't need (and actually cannot) create an instance of the class because it already exists. So, you just start using it.

car.color = "blue";
console.log(car.getInfo());

3. Singleton using a function

This method is a combination of the other two ways. To create a singleton object, you'll use the following syntax:

var car = new function(){
	this.brand = brand,
    this.color = "red",
    this.getInfo = function() {
        return 'This is a ' + this.color + ' ' + this.brand;
    }
};

As a small remark, there might be use cases where you'll have to create callbacks and clousure functions in your singleton which will make difficult to work with this keyword. For this, I recommend to create local variable to refer to the this keyword of the main class:

var car = new function(){
	var self = this;

	self.brand = brand,
    self.color = "red",
    self.getInfo = function() {
        return 'This is a ' + self.color + ' ' + self.brand;
    }
};

new function(){...} does two things in the same time: define an anonymous constructor function and invoke it with new.

Tutorials

Helpers