Global and Local Variable in JavaScript

In this article, we learn about global and local variables in JavaScript.

What is a 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, think of numbers and strings. 
  • When you assign a text value to a variable, put double or single quotes around the value.
  • Do not put quotes around the value when you assign a numeric value to a variable. If you put quotes around a numeric value, it will be treated as text.

There are two types of variables, they are:

  • Global Variable
  • Local Variable 

Global Variable

A global variable can be accessed, whether 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 only needed variables 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>

button.jpg

After clicking 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> 

Summary

In this article, we learned about global and local variables in JavaScript.