Understanding Scopes in JavaScript

One of the most important concepts in JavaScript, which one should master, is scope. Scopes are a little different in JavaScript compared to other languages like C# or Java. Scope defines the lexical memory space in which a variable, function or object is accessible for the JavaScript interpreter for it’s use during the run-time.

There are three main scopes in JavaScript. First is the global scope, second is the function scope and third is the block scope. Let us discuss and understand each of these scopes individually.

1. Global Scope

Global scope or the root scope or the window scope is the parent scope and all other scopes are part of the global scope. Global scope is the parent of all scopes. Any variable declared outside a function or a block is called as a global variable. This global scope is accessible through out the code execution and every function and block has access to this global space. Let us see an example. See the below code below.

var noOfChocolates = 1;

console.log(noOfChocolates)
console.log(window.noOfChocolates)
console.log(noOfChocolates === window.noOfChocolates);

Here we have created a variable called number of chocolates and initialized it to one. Next we try to log it to the console. And off-course we will get 1. Next we logged window. noOfChololate which still shows us one. This means that the variable noOfCholoclates is part of the window object. Or in other words the variable declared outside of any function or block is part of the window object and is counted under the global scope.

2. Function Scope

Any variable that is declared inside a function has a function scope. That means we can use the variable only inside that function and not outside. However in the case of global variable, we can use it anywhere i.e., inside a function or inside a block. See the code below.

function add (a, b) {
    console.log(noOfChocolates); // has access to the global variable
    var result = a + b;
    return result;
}

add(5,6);
console.log(result); // result is undefined

In the above example, we have created a function called add which takes two arguments and adds them up. Inside the function we try to do a console log of the variable noOfChocolates. And since this variable is from global scope we do have access it. Now inside the function we have created a variable called results which holds the value of the addition. When we try to access it inside the function (used in the return value) we do not get any errors. However when we try to use it outside of the function(inside the console log), we get an error. This means the variable result is not available to use outside of the function. This is a variable of function scope. This only can be used inside a function and not outside.

3. Block Scope

Before understanding block scope, let us first define what is a code block. Any piece of code between { and } is called a block of code. See the code below.

{
    var scope = 'block'
}

if(true) {
    var info = 'if condition'
}

The variable scope is inside the blocks and forms a block of code. Similarly a if condition, for loop, while loop, switch statement forms a block of code. And any variable declared inside the block is called a block scoped variable. In our example scope is a variable which is created inside the block scope.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: