×
Understanding variable scope(let,var,const),hoisting in Javascript and Temporal Dead Zone(TDZ)


Understanding variable scope(let,var,const),hoisting in Javascript and Temporal Dead Zone(TDZ)

June 11, 2018

Hoisting in Javascript 

To hoist means to pull or move up. Javascript hoisting means variable and function declarations are pulled to the top of the scope while compilation. What actually happens is that declarations are stored in memory. In the following example, we will see how hoisting works.

Here the function test can be used called before it is declared in the code because during the compilation the declaration is hoisted or moved to the top of the scope(current script or current function). Javascript only hoists declarations, not initializations. All declarations (var, let, const, function, class) are hoisted

Variable scope in JavaScript

Var 

The scope of var is the current execution context. That is, the scope of var is global if used outside a function and the scope is the function block while being used inside the function.

assigning value to a variable without declaration creates and adds variable to the global scope. This is discouraged and throws an error in strict mode

As you can see the scope of a is the function.

Let – block scope

The scope of let is the block in which they are defined .let defines block-scoped variables. Let has a scope from the block to enclosing sub-blocks. Let’s take the following example to learn about the scope of let comparing it with var

Let cannot be redeclared in the same scope.

Const

Constants are block-scoped, much like variables defined using the let . The value of a constant cannot change through re-assignment.const is used when a value is never going to change

Temporal Dead  Zone

Var can be accessed inside its scope before its declaration. Accessing before its initialization var will give an undefined, ie it does not throw a reference error.

Here you can see the declaration of a is hoisted.

Now we try the same thing with let

Now let cannot be used before declaration as it throws JavaScript reference error. It may appear from here that let is not hoisted like var, but this is not the case. Let is also hoisted like var, but there is a period between entering the scope and being declared. This period is called the temporal dead zone (TDZ).

 

Let and Const Behaves similarly. So both of them have  TDZ  while var does not. Let’s try the above example with var

So the undefined shows that var does not have  TDZ  as there was no reference error. TDZ is very helpful as it prevents from using undeclared variables

 

 

Refer below links for more information

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

 

 

2 Comments

Leave a Reply

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