Global and Local variables in JavaScript Functions

Global and Local variables in JavaScript Functions cover image
  1. Home
  2. JavaScript
  3. Global and Local variables in JavaScript Functions

JavaScript functions help us divided our script into discrete chunks of code. Functions contain blocks of statements that can be regarded as separate entities from the main script because they are only executed when the function is called.

What are Local and Global variables?

When a function is defined certain variables used for storing values are incorporated inside the function. These variables are found and used only inside these functions. Since functions are separate from the main code, it’s advisable to use variables that are initialized only when a function is called and die when the execution comes out of the function.

Sponsored Links

Variables that exist only inside a function are called Local variables. They have no presence outside the function. The values of such Local variables cannot be changed by the main code or other functions. This results in easy code maintenance and is especially helpful if many programmers are working together on the same project.

Variables that exist throughout the script are called Global variables. Their values can be changed anytime in the code and even by other functions.

What is “variable scope”?

Local variables exist only inside a particular function hence they have Local Scope. Global variables on the other hand are present throughout the script and their values can be accessed by any function. Thus, they have Global Scope.

How to initialize a Local variable?

Any variable that is initialized inside a function using the var keyword will have a local scope. If a variable is initialized inside a function without var, it will have a global scope. A local variable can have the same name as a global variable.

var a = 10;

disp_a();

function disp_a()
   {
   var a = 20;
   alert("Value of 'a' inside the function " + a);
   }

alert("Value of 'a' outside the function " + a);

Check the code

We first declare a global variable a and assign it a value of 10. Then we call a function in which we again initialize a variable named a. Since we have used the var keyword inside the function, this variable will have a local scope. Once we come out of the function, the local variable no longer exists and the global variable takes over.

Now, let’s see how we can change the value of a global variable in a function.

var a = 10;

disp_a();

function disp_a()
   {
   a = 20;
   alert("Value of 'a' inside the function " + a);
   }

alert("Value of 'a' outside the function " + a);

Check the code

In this case, we don’t use the var keyword, hence the global variable is used inside the function.

The JavaScript “return” statement in a function

The statements in a function are executed line by line, from top to bottom. This flow of execution can be stopped by including a return statement, which causes the function to return a value, hence the statements after return are not executed. Its syntax is:

return expression

as in:

function cal_avg()
   {
   var avg = sum_total / n;
   return avg;
   }

In the above code, the value of variable avg is returned by the function.

JavaScript