« back

Beginner's Javascript-Scope

08 Oct 2012

I am pretty new to javascript. I have been working on a project where I need to do some form validations. I have been using the JQuery validation plugin for this. Most of the usage is pretty straight forward but there were a few pretty challenging scenarios for a n00b. I am still working on one of them involving enforcing uniqueness. This is requiring me to add a custom validation method using the .addMethod validator function. As I look through examples on stack overflow and other recommendations by google, I am finding 3 things. 1.There is nothing that I can find that is close enough to what I am trying to do. I find this very odd because I would assume this is something many people have had to do before. 2.The examples that I do find that have a hint of what I need seem to be much more complex than what I am looking for. 3.As I try to tinker with some of the more complex methods, causing them to break, I am forced to confront the fact that I do not understand most of what is happening. I am clearly making assumptions about what I think should happen. At ChicagoWebConf, Dayton Nolan, in his talk about Coffee Script Patterns Explained, said that "Managing scope is job number 1." As I search around, the internet seems to agree. Here are some things that I am learning along the way.

Like many other languages, javascript has global and local scope. Global scope can be referenced by any script in the current document. You can create global scope by creating a variable outside of a function. You can choose to use or not use the var keyword and it will essentially yield the same results. You can create it with the var keyword like this...

1     var greeting = "hello"; // this will be a global variable when created outside of a function.
2     

You can create it without the var keyword like this...

1       greeting = "hello"; // this will be a global variable when created outside of a function.
2     

Functions create scope but you need to be careful because you can "leak scope" after calling a function if you are not protecting your variables by using the var keyword. Sometimes you may want to do this but if you do not mean to, you can end up clobbering your previous variables or variables you are using from someone else's library. Here is an example of leaking scope...

1     var greeting = "hello"; // this is a global variable created outside of a function.
2 
3     function scope(){
4       greeting = "goodbye";  // once this function is called, your variable will leak into the global scope and will overwrite the greeting you created earlier.
5     };
6     

or

1     greeting = "hello"; // this is a global variable created outside of a function.
2 
3     function scope(){
4       greeting = "goodbye";  // once this function is called, your variable will leak into the global scope and will overwrite the greeting you created earlier.
5     };
6     

Note in the second example that the variable without the var keyword inside the function will overwrite any variable of the same name regardless of the use or non use of the var keyword.

You can protect against scope leak easily by using the var keyword inside your function.

1     greeting = "hello"; // this is a global variable created outside of a function.
2 
3     function scope(){
4       var greeting = "goodbye";  // once this function is called, your variable will remain local to your function and the original greeting you created will remain global.
5     };
6     

comments powered by Disqus