Static Variables in Javascript

Static variables in JavaScript

When working with JavaScript, you may come across situations where you need to create variables that retain their values across multiple function calls or instances of an object. These variables are known as static variables. In other programming languages like C++ or Java, static variables are easy to define, but in JavaScript, it requires a different approach.

Method 1: Using closures

One way to create static variables in JavaScript is by using closures. A closure is a function that has access to variables from its outer scope, even after the outer function has returned. By leveraging closures, we can simulate static variables.

Here’s an example:

function counter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  }
}

const increment = counter();

increment(); // Output: 1
increment(); // Output: 2
increment(); // Output: 3

In the above code, the counter function returns an inner function that has access to the count variable. Each time the inner function is called, it increments the count variable and logs its value.

Method 2: Using ES6 classes

With the introduction of ES6 classes, static variables can be defined using the static keyword. Static variables defined in a class are shared among all instances of the class.

class Counter {
  static count = 0;

  increment() {
    Counter.count++;
    console.log(Counter.count);
  }
}

const instance1 = new Counter();
const instance2 = new Counter();

instance1.increment(); // Output: 1
instance1.increment(); // Output: 2

instance2.increment(); // Output: 3
instance2.increment(); // Output: 4

In the above code, the count variable is defined as a static variable using the static keyword. It is accessed using the class name Counter instead of an instance of the class. This allows the variable to be shared among all instances of the class.

Conclusion

Static variables in JavaScript can be achieved using closures or through the static keyword in ES6 classes. Closures provide a way to simulate static variables by leveraging the concept of lexical scoping, while ES6 classes offer a more straightforward approach to defining and accessing static variables.

It’s important to choose the method that best suits your use case and coding style. Both methods provide a way to create static variables in JavaScript, allowing you to retain values across function calls or instances of an object.

Remember to use static variables judiciously and consider the potential impact on code readability and maintainability.

Static Variables in Javascript