Web Biz

    There has been a lot of discussion on the CFUGCNY (ColdFusion User Group of Central New York) listserv in regards to local versus global scope of variables in JavaScript.  I thought I would take this opportunity to explain the difference, the problems that arise, and how best to avoid these problems.

Local versus Global Variables

    Local variables exist only within the function they are defined and have no presence outside that function.  The value of local variables cannot be changed or retrieved by other functions, methods, objects.  And, local variables are defined by setting the value of the variable within a function using the var keyword. 

    On the other hand, global variables exist throughout the script and can be accessed and altered within any scope.  Global Variables are defined by setting the value of the variable outside any function or object without or without the var keyword, setting the value of the variable within a function or object without using any scope, or using the window scope since all global variables are stored in the window object.

Problems that may arise

    is always advisable to use the local scope for your variables within a function to avoid any problems where variable names might exist in more than one script or chunk of code - think of the variables ‘i’ that is often used as an index in enumerators.  Often times the value of global variables will be changed by other scripts that use the same global variables by not defining variables local to a function or object.  Also, if you define a local variable with the same name as a global variable, you will not be able to access the value of the global variable within that particular function.

How to solve the problem

• Don’t use generic names for variables and functions, such as ‘i’ and ‘init’,
• Try to ensure variable names are unique, or
• You can ensure the problem will not exist through the use of objects.

Objects allow you to encapsulate and share variables among function, or better called, methods withing your object (or class).  The Following example illustrates how we can ensure that we don’t confuse local and global variables through the use of objects:

^?View Code COLDFUSION

1 2 3 4 5

var test = 'global test'; var testing = { test: 'test within testing object', alerttest: function(){ test='global variable has changed'; window.alert(test); window.alert(this.test); } }

What will the two alerts be when we call the function using and onclick="testing.alerttest();"?  First, we will get the value of the global variable after being modified by the function ‘global variable has changed’, following by the value of the parameter test to the object testing ‘test within testing object’.  Furthermore, you can extend objects using JavaScript using the Object.extend method and you can  go even further by extending the capabilities of objects (and more) using the prototype.js library.