JavaScript Classes - The Complete Guide

A class in JavaScript is a special function that defines a blueprint or template for creating objects. You can use the class keyword to declare a class. A class can have properties and methods shared by all class instances. A class can also have a constructor method that initializes the object when it is created.

Syntax

class ClassName {
  constructor() { ... }
}

JavaScript classes introduced in ECMAScript 2015 or ES6 are primarily the syntactical sugar over JavaScript, an existing prototype-based inheritance. The class syntax does not introduce the new object-oriented inheritance model to JavaScript.

Example

To define the class is by using the class declaration. For example, if we want to declare a class, we use the class keyword with the name of the class (“Employee” here).

class Employee {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

In the above code, we have defined the class and the constructor, which are parameterized.

A significant difference between function declarations and class declarations is those function declarations are hoisted, and class declarations are not. Therefore, you must declare and access your class; otherwise, the code will throw a ReferenceError.

Class expressions

A class expression is another way to define the class.

Class expressions can be named or unnamed.

A name given to the named class expression is local to that class’s body.

let Employee = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
console.log(Employee.name);

The above code will output the Employee. The name is the property of the Class Employee.

Class body and methods

A class’s body is a part of the curly brackets {}. This is where you define all the class members, such as methods or constructors.

Strict mode

The body of a class is executed in the strict mode, i.e., code written here is subject to the more stringent syntax for increased performance, some otherwise silent errors will be thrown, and specific keywords are reserved for the future versions of ECMAScript.

Constructor

The constructor method is unique for creating and initializing the object created with the class. There can only be one unique method named “constructor” in a class. The constructor can use the super keyword to call the superclass constructor.

See the following example.

class Employee {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  // Getter
  get name() {
    return this.fullName();
  }

  // Method
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

const e1 = new Employee('Krunal', 'Lathiya');
console.log(e1.name);

In the above example, we have created the constructor, getter property, and js method.

Then we created an object from the class, passed the parameter to the parameterized constructor, and used the getter property to fetch the name from the name() function and display it to the console.

One thing you note here is that we have called the name property and not a method. It is because the getter is the property and not the method.

So, in the output, we will get the name in the console.

Static methods in Javascript Class

The static keyword defines the static method for the class. Static methods are called without instantiating their class and cannot be called through a class instance.

Static methods are often used to create utility functions for the application.

class Employee {
  static power(a, b) {
    return Math.pow(a, b); 
  }
}

console.log(Employee.power(8, 2));

Output

Subclassing with extends

The extends keyword is used in the class declarations or class expressions to create a class as a child of another class.

class Person {
  constructor(name) {
    this.name = name;
  }
}

class Employee extends Person {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }
 info() {
    console.log(`The Employee Name is: ${this.name}`);
 }
}

let epl = new Employee('Krunal');
epl.info();

Output

If a constructor is present in a subclass, it must call super() before using “this”. Note that classes cannot extend the regular (non-constructible) objects.

That’s it.

JavaScript Classes – The Complete Guide