Variables in JavaScript-Scope and Hoisting

Introduction

Variables are the basic and a most important part of any programming language. They are used to store values that are used in the further execution of a program.

You can think variables like a box in which we can store something i.e., values.

In JavaScript variables can store any type of values. It can be a number, string, boolean, array, object, and what else. I don’t want to mess around with data types in this article, we discuss them in another one. Let’s keep our eye only one variable.

Let’s take a look how we use a variable in JavaScript:

var x;            //Declare a variable
x=10;             //Assign a value in it
console.log(x);   //Use it

Before **ES6 **use var as variable keyword, but after ES6 there are two new keyword featured for assigning variable let and const.

But why let and const?

To understand the importance of let and const, first we need to know two JavaScript features: Scoping **and **Hoisting.

Let’s first discuss about Scoping:

Scoping simply means that at what **range **a variable can be accessed.

In JavaScript there are two type of scope: Global Scope and Local Scope

Didn’t get it ? Okay, don’t worry. Let’s do it practically. Consider following code:

var global = 'i am a global variable';
function doSomething() {                
   var local = 'i am a local variable';  
   console.log(local);                   
}                                       
console.log(global);
console.log(local);

Output:

i am a global variable
ReferenceError: local is not defined

What’s is the ReferenceError ?

If you see in the above program, I declare two variables globaland local.

The local variable is in the doSomething function, so you can’t access it outside the function. It means that the scope of variable local is within the function i.e, Local Scope.

But the variable global is declared outside of the function, so you can access it from anywhere. Thus variable global is in the Global Scope.

After ES6 the local scope is further divided into two part:

• Functional Scope (function) for var
• Block Scope (condition or loop) for let and const

Take a look in below code:

function doSomething() {
   if (1<2) {
     var cow = 'cow';
     let dog = 'dog';
     const cat = 'cat';
     console.log(cow);   //cow
     console.log(dog);   //dog
     console.log(cat);   //cat
  }
 console.log(cow);     //cow
 console.log(dog);     //ReferenceError: dog is not defined
 console.log(cat);     //ReferenceError: cat is not defined
}
doSomething();

As you can see if we try to access let and const variable outside of the if(block scope), it give a ReferenceError. However the var variable do its job perfectly within the function scope.

So that’s being said, the scope of var is functional scope where the scope of let and const is block scope.

Let’s first discuss about Hoisting:

When a variable or a function is declared, its declaration is moved to top **of their **scope.

Have a look at below condition;

• Trying to access a variable before it has been declared and initialized

console.log(name);  //access name before it defined or initialized
var name='person';  //define and initialize after it been accessed
/* Output */
undefined

• Trying to access a variable before it initialized without declaring it

console.log(name);  //access name before it defined or initialized
name='person';      //initialize name without it defined
/* Output */
ReferenceError: name is not defined

As we can see, if we access a variable before it has been declared and initialized, it return undefined. However if we access a variable before it initialized without declaring it, it returns a ReferenceError.

It’s seems ok in second condition that we not declared namebefore accessed it, so it gives a ReferenceError, but what happened in first condition is that JavaScript automatically declared the variable name before accessed it because we put a var keyword before the variable.

//How we write it
console.log(name);  //ReferenceError: name is not defined
var name='person'; 

//How JavaScirpt Manipulate it
var name;
console.log(name);  //undefined
name='person';

Let’s see a big picture regarding hoisting:

var statement = true;
function checkHoisting() {
  //var statement;  /* Javascript automatically declared it here */
  if(1>2){
    var statement = false;
  }
  console.log(statement); // undefined
}
checkHoisting();

By seeing the example one can easily predict that the output should be true. But due to hoisting property JavaScript declared a new statement variable top on top of the checkHoisting function, which is not initialized, thus the output is undefined.

This type of output might cause a weird error.

But that simply not happen it case of letor const. Let’s see.

let statement = true;
function checkHoisting() {
  if(1>2){
     let statement = false;
  }
  console.log(statement);   //the global statement variable
}
checkHoisting(); //Output: true

let and const are not participate in hoist behavior, cause they are block-scoped variable.

Let’s have a look on another scenario:

var statement = true;
var statement = false;
console.log(statement); // Output:false

let done = true;
let done = false;
console.log(done);      
//Output: SyntaxError: Identifier 'done' has already been declared

What happened here ? Can you guess why ?

Let me simplify it.

When we declare a variable again with with a different value with var, then due to hoist behavior, the value of the variable updated with the latest value, thus the output is false.

But in case of letand const, as they not follow hoist property, it throw a SyntaxError that Identifier donehas already been declared.

This duplication of variable can also cause an error.

Conclusion

Due to scope and hoisting, the var keyword might cause an unpredictable result with w don’t want to occur. So as per the ES6 feature, it good to use let and const instead of var to keep our code less confusing and error free.

That’s being said, that all for this article. I hope this article might help you to understand the variable in JavaScript with scope and hoist property.

References

• Mozilla Docs
• Digital Ocean Community

More on JavaScript

• Data Types in JavaScript — The Weird Parts
• Type Conversion in JavaScript - The Magic
• An Introduction to Loops in JavaScript
• JavaScript Equality - Double Equals vs Triple Equals

Thanks for sticking around. Keep Learning.

📢This article is officially been published on Within Bracket.

📌Find more articles Here