Var vs Let vs Const in Javascript
Tags: javascript, keywords
Published: 2020-08-08 07:18:01

Before speaking about the keywords var,let and const, I believe it is extremely important to understand the concept of scope.
##Global Scope
Variables declared **outside any function** (globally) have global scope

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/re2kqbae91b5gmhuc76e.PNG)

Here, the variable global can be accessed from anywhere.
##Function Scope
Variables that are declared **inside a function** (locally) have function scope

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6tuadoniffmvk0751k49.PNG)

Here, the variable local can be accessed only inside the function.
##Block Scope
Some variables can be accessed only **within block** i.e.,within {}

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/holx3uuqukqr97qdt2cv.PNG)

Here , the variable **block** can be accessed only within the if block. It cannot be accessed from anywhere else. Thus, the variable **block** has only block scope.

Now that we are clear with the scope, let's dive into the **var,let and const** keywords
##1.var
####Scope
The variables defined with the keyword **var** have **function** scope.If it is defined outside the function , then the scope of the variable is **global**.  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9crm7ueicqhw0lce7t1h.PNG)

Here, the variable **foo** defined with the keyword **var** can be accessed from anywhere while the variable **bar** is limited to the function scope.
####Redeclaration and Reassignment
The variables declared with the keyword **var** can be redeclared and reassigned.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e0uiajxq352srub49rv4.PNG)

####Hoisting
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

Variables declared with **var** keyword are hoisted at the top of its scope and is initialized with **undefined**.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0zdsdjpxyiw3x2quslu4.PNG)

Here, the variable **foo** is declared later.But it is hoisted at the top and initialized to undefined.
Only variables declared with **var** keyword exhibit this behaviour.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/46q3si16xb4rmfv3wybe.PNG)

In the above example, since the variable **a** is not declared with var keyword, it is not hoisted and hence trying to access the variable before declaration in the hoist function throws an error.

##2.let
####Scope
The variables declared with the keyword **let** have **block** scope.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h422ufrv9v24ashah8js.PNG)

Here, the variable **i** can be accessed only within the **for** loop. 

####Redeclaration and ReAssignment
Variables declared with **let** keyword cannot be redeclared, but it can be reassigned.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u1fnncsf4tgdby1072ha.PNG)

####Hoisting
Variables declared with **let** are also hoisted at the top, but let variables are not initialized until their definition is evaluated.This is because of [Temporal Dead Zone](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/woymgir1uftks1opgb1g.PNG)

Thus,trying to access the variable **foo** before declaration gives reference error.

##3.const
####Scope
The variables declared with the **const** keyword also have block scope.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/41kylsqvi3p90d5wtfol.PNG)

####Redeclaration and Reassignment
Variables declared with **const** keyword must be initialized at the time of its declaration itself.Otherwise an error is thrown.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cjcfbnuyuedmeq4lxta4.PNG)

Variables declared with **const** keyword cannot be redeclared and reassigned.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uaw1apjhhscqwk6sdgxb.PNG)

Attempting to overwrite objects with const keyword throws error. But object keys are not protected and they are mutable. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tmiadywsbzxiuno62wci.PNG)

Here, we can see that the object cannot be reassigned, but the keys of the object are mutable.

Similarly arrays declared with const keyword cannot be overwritten. But the elements in the array is mutable.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v0izkbjqolf6t9qc848p.PNG)

####Hoisting
Variables declared with **const** keyword behaves the same way as **let** keyword.They are hoisted at the top of the scope but they are not initialized until their definition is evaluated

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/unu5xz7puc8jdtltjx6u.PNG)

#var vs let vs const - A Summary

|         |       var        |  let  | const |
|---------|------------------|-------|-------|
|Scope    |Function or Global| Block | Block |
|Redeclare|       Yes        |   No  |   No  |
|Reassign |       Yes        |  Yes  |   No  |
|Hoisted  |       Yes        |   No  |   No  |