Create And Use Static Variables In JavaScript

In programming languages like C, C++, static variables are variables that maintain their value between function calls. Unlike these programming languages, JavaScript doesn’t support static variables. It doesn’t provide static keywords. But using a small tip, we can implement function static variables in JavaScript and use them for our purposes.

Note: If you just get started with JavaScript, check out the collection of best free resources to learn JavaScript.

The tip is simple, just remember that in JavaScript a function is also an object. An object, of course, can have its own methods and properties. So, why don’t we store our function variables as object’s properties? Let’s see an example:

function foo() {
    // do something

    // call to static variable
    alert(foo.staticVar);
}

// initialize value of static variable
foo.staticVar = 'some value';

foo(); // alert 'some value'

The staticVar in this example is defined outside function body, so its value isn’t destroyed when function call finished. If we call function foo() again, it still alerts ‘some value’.

We can change value of static variables in function body. This is useful when static variable is used for counting. Let’s see an example:

function count() {
    alert(count.num);
    count.num++;
}

// initialize count number
count.num = 0;

foo(); // alert 0
foo(); // alert 1

As we see, each function call will increase the count number to 1, and store it into count.num. In this case, count.num plays role of static variables as in other programming languages.

Hope this small tip can help you work with static variables in JavaScript and if you have a better approach, please let me know in the comments.

Techno Tip: Did you know that software developers stay 24*7 productive by moving their software development and testing environment into the cloud with virtual PCs by CloudDesktopOnline. If you prefer a server, Rent a server at affordable prices from one the best DaaS providers – Apps4Rent.

5 thoughts on “Create And Use Static Variables In JavaScript

  1. the above code works for multiple calls .but i want to maintain the variable after refreshing pages.can u please help me in this way..thank you.

    1. When you refresh the page, all the javascript code will be reloaded and executed again. There’s no way to maintain variable like this. You might want to find another approach, like ajax.

Comments are closed.

Newsletter

Subscribe to our newsletter to receive news and tutorials about WordPress and web development.

Meta Box - Creating expert WordPress custom fields and custom meta boxes in minutes! Check it out →