Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

JavaScript Variable Scope

Understanding variable scope is very important, because if you don't use scope properly, you could end up with unexpected results and a very confusing bug. The scope of a variable refers to the parts of the code from which it is visible. JavaScript has three scopes: global, local, and closure.

A variable that is declared outside any function definition has a global scope. It can be accessed and modified from any place in your script. A variable that is declared inside a function definition has a local scope. It is created every time code execution enters the function, and is destroyed every time code execution reaches the function. It cannot be accessed by any code outside the function.

<script>
// global definition of saying
var saying = "To fail to plan is to plan to fail."
 
function sayIt()
{  
   // local definition of saying
   var saying = "The harder you work, the luckier you get.";
   document.write(saying);
}

// calling function uses local declaration
sayIt();

// outside of function uses global declaration
document.write(saying);
</script>

Output:

The harder you work, the luckier you get. 
To fail to plan is to plan to fail. 

In the code above the variable saying is declared globally and locally. The function will access its local variable. The write statement outside the function will access the global variable.

<script>
// global definition of saying
var saying = "To fail to plan"
 
function sayIt()
{  
   saying += ", the luckier you get.";
   document.write(saying);
}

sayIt();
</script>

Output:

The harder you work, the luckier you get.

In the code above the variable saying is declared globally, but since the keyword var is not used inside the function, it accesses the globally declared saying variable, modifies it, and then writes it.

<script>
var saying = "To fail to plan is to plan to fail."

function parentSayit()
{
   var saying = "The harder you work";
   function sayIt()
   {
      saying += ", the luckier you get.";
      document.write(saying);
   }
   return sayIt;
}

var x = parentSayit();
x();
</script>  

Output:

The harder you work, the luckier you get.

In the code above, the variable saying is declared globally and locally. The variable saying declared within the function is private to the function and can't be accessed outside the function. But here we have a nested function, and nested functions can access variables within its parent function. So when the nested function sayIt modifies the variable saying, it's modifying the variable declared locally within its parent. This is referred to as closure.

The purpose of defining a function inside another function is to scope it to that function. In other words, it does all its work as if the code in the parent function was the entire script. But in the code above I have the parent function return a reference to its nested function, and then I execute that outside the parent function. This is just for instructional purposes and not something you would normally do.

More Java Script Code:
• Code to Block the Ad Blockers
• Easy Java Script Timer Code
• Play Music on Your HTML5 Web Page
• Disable IE8 Accelerators on Your Website
• Prototype Keyword Gives JavaScript Object Oriented Inheritance
• How Far Did the User Scroll?
• Debugging JavaScript : Coercions
• Concatenating a String and Another Data Type
• Calculators for Your Website : Decimal to Hexidecimal Converter
• Code for Java Script Cube / Box Volume Calculator

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268