Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Local and global variables in javascript

Suggested Videos
Part 23 - Creating two dimensional array in javascript
Part 24 - Functions in JavaScript
Part 25 - Different ways of defining functions in JavaScript



In JavaScript there are 2 types of variables
1. Local variables
2. Global variables



JavaScript local variables : Local variables are the variables declared with in a function. These variables have local scope meaning these are available only inside the function that contains them. Local variables are created when a function starts, and deleted as soon as the function completes execution.

function helloWorld()
{
    var greeting = "Hello";
    // The variable greeting is available in the function
    greeting = greeting + " JavaScript";
    alert(greeting);
}

helloWorld();

// The variable greeting is not available outside the function
// Error : 'greeting' is undefined

alert(greeting);

JavaScript global variables : Global variables are the variables declared outside a function. Global variables have global scope meaning all scripts and functions on the page can access them. The lifetime of a global variable starts with it's declaration and is deleted when the page is closed.

var greeting = "Hello";

function helloWorld()
{
    // The variable greeting is available in the function
    greeting = greeting + " JavaScript";
    alert(greeting);
}

helloWorld();

If you assign a value to a variable that has not been declared, it will automatically become a global variable, even if it is present inside a function.

function
helloWorld()
{
    // The variable greeting is not declared but a value is assigned.
    // So it will automatically become a global variable
    greeting = "Hello JavaScript";
}

helloWorld();

// Variable greeting is available outside the function

alert(greeting);

A local variable can have the same name as a global variable. Changing the value of one variable has no effect on the other. If the variable value is changed inside a function, and if a local version of the variable exists then the local variable gets modified. If the variable value is changed outside a function then the global variable gets modified.
var
greeting = "This is from global Variable";

function helloWorld()
{
    var greeting = "This is from local variable";
    document.write(greeting + "<br/>");
}

// This line will modify the global greeting variable
greeting += "!!!";

helloWorld();

document.write(greeting);

Output : 
This is from local variable
This is from global Variable!!! 

Sometimes, variable hoisting and local & global variable with the same name can cause unexpected behavior.
var
greeting = "This is from global Variable";
helloWorld();

function helloWorld()
{
    document.write(greeting);
    var greeting = "Hello from local variable"

}

Output :
undefined

At runtime due to variable hoisting, the above program would look more like as shown below.
var
greeting = "This is from global Variable";
helloWorld();

function helloWorld()
{
    var greeting;
    document.write(greeting);
    greeting = "Hello from local variable"

}

Braces do not create scope in JavaScript : In the following example otherNumber is a global variable though it is defined inside braces. In many languages like C# and Java, braces create scope, but not JavaScript.
var
number = 100;

if (number > 10) 
{
    var otherNumber = number;
}

document.write(otherNumber);

Output : 100

JavaScript tutorial

No comments:

Post a Comment

It would be great if you can help share these free resources