Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Variable scope in Javascript

Saturday, February 1st, 2014 by Servage

image_thumb4

 

Like other programming languages, JavaScript too has variable scope and accessing factors. This concept is very important for advanced Web Development.

There are times when you’ll want a variable that you’ve defined within a function to be available anywhere throughout your script. Other times, you may want to restrict it and make it available only to the function it lives in.

This notion of the availability of the variable is known as its scope. A variable that can be used by any of the scripts on your page is globally scoped, and a variable that’s available only within its parent function is locally scoped.

JavaScript variables use functions to manage their scope. If a variable is defined outside of a function, it will be globally scoped and available to all scripts. When you define a variable within a function and you want it to be used only by that function, you can flag it as locally scoped by preceding the variable name with the var keyword.

var foo = "value";
foo = "value";

You need to be careful about how you define variables within functions, or you could end up with unexpected results. Take the following JavaScript snippet, for example:

function double( num ){
total = num + num;
return total;
}
var total = 10;
var number = double( 20 );
alert( total ); // Alerts 40.

You may expect that because you specifically assigned a value of 10 to the variable total, the alert(total) function at the end of the script would return 10. But because we didn’t scope the total variable in the function with the var keyword, it bleeds into the global scope. Therefore, although the variable total is set to 10, the following statement runs the function and grabs the value for total defined there. Without the var, the variable “leaked out.”

As you can see, the trouble with global variables is that they’ll be shared throughout all the scripting on a page. The more variables that bleed into the global scope, the better the chances you’ll run into a “collision” in which a variable named elsewhere (in another script altogether, even) matches one of yours. This can lead to variables being inadvertently redefined with unexpected values, which can lead to errors in your script.

Remember that we can’t always control all the code in play on our page. It’s very common for pages to include code written by third parties, for example:

• Scripts to render advertisements

• User-tracking and analytics scripts

• Social media “share” buttons

It’s best not to take any chances on variable collisions, so when you start writing scripts on your own, locally scope your variables whenever you can.

This concludes our little (OK, not so little) introductory tour of JavaScript syntax. There’s a lot more to it, but this should give you a decent foundation for learning more on your own and being able to interpret scripts when you see them.

Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.