JavaScript Static Keyword

Static is a very special keyword in javascript. In another language, it’s used for memory management. Let’s take an example to understand. Suppose that you have a Student class and students can be related with different courses and their college name is the same but are we creating a variable inside the class every time? If we create an instance of that class then it will automatically create that variable but if we use the static property or keyword then it will create only once for all instances of that class.

class Student {
    constructor(name) {
        this.name = name;
        this.clg = "Xyz"; // should not create multiple times
    }
}

var s1 = new Student("Alex");
var s2 = new Student("Bob");

Here you can see Alex and Bob both are in the same colleges but when we are creating instances for s1 and s2 variables both are creating new variable “clg” so that is not a good practice because if you have more students then every time your will create a new variable for that. So that is why we use static.

Static variables and methods related to the class. So it will not create another copy for the new object of the class. So if we change the static variable all class objects automatically change.

Before es6 we don’t have any keyword in Javascript to manage static but in the es6 version, we have the static keyword.

We can use static keyword with class variable and class method. Let’s take an example but before to understand this article you need to go through with our Classes and Inheritance article.

How to use static variable

class Student {
    static clg = "Xyz";
    constructor(name) {
        this.name = name;
    }
}

console.log(Student.clg); // Xyz

var s1 = new Student("Alex");
var s2 = new Student("Bob");

Here you can see how we use static variables inside a class. We are not using s1, s2 variables to access Alex and Bob’s college names. So if we create a static variable then that variable hold inside the class prototype. That’s why it will not create a copy of the “clg” variable every.

Now comes on the second scenario where we will use the static method. Static methods that can work or use like util function.

How to use static method

class Student {
    constructor(firstname, lastname, numbers) {
        this.firstname = firstname;
        this.lastname = lastname;
        this.numbers = numbers;
    } 

    static calculate(stu) {
        
        for (var i = 0, sum = 0; i < stu.numbers.length; i++) {
            sum += stu.numbers[i];
        }

        return `Hey, ${stu.firstname} ${stu.lastname} yo got ${sum} numbers.`;
    };
}

var s1 = new Student("John", "Doe", [89, 60, 50, 40, 85, 73]);
var s2 = new Student("Alex", "Davis", [90, 62, 53, 44, 85, 79]);

console.log(Student.calculate(s1)); // "Hey, John Doe yo got 397 numbers."
console.log(Student.calculate(s2)); // "Hey, Alex Davis yo got 413 numbers."

Here we have the “calculate” method and it gives us the sum of student numbers. You can clearly see that it is a static function and the instance variable is not calling this function. We are calling with class.