JavaScript Classes: A Beginner Guide

Introduction

JavaScript classes can be a tricky concept to understand for beginners and those new to programming. It is however not as difficult as one might think, especially if the basics are explained properly. This short guide aims to present the concept of JavaScript classes in an easy-to-understand manner.

What are JavaScript Classes?

JavaScript classes were introduced in the ECMAScript2015 (ES6) version of the JavaScript language. They are a special type of function and are templates used for creating JavaScript objects. In other words, we are able to create different types of objects from a class. Consider this example

class Student {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

The above example is a JavaScript class that can be used in creating JavaScript objects using the two properties name and age. So if we wanted to create multiple objects from the student class, this would be easy to do as so:

let student1 = new Student("Sally Mark", 14);
let student2 = new Student("Bob Victor", 19);
let student3 = new Student("Amy Frank", 15);

With only three lines of code, we have created three JavaScript objects with the help of a JavaScript class. JavaScript classes are therefore useful when trying to create many objects of the same type.

Defining JavaScript Classes

As mentioned earlier, JavaScript classes are a special type of function, and just like functions, we can either define a JavaScript class using an expression or declaration.

We can define a JavaScript class using a declaration by beginning with the class keyword, followed by the name of the class

class Employee {
  constructor(name, department, position) {
    this.name = name;
    this.department = department;
    this.position= position
  }
}

In this example, we defined an Employee class with three properties name, department and position.

We can also define a JavaScript class using an expression. A class expression can be named or unnamed. Consider this example:

// unnamed
let Employee = class {
  constructor(name, department, position) {
    this.name = name;
    this.department = department;
    this.position= position;
  }
};


// named
let Employee = class Employee2 {
  constructor(name, department, position) {
    this.name = name;
    this.department = department;
    this.position= position;
  }
};

Inside a JavaScript Class Body

Now we know a bit about the concept of JavaScript classes, let's talk about the body of a JavaScript class, that is, the code placed inside the {} braces. One of the main elements within the body of a class is the constructor keyword

Constructor in JavaScript

In every JavaScript class, there is always a constructor function. The constructor initializes the object properties and there can only be one constructor in a class. See an example below

class Car {
  constructor(brand, year, color) {
    this.brand = brand;
    this.year = year;
    this.color= color
  }
}

In the above Car class, we initialized three object properties (brand, year, and color) within the constructor so any objects we create from this class will have the three properties initialized. The constructor is called by default when a new object is created from the class.

The this Keyword

If we consider the above class example and the other class examples so far, we notice that within the constructor there is the this keyword. When you create a constructor function, you use the this keyword to reference the object properties that will be created when the constructor function is instantiated (i.e. used to create new objects). So in the above example, the this keyword is used to refer to the three object properties that will be included in every object created out of the class.

JavaScript Methods

Also found within constructor functions are class methods. A JavaScript class method is a function defined within a class; which is added to every instance of the class. Methods are used to implement functions that belong to the class and not the objects created out of the class. One of my favorite examples is this example:

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }


  area() {
    return this.width * this.height;
  }
}

const obj = new Rectangle(3, 5);
obj.area(); // 15

const obj2 = new Rectangle(5, 5);
obj.area(); // 25

In this example, the area() method is a function that calculates the area of a rectangle. The value of area() will always be different depending on the values entered when object instances were created from the Rectangle class.

Conclusion

There are other concepts within JavaScript classes that have not been mentioned here but the above should provide a basic understanding of what JavaScript classes are and what it does. If you have any questions, please feel free to ask in the comments section below.