How to Create and Use JavaScript Classes [Examples]

This tutorial will explain JavaScript classes and how they relate to objects. Syntax and code examples are provided.

But first, a quick refresher on JavaScript objects.

JavaScript Objects

In JavaScript, objects are a container for a set of properties and methods.

A car, for example, could be modelled as an object. It could have properties describing the manufacturer, year it was made, and the colour.

Methods are functions which are part of the object, which when called, interact with the object in some way. A car might have a honk method which triggers an alert, or a drive method which changes its position.

var myHonda = {
    manufacturer: "honda",
    year: "2002",
    colour: "yellow"
};

Above, a JavaScript object describing a 2002 yellow Honda car is created. Objects can have any number or properties and methods.

JavaScript Classes

There is no rigid structure to objects – properties can be added and removed, or exist on some objects and not others. Classes provide a template for creating objects with a preset list of properties, and can include preset methods.

All objects created using that class will have those properties and methods available – populated with the unique values for that object

Creating/Defining Classes and Properties

Classes are a kind of function – functions that create objects.

Each class should have a constructor method. This method is called when creating an object using the class and sets the properties for the class. Properties defined in the constructor are the predefined properties for that class.

class Car {
    constructor(manufacturer, year, colour) {
        this.manufacturer = manufacturer;
        this.year = year;
        this.colour = colour;
    }
}

There are other ways to create classes, as outlined in the Mozilla Developer Network docs.

Class Methods

Methods, the functions contained within the class, can also be added in the class definition. They use standard function syntax, and can simply be listed after the constructor in the class definition.

class Car {
    constructor(manufacturer, year, colour) {
        this.manufacturer = manufacturer;
        this.year = year;
        this.colour = colour;
    }
    honk(){
        //Code to honk here
    }
    drive(direction){
        //Code to drive here
    }
}

Creating Objects from Classes

New objects are created using the new keyword followed by the name of the class, and the properties in the order they are defined in the constructor.

let myHonda = new Car("honda", "2002", "yellow");

The above will create a yellow 2002 Honda object of the class Car.

Classes are designed to be re-usable, to create consistent objects which all act the same way. You can create as many objects as you like from a class.

let myHonda = new Car("honda", "2002", "yellow");
let myToyota = new Car("toyota", "1987", "red");

Accessing an Object’s Own Properties with ‘this’ ?

As seen in the constructor functions above, when an object is referring to itself, it uses the this keyword. this does not refer to the class, but individual object of that class.

Read more about ‘this’ in JavaScript here.

Below, a new method has been added, which uses this to update the colour of the car:

class Car {
    constructor(manufacturer, year, colour) {
        this.manufacturer = manufacturer;
        this.year = year;
        this.colour = colour;
    }
    honk(){
        //Code to honk here
    }
    drive(direction){
        //Code to drive here
    }
    changeColour(colour){
        this.colour = colour;
    }
}