Introduction to Local Variable in JavaScript
A local variable in JavaScript is declared inside a block or a function. These variables are accessible within the function or block only. Furthermore, local variables are bound to their value within the local scope only. JavaScript has two types of variables, i.e. Global and Local Variables. Each type of variable works on scoping. Scoping is the one which determines the accessibility of variables. As such, JavaScript variables can hold data or any information which can be changed. In JavaScript, we use the var keyword to declare variables. The two types of variables allow users to program according to their scope.
Syntax of Local Variable in JavaScript
Syntax of local variables is not so difficult, but this is the one which we use as a programmer in our daily routine.
function sample() {
var x = <value>; //local variable
}Variables which are declared inside a function will be local to that function. Hence, Local variables have a function scope. These can only be accessed within the function scope. As Local variables have scope only to that particular function where it has been declared, variables with the same name can be declared elsewhere in various functions. These local variables are created when the function starts and are deleted when the function gets completed. Inside the body of the function, the local variable takes higher precedence over the global variable with the same names. If the user is going to declare a variable or a function parameter with the same name as that of a global variable, the latter is hidden. These local variables can not be accessed or modified outside functions declaration. Local variables are declared or used for variables that are only needed in a specific class/ module/ sub.
Examples of Local Variable in JavaScript
Given below are the examples of Local Variable in JavaScript:
Example #1
Simple local variable declaration in JavaScript.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Local Variable declaration in JavaScript</h2>
<script>
function funLocal(){
var localVar = 101;
document.write("Variable value: " + localVar);
}
funLocal();
</script>
</body>
</html>Output:
Here the variable is declared inside a function and hence is a local variable declaration.
Example #2
Local variable and global variable having the same names.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>Local variable having same name as global variable.</h1>
<script>
var empName = "Kevin";
function showEmp()
{
var empName = "Vyomesh";
document.write("Employee Name with local variable: ", empName + "<br>");
}
showEmp();
document.write("Employee Name with global variable: ", empName);
</script>
</body>
</html>Output:
So the above example shows some differences between how a global variable is declared and accessed and how a local variable can take in the same name as a global variable and be accessed inside the function scope.
Example #3
How local variables are used for calculating the sum.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Usage of local variables for addition</h2>
<script>
var a = 5;
function sum() {
var b = 10;
var sum = 0;
for (var i = a; i < b; i++) {
sum = sum + i;
document.write(sum + "<br> ");
}
}
</script>
<input type="button" value="Click Here!" onclick="sum()" />
</body>
</html>Output:
On clicking on the button:
So these are the values of looping.
Variable a is a global variable and hence can be accessed anywhere, as we have accessed it in a function along with the local variables.
Block Level Scoping: In JavaScript, there are no block-level scoping, i.e. Variables defined in if block can be accessed outside the if block but within the function.
Example #4
Block-level scoping for local variables in JavaScript.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>Variable with block level scope</h1>
<script>
function scopeVar()
{
if (200 > 20)
{
var num = 200;
}
document.write("Value: ", num);
}
scopeVar();
</script>
</body>
</html>Output:
Using these local variables reduces the conflict of naming variables. Such as, two different functions can have the same name of local variables without causing any conflict. It means few errors and few debugging problems. With just less number of exceptions, all the code should be in the form of functions so that all of the variables are local. If the user misspells the variable name that is already declared, it is taken as a new variable. And hence users need to make sure to include keywords when on declaring the new variable and can declare before referring to it in the code.
Many of the time, it is better to use local variables when possible. For example, it is better to use the var keyword to declare a new variable before it being referred to by other statements. If the user forgets to include the var keyword, that particular variable will be considered a global variable, which can cause debugging problems. It is even better to pass the local variables from one function to the other as parameters than to use them as a global variable. This is going to make code understandable with lesser chances of errors.
Conclusion
With this, we shall conclude the article “Local Variable in JavaScript”. We have seen what Local Variable in JavaScript means and its Syntax. We have also seen How Local variables are declared and how they are used in coding. We have also seen an example of the difference between Global and Local variables, which has given us a better idea to decide what type of variable declaration would be better for us as a programmer. We have also checked out an example of Block scoping of a local variable, which JavaScript does not allow inside { } brackets. And a point to remember is that both local variables and global variables can have the same names; it depends upon where these variables have been called over.