Global and Local variables in JavaScript

    Variables: It holds the data or information which can be changed anytime. JavaScript use reserved keyword var to declare variables. In JavaScript, there are two types of variable and also it tells you where in your program you are allowed to use the variables and functions that you’ve defined.

  • Local Variable:

    When you use JavaScript, local variables are variables that are defined within functions. They have local scope, which means that they can only be used within the functions that define them.

  • Global Variable:

    In contrast, global variables are variables that are defined outside of functions. These variables have global scope, so they can be used by any function without passing them to the function as parameters.



  • Local Variable: Since local variables are defined inside the function so variables with the same name can be used in different functions.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <body>
        <center>
            <h1 style="color:green;">GeeksforGeeks</h1>
      
            <p>Outside myfunction() petName is not defined.</p>
      
            <p id="Geeks"></p>
      
            <p id="geeks"></p>
      
            <script>
                myfunction();
      
                function myfunction() {
                    var petName = "Sizzer"; // local variabl
                    document.getElementById("Geeks").innerHTML =
                        typeof petName + " " + petName;
                }
      
                document.getElementById("geeks").innerHTML =
                    typeof petName;
            </script>
      </center>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

    The above example illustrates the use of a local variable. However, that a statement outside of the function can’t refer to the variable named petName without causing an error. That’s because it has local scope.

    Global Variable: Since global variables are defined outside there function so variables with the same name can not be used in different functions. All the scripts and functions on a web page can access it.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <body>
        <center>
            <h1 style="color:green;">GeeksforGeeks</h1>
      
            <p>A GLOBAL variable can be accessed from 
                                any script or function.</p>
      
            <p id="geeks"></p>
            <p id="Geeks"></p>
            <script>
                var petName = "Rocky";//global variable
                myFunction();
      
                function myFunction() {
                    document.getElementById("geeks").innerHTML =
                      typeof petName + "- " + "My pet name is " + petName;
                }
      
                document.getElementById("Geeks").innerHTML =
                   typeof petName + "- " + "My pet name is " + petName;
            </script>
      </center>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

      Where to use which variables:

    • Although it may seem easier to use global variables than to pass data to a function and return data from it, global variables often create problems. That’s because any function can modify a global variable, and it’s all too easy to misspell a variable name or modify the wrong variable, especially in large applications. That, in turn, can create debugging problems.
    • In contrast, the use of local variables reduces the likelihood of naming conflicts. For instance, two different functions can use the same names for local variables without causing conflicts. That of course, means fewer errors and debugging problems. With just a few exceptions, then, all of the code in your applications should be in functions so all of the variables are local.
    • If you misspell the name of a variable that you’ve already declared, it will be treated as a new global variable. With this in mind, be sure to include the keyword when you declare new variables and always declare a variable before you refer to it in your code.

    Note: Use local variables whenever possible.Always use the var keyword to declare a new variable before the variable is referred to by other statements.

      How to use variables:

    • The scope of a variable or function determines what code has access to it.
    • Variables that are created inside a function are local variables, and local variables, and local variables can only be referred to by the code within the function.
    • Variables created outside of functions are global variables, and the code in all functions have access to all global variables.
    • If you forget to code the var keyword in a variable declaration, the JavaScript engine assumes that the variable is global. This can cause debugging problems.
    • In general, it’s better to pass local variables from one function to another as parameters than it is to use global variables. That will make your code easier to understand with less chance for errors.


    My Personal Notes arrow_drop_up

    Team player software engineer with a can-do attitude, phenomenal time management skills, and a strong user focus Has developed several web and mobile apps

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.