JavaScript ES6 Classes Explained With Examples
By: Mehdi Aoussiad
Tags: Javascript Tips, Coding, JavaScript, Web Development, Programming

JavaScript ES6 Classes Explained With Examples

Photo by James Harrison on Unsplash

Introduction

ES6 classes are templates for creating JavaScript objects. They encapsulate data with code to work on that data. However, JavaScript classes are nothing but just syntactic sugar over existing prototype-based inheritance and constructor functions.

In this article, we will learn about ES6 classes in JavaScript with some practical examples. Let’s get right into it.

Class syntax

To create a JavaScript class, we declare the keyword class with a method constructor inside of it. This constructor method is invoked when the keyword new is called to create a new object.

Here is an example:

class UserInfo {

constructor(name, age) {

this.name = name;

this.age = age;

}

} const newUser = new UserInfo("Mehdi", 19);

As you can see, we defined a class UserInfo with a constructor. Then we used the keyword new to invoke the constructor in order to create our object newUser .

Notice that UpperCamelCase should be used by convention for ES6 class names, as in UserInfo used above.

Adding methods to a class

Class methods are created with the same syntax as object methods. You can add as many methods as you want to your class.

class ClassName {

constructor() { ... }

method_1() { ... }

method_2() { ... }

method_3() { ... }

}

}

Here is an example below:

class UserInfo {

constructor(name, age) {

this.name = name;

this.age = age;

}



fullName(){

return this.name + ' Aoussiad';

} }

const newUser = new UserInfo("Mehdi", 19); // We can access the method fullName as we do with objects.

console.log(newUser.fullName()); // Mehdi Aoussiad

After creating the object with the keyword new you can access your method as we do with objects. You can also send parameters to your class methods if you want.

Static methods

A static method is a function defined within a class that can be accessed without creating a new object of that class. Since static methods are defined on the class level, you can call them directly using the class name.

In JavaScript, you must use the static keyword to define a static method:

class UserInfo {

constructor(speed, age) {

this.speed = speed;

this.age = age;

}



static information(info){

return new UserInfo(info, info);

} }

const information = UserInfo.information(20);

information.speed; // 20

information.age; // 20

Class Inheritance

A class created with a class inheritance inherits all the methods from another class. To create a class inheritance, use the extends keyword.

Have a look at the example below where we will create a class named “Model” which will inherit the methods from the “Car” class.

class Car {

constructor(brand) {

this.carname = brand;

}

present() {

return 'I have a ' + this.carname;

}

}



class Model extends Car {

constructor(brand, mod) {

super(brand);

this.model = mod;

}

show() {

return this.present() + ', it is a ' + this.model;

}

}



let myCar = new Model("Ford", "Mustang");

As you can see, the keyword extends is used to ensure that we want to inherit the properties and methods of the parent class. The method super() refers to the parent class. By calling it, we get access to all the properties and methods of the car class(parent class).

Class Hoisting

Classes in JavaScript are not hoisted which means you can not use a class before declaring it.