Post
Ask Question

Scope of Variable in JavaScript

Introduction

 
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 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.
  1. <form id="form2" runat="server">    
  2. <script>    
  3.    var a = 10;    
  4.    {    
  5.       var b = 100;    
  6.    }    
  7.    var c = a + b;    
  8.    alert(c);    
  9. </script>    
  10. </form> 
This is the 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.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>    
  2. <!DOCTYPE html>    
  3. <html xmlns="http://www.w3.org/1999/xhtml">    
  4. <head id="Head1" runat="server">    
  5. </head>    
  6. <body>    
  7.     <form id="form2" runat="server">    
  8.         <script>    
  9.                 var value1 = function () {    
  10.                 var a = 100;    
  11.                 var value = function () {    
  12.                 alert("Value of a is:- " + a);    
  13.              }    
  14.              value();    
  15.          };    
  16.          var abc = value1();    
  17.        </script>    
  18.     </form>    
  19. </body>    
  20. </html>   
Output
 
Nested function scope in JavaScript
 

Conclusion

 
In this article, we have learned about the various scopes of JavaScript code blocks. I hope you have understood them, though the concept is very similar to for the entire C family of languages. Follow this series to learn more cool stuff about JavaScript.


Similar Articles