Global variables in Javascript

Global variables are evil. Although possibly nifty for very small programs it quickly clutters the global namespace and increase the risk for name collisions as are program grows larger. The risk for collisions are even greater when using different libraries and widgets.

There are three ways to define a global variable in Javascript.

The first way is to declare the variable outside of any function.

var myGlobalVar = value;

The second way is to assign it as a property to the global object, which in web browsers are the window object.

window.myGlobalVar = value;

The third way is to use it without defining it. In this case it doesn’t matter if it’s inside of a function or not. This is called implied global.

myGlobalVar = 'Hello world';

A great way to minimize the use of global variables is to store them all in one global object. By doing this you can keep all you variables and functions in one place, greatly reducing the risk for name collisions.

// Define your global object
var myObj = {};
// Add property (variable) to it
myObj.myVar = 'Hello world';
// Add method to it
myObj.myFunctions = function() {
    // Do cool stuff
};

The Javascript language was designed with global variables like this to make it easy for beginners to start coding. The side effect being that it’s easy to forget to define a variable and thereby creating bug that are hard to discover. So do yourself a favor and avoid global variables whenever possible.

About the author

Gabriel Svennerberg is an UX Designer and FrontEnd Developer living in Sweden. When he's not busy designing or building applications at Meetod, he writes about UX Design and all things web on In usability we trust. Gabriel is the author of the book Beginning Google Maps API 3 published by Apress. Gabriel on Google+
  • http://www.heavyworks.net Jan Seidl

    Yeap, objects are awesome. I think the JS frameworks are giving a new step to the language. OOP is being more and more present into a language that people underestimated for years in a row.

    Like happened to C when became C with Classes (C++), is JavaScript evolving to JS++ ?

  • http://www.svennerberg.com Gabriel Svennerberg

    Yes, a lot of things has happened with Javascript the last few years. It has changed status from being considered a second grade language to proving to be really useful. I too think the js frameworks have helped making it more useful and popular.

    The object model in Javascript is really cool. But it’s also widely misunderstood since it depends on prototypal inheritance which is not well understood by most people coming from languages with classical inheritance.

    The more I learn about Javascript, the more I like it. No doubt it contains a lot of serious flaws, like global variables. But once your recognize them you can avoid them.

  • http://mankzblog.wordpress.com Mats

    Om du gillar globala variabler kanske denna sidan är av intresse… :)

    http://mankz.com/code/globalcheck.htm

  • http://www.svennerberg.com Gabriel Svennerberg

    Mats: Well I’m not particularly fond of Global variables since they are EVIL, but that’s a pretty interesting tool you’ve built. Some libraries really do clutter the global namespace.

    Thanks for the link!

  • Pingback: Anonymous

  • http://derek1906.site50.net Derek

    You solve my problem!! thx! thx! thx! thx! !!!!!!!

  • MP

    Demonstrating how to declare global variables is only half the job! The other half is accessing them which you failed to demonstrate!

    ie: In the case of strings…

    message:myGlobalVar;

    message=myGlobalVar;

    message=’myGlobalVar’;

    message=”myGlobalVar”;

    message= var.myGlobalVar;

    Etc, etc… or should we come back next month for the second exciting episode of “Javascript… one bit at a time!”

    Javascript, is crude and archaic enough without all these internet “teachers” wasting people’s time with drips and drabs!

    If you’re gonna teach do it right or get off the airways so we can find someone who’ll CLOSE OFF a job!

    • AaronD12

      One of the uses I have for globals is when I am timing the user. I always use the method of defining the variables outside the function block, right after the script tag.

      //globals
      var hours = 0;
      var minutes = 0;
      var seconds = 0;
      function startMyTimer() {
      ++seconds;
      if (seconds== 60) { seconds= 0; ++minutes }

      … etc …

      You know, rather than complaining about the author not teaching it properly, you could do what I just did and show how it’s done. Way more effective and no complaining.

  • Jagan

    var form1= document.jaganForm;
    function1()
    {
    var txt= form1.text1.value;
    }
    function2()
    {
    var txt2=form1.text2.value;
    }
    Is this ryt?

  • Pingback: Learning Javascript « Sarfraz Ahmed's Blog

  • Tippy

    After 1 hour or so googleing and running my code i finally found this !!! Thanks for the post it helped a lot

  • cymrix

    i was thinking maybe we should not disregard global variables entirely, but rather know how to use them properly?

    either way, thank you for the post, it’s what I was looking for. :D

  • Sumit Gampawar

    storing all those variables (basically constants to refer ) in a file name globalVariables.js and then use this file in any html file throught the project by importing it in it.

    I found this as a good solution.
    I am a Java developer , now working on JQuery so was searching the same concept (Interface,Enum) fitting in Javascript