This is the Advanced JavaScript article series, this series explains many topics of JavaScript. We have covered many important concepts here; please visit those links to understand them.
In this article we will learn about the various scopes of variables in JavaScript. I hope we all know the basic concepts of scope in programming languages. In general thin, we implement scope to protect and separate our data. Actually scope creates a block in an application. Within this block we can perform our local operations without affecting the code of some other portion.
In JavaScript we obviously create scope and declare a variable (and code) within it. We will now see the accessibility of variables in a scope. There are generally three kinds of scopes. We will see them one by one with examples.
Function scope
When we declare a variable within a function the scope of the variable becomes that function. If we try to access it outside the function, it will not be accessible. In the following example, we are trying to access "b" outside of fun1(), where "b" is defined within fun1().
![Function Scope in JavaScript]()
So, for the purpose of the function's scope, the accessibility of the variable is within this function only. From outside of that function it will not be accessible.
Block scope
This is a very well known and common scope in program development. In JavaScript, if we declare a variable within a block then it will be accessible from outside of that block. Try to understand the following code.
![Block Scope in JavaScript]()
We are seeing that, "b" has been defined within one block ({} brackets) and from outside of the block, it is accessible. Here is sample code for the same.
<form id="form2" runat="server">
<script>
var a = 10;
{
var b = 100;
}
var c = a + b;
alert(c);
</script>
</form>
This is sample output of the code above.
![Block Scope example in JavaScript]()
Nested function scope
This is another scope in JavaScript. The beauty of JavaScript is that, we can define a function within another function. So, the concept of an inner function and outer function exists. If we define a variable within an outer function then it will be accessible from the inner function. Here is a sample example.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body>
<form id="form2" runat="server">
<script>
var value1 = function () {
var a = 100;
var value = function () {
alert("Value of a is:- " + a);
}
value();
};
var abc = value1();
</script>
</form>
</body>
</html>
The output is:
![Nested function scope in JavaScript]()
Conclusion
In this article we have learned about the various scopes of JavaScript code blocks. Hope you have understood them, though the concept is very similar as for the entire C family of languages. Follow this series to learn more cool stuff of JavaScript.