Global and Local Variable in JavaScript

Introduction

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

<!doctype html>
<
html>
<
head>
 
   
<title>variable</title>
</
head>
 
<body>
    <script>
        var x = 10;  // It is a Global Variable
       
function add() {
           
var y = 20; //local variable
           
var some = 0;//Local variable
           
for (var i = x; i < y; i++) {
                some = some + i;
                document.write(some +
"<br> ");
            } 
       }
       
   
</script>
    <input type="button" value="submit" onclick="add()" />
</
body>
</
html>

Output

button.jpg

After click the "Submit" button:

10
21
33
46
60
75
91
108
126
145

From the code above you will learn how Local Variables work. The following is another example:

  <script>
        var x = 10;              // It is a Global Variable
       
function add() {
           
var y = 20;         //local variable
           
var some = 0;    //Local variable
           
for (var i = x; i < y; i++) {
                some = some + i;        //some is a local variable so it is write
                document.write(some +
"<br> ");
            } 
       }
       
function read() {
           
var y = 30;  //Local Variable
           
for (var i = x; i <= y; i++) {
                some = some + i;           //some variable has not defend in this function. so it is not local variable. and this code is wrong....
                document.write(some +
"<br> ");
            }
        }
   
</script>

Next Recommended Readings