Introduction
JavaScript Scope is defined as the set of variables, objects, and functions that are to be accessed. JavaScript supports function scope, which allows the scope to change inside the functions. JavaScript Scope allows a variable to change as per the requirement of the user.
Description
JavaScript Scope determines the existence of a variable. If the JavaScript Scope rules are not followed, they are not accessible outside that program. There are two kinds of variables based on scope, they are:
- Local Variables
- Global Variables
Description
The variables declared in a block of code are called as “Local Variables”. The scope of the local variable is within the block or a function only.
- Local variables cannot be accessed by other blocks.
- Local variables will be represented with the same name in different functions, as they are recognized by the function in which they are declared.
var keyword. When a variable is defined inside a function using var, variable will be destroyed as soon as the function exits.
Examples
[html]
<!Doctype html>
<html>
<head>
<title>JavaScript Tutorials</title>
<script type="text/javascript">
function helloWorld()
{
//greeting is locally declared
var greeting = "Hey!!";
greeting = greeting + " Please subscribe if you like our tutorials";
document.write(greeting);
}
helloWorld();
//greeting variable cannot be accessed as it is local variable
document.write(greeting);
</script>
</head>
<body>
</body>
</html>
[/html]
In the above example, greeting is local variable and cannot be accessed outside the function. So, write() function cannot print the result again.
Output
Description
The variables declared inside a program and outside the functions are called as “Global Variables”. The scope of the global variable exists throughout the program.
- Global variables can be used anywhere in the program.
- Once the global variable value is changed, the block that uses needs to change the variable value.
- These variable values can be even used by other programs also.
Examples
[html]
<!Doctype html>
<html>
<head>
<title>JavaScript Tutorials</title>
<script type="text/javascript">
function helloWorld()
{
//greeting is globally declared
greeting = "Hey!!";
greeting = greeting + " Please subscribe if you like our tutorials";
document.write(greeting);
}
helloWorld();
//greeting variable can be accessed here also
document.write("</br>",greeting);
</script>
</head>
<body>
</body>
</html>
[/html]
In the above example, greeting is not declared using var keyword and hence can be used globally. The output will be printed twice.
Output
More Info
Global variable names can be taken by a local variable. If one value is changed, it does not effect the value of other variable. If the variable value is changed inside the function, the local variable gets modified if it exists. Global variable gets modified if the variable value is changed outside the function.
var splessons = "This is from global variable";
function hello()
{
var splessons = "This is from local variable";
document.write(splessons};
}
//This line will modify global greeting variable
splessons + = "!!!";
hello();
document.write(splessons);
Sometimes, variable hoisting and giving the same name to the local & global variable can cause unexpected behavior.
hello();
function hello()
{
document.write(splessons);
var splessons = "Hello from local variable";
}
Due to variable hoisting, at run time the above program will look like
var greeting = "Hello from local variable";
hello();
function hello()
{
var splessons;
document.write(splessons);
splessons = "Hello from local variable";
}
Key Points
- JavaScript Scope states variable existence.
- Local variables can be accessed only within a block or function.
- Global variables can be declared and accessed anywhere.