Scope and Hoisting of Variables in JavaScript | Explained with Examples

Scope and Hoisting of Variables in JavaScript | Explained with Examples

In a JavaScript program, the scope of a variable defines how far a variable can be accessed while hoisting in JavaScript is a phenomenon by which you can access the variables even before their initialization.

Variables Scope in JavaScript

Before diving into the scope of the variable first we have to understand what is a variable in JavaScript and how to create a variable.

A variable acts as a container that holds some data. These variables can be created using three different keywords as “var”, “let”, and “const”.

In JavaScript, a variable has two kinds of scope and we will discuss each of them with some examples.

Block Scope in JavaScript

Earlier JavaScript doesn’t support block scope, but after the release of ES6, it does. ES6 introduces a couple of new keywords such as let and const, these keywords offer block scope in JavaScript.

Block scope in JavaScript is represented by curly braces “{}”, which determines any variable that is declared within the block scope can’t be accessed outside of it. The variables initialized within the block are known as local variables.

Now we will understand the working of variables, declared inside the block scope.

Variable declared with “var” keyword doesn’t support block scope, it means we can access the variable from outside the block as well. Consider the below example where the variable is declared with the “var” keyword, and observe how it works:

if(true)
{
var a = 100;
console.log(“variable inside the block scope : “ , a);
}

We created a variable inside the block using the keyword “var” and assign it the value ‘100’. When we access that variable inside the block it will show the following output:

Enhance the above example a little bit more and access the ‘a’ variable outside of the block:

if(true)
{
var a = 100;
console.log(“variable inside the block scope : “ , a);
}
console.log(“variable outside the block scope : “ , a);

Now observe the output:

The output verifies that the keyword “var” can’t have block scope.

Now create the variables with the “let” and “const” keyword, and try to access them from outside the block scope:

if(true)
{
let a = 100;
const b = 150;
console.log(“let inside the block scope : “ , a);
console.log(“const inside the block scope : “ , b);
}
console.log(“let outside the block scope : “ , a);
console.log(“const outside the block scope : “ , b);

Now access both the variables from inside as well as from outside the block:

The output will verify that these variables are accessible inside the block scope but when we try to access them from outside the block scope then an error occurs “Uncaught ReferenceError”:

Global Scope in JavaScript

Variables that can be accessible from anywhere either from outside or inside of the function/block are known as global scope variables. No matter they are created outside the function/block or within the function or block i.e. variable created inside the block with ‘var’ keyword can be accessible from anywhere in JavaScript code.

In JavaScript, if a variable is not declared properly then by default it will be created in the global scope.

Consider the following example and observe how a global variable works:

var a=100;
let b=120;
const c=250;
if (true)
{
    console.log(“global variable : “, a);
    console.log(“global variable : “, b);
    console.log(“global variable : “, c);
}

In this example, we declared the variables globally and access them in the if-statement block:

The output verifies that we can access the variables anywhere in the program that are defined globally:

Hoisting in JavaScript:

Hoisting refers to a phenomenon that moves the variable declarations to the top.

Here we need to understand the difference between the variable declaration and variable initialization, for example, “var a”, is a variable declaration while “a= 10” is variable initialization. Now we will take an example to understand how we write the code and how JavaScript Interpret that code:

var a=10;
document.write(a);
var b=20;

JavaScript will read it as:

var a;
var b;
a=10;
document.write(a);
b=20;

JavaScript moves the declaration part at the top while the initialization part remains at its position.

So far in all the examples, we created a variable and assigned some value to it and then we access the variable at the end. What if we try to access any variable before its initialization/declaration. Well, in that case, JavaScript shows an undefined value as it did in the following example:

console.log(“Access before declaration : “, a);
var a = 45;

In this example, we try to print the value of the variable “a”, before its declaration, then in the next statement we created the variable and assign it a value. On successful execution, we will get the following output:

This happens because, even before the execution of this code JavaScript assigned an undefined value to the “var a” then it reads “console.log(a)” and then “a=45”, therefore it shows undefined instead of 45.

While skipping the keyword “var” means we are not declaring a variable instead we are just initializing a variable. In this case, if we try to access a variable before its declaration we will face a RefferenceError as we did in the following example:

console.log(“Access before declaration : “, a);
a = 45;

We try to print the value of “a” on the console before its declaration and then in the next statement we assign a value to the variable ‘a’ without using the keyword “var”:

We get the following output:

Conclusion

In JavaScript, the scope of the variable determines where you can access a variable in the code while hoisting of the variables refers to the concept of invoking the declarations of variables to the top of the program. This article provides the to-the-point examples to understand the concept of scope and hoisting of variable in JavaScript.

Leave a Reply

Your email address will not be published. Required fields are marked *