alt text
Benjamin Thomson
Web & UX Designer

Drink A Coffee With Me Today

Loading...
Success!
Error!

Follow On Instagram

Mayank Gupta (+91-9711083089)
Menu
Close

Scopes in JavaScript

It is important to understand the concept of scopes in JavaScript.
Scope help us determine the availibility and accessibility of variable.

There are basically 2 different scopes in JavaScipt:

1. Global Scope

2. Function Scope


Variable Declaration and Definition

Lets first understand the concept of Function Declaration and Function Definition


1. var Name;

This is a simple variable Declaration. Function is simply Declared here.

Here we can see that no value is assigned to the variable, therefore its a simple Declaration

The initial value of variable is taken as "undefined"


2. Name = "Mayank"

This is a variable definition, Variable is defined with a value.

Assigning value to a variable is called as Variable Declaration.

Variable was initially containing "undefined", now value changed to "Mayank


3. var Name = "Mayank"

In this case we can see that the declaration and the definitionis given in the same line.

This is the tricky Part, JavaScript implicitely break it into the following Code:

var Name;
Name = "Mayank"


This is the simple explaination of Function Definition and Declaration.

For now this is enough for understanding the article.


How Scopes are Determined in JavaScript

When JavaScript executes the code, it does the following

1. It traverse accross the code to find the Variable Declarations.

2. On the basis of where the variable is declared, variable scope is defined.

3. JavaScript then start Executing the Code with prior knoledge about the scopes.


Different Scopes in JavaScript

Global Scope Variables:

Any variable which is declared outside a function definition is a Global Scope Variable.

These variables can be accessed and modified throughtout the program.


var Name = "Mayank"

var Age = 28;


Since these 2 variables are not defined inside any function, it is assigned to the Global Scope

JavaScript while initial traversing, will add these variable to the Global Scope.

Adding the variables to the global Scope shall allow them to be accessed anywhere.


Function Scope Variable

Whereas the variables that are declared inside a function are Function Scope Variable.

These Function Scope variables are destroyed as soon as function is executed.


function showDetails() {

var Name = "Mayank";

var Age = 28;

}

Here in the above code, we can see that the variables are declared inside the Function.

Variables declared inside the functions are assigned with the function Scope

Function scope variables cannot be accessed outside the function definition.

Variable "Name" and Äge"cannot be accessed outside the "showDetails" function


function showDetails() {

var Name = "Mayank";

var Age = 28;

}

console.log(Name);


The above code shall result in error, since "Name" is not available outside the "showDetails"function


We can refer to Global scope Variable inside the Function Scope

var Name = "Mayank"

function showDetails() {

console.log(Name)

}

In the above code "Name" is assigned to the Global Scope therefore it can be accessed inside the Function


Also Consider the following Case:

var Name = "Mayank

function showDetails() {

Age = 28;

}

console.log(Age);

In the above code, we cannot see the declaration of the Äge"variable in the Global Scope.

This variable is Defined inside the Function, without "var"keyword

Such Variables are assigned to the Global Scope.


How Scopes are defined in JavaScript


Compiler traverse the Entire JavaScript before execution.

Before actual Run the scope of Variables are defined.

While Execution of JavaScript Code, compiler has prior information about variable Scopes.


The following operations are done when a JavaScript is Executed:

1. Before Executing a JavaScript, it first looks for all the variable declarations.

2. JavaScript compler evaluates the entire code and look for all the Declarations.

3. On thebasis of where the Variable is Declared, scope is assigned to the variable.

4. If variable is declared inside the Function, it is added to the Function Scope

5. If the Variable is not defined inside the Function, it is assigned to the GLobal Scope.


** Note:

Any variable if not declared in Global Scope and provide the definition directly inside a function, the variable is added to the Global Scope by the Compiler. This is demonstrated in the last Example provided.

{{Count}} Comments

{{comment.user}}

{{comment.message}}

{{comment.date.substring(0, 10)}}

Leave A Comment

;