Global variables in JavaScript

It’s normal to get caught in the web of global variables, while working with JavaScript. Global variables tend to make the code less readable and maintainable. Douglas Crockford suggests a pattern that can be used to maintain global variables in our code.

Let’s say you have the following code.

var userName = "";
var password = "";
var userType = "";

function loadCredentialsFromLocalStorage(){
 userName = localStorage.getItem("userName");
 password = localStorage.getItem("password");
 userType = localStorage.getItem("userType");
}

The global variables userName, password and userType variables can be written as:

var AGLOBALNAMESPACENAME = {}; 
AGLOBALNAMESPACENAME.user = {
               userName : "", 
               password : "", 
               userType : ""
           }; 

function loadCredentialsFromLocalStorage(){
 AGLOBALNAMESPACENAME.user.userName = localStorage.getItem("userName");
 AGLOBALNAMESPACENAME.user.password = localStorage.getItem("password");
 AGLOBALNAMESPACENAME.user.userType = localStorage.getItem("userType");
}

In the code above, you can create a variable giving it a Global namespace name and have all the ‘actual’ global variables assigned to it. The declaration of the global variables can be moved to a separate file as well. Hence the code becomes lot more readable and easy to maintain.