Global and Local Variable in JavaScript


Today you will learn about Global and Local variables in JavaScript.

What is Variable?

They have a value stored in a program and:
  • Variable names must begin with a letter
  • Variable names can also begin with $ and _ (but we will not use it)
  • Variable names are case sensitive (y and Y are different variables)
There are many types of JavaScript variables, but for now, just think of numbers and strings.
When you assign a text value to a variable, put double or single quotes around the value.
When you assign a numeric value to a variable, do not put quotes around the value. If you put quotes around a numeric value, it will be treated as text.
There are two types of variables, they are:
  1. Global Variable
  2. Local Variable 

Global Variable

A global variable is one that can be accessed, whether it is retrieving the value of, or assigning a value to it, anywhere in an application. Global variables are used for variables that will need to be accessed throughout an application, like totals, file paths, etc.
As a rule of thumb, it is best to avoid using too many global variables, and instead use properties for those items you want to access in other places, providing "get" and "set" accessors so the values cannot be changed accidentally. 

Local variable

When a local variable is declared and accessed it can only be of a specified class or method. Local variables are used for variables that are only needed in a particular module/class/sub. You can have local variables with the same name in various functions because local variables are only recognized by the function in which they are declared.
Basic Example
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  5.     <title>variable</title>  
  6. </head>  
  8. <body>  
  9.     <script>  
  10.         var x = 10;  // It is a Global Variable  
  11.         function add() {  
  12.             var y = 20; //local variable  
  13.             var some = 0;//Local variable  
  14.             for (var i = x; i < y; i++) {  
  15.                 some = some + i;  
  16.                 document.write(some + "<br> ");  
  17.             }   
  18.        }  
  20.     </script>  
  21.     <input type="button" value="submit" onclick="add()" />  
  22. </body>  
  23. </html> 
After clicking the "Submit" button:
From the code above you will learn how Local Variables work. The following is another example:
  1. <script>  
  2.         var x = 10;              // It is a Global Variable  
  3.         function add() {  
  4.             var y = 20;         //local variable  
  5.             var some = 0;    //Local variable  
  6.             for (var i = x; i < y; i++) {  
  7.                 some = some + i;        //some is a local variable so it is write  
  8.                 document.write(some + "<br> ");  
  9.             }   
  10.        }  
  11.         function read() {  
  12.             var y = 30;  //Local Variable  
  13.             for (var i = x; i <= y; i++) {  
  14.                 some = some + i;           //some variable has not defend in this function. so it is not local variable. and this code is wrong....  
  15.                 document.write(some + "<br> ");  
  16.             }  
  17.         }  
  18.     </script>