Learn about Var, Let and Const in javascript
Tags: beginners, javascript, webdev, node
Published: 2019-09-25 05:39:17

---
title: Learn about Var, Let and Const in javascript
published: true
description: Learn about what is the difference between var let and const in javascript.
canonical_url: https://learnersbucket.com/tutorials/es6/var-let-and-const/
tags: beginners, javascript, webdev, node
---

We can now better define our variables depending on our needs with the introduction of let and const in javascript after [ES6](https://learnersbucket.com/tutorials/es6/es6-intro).

Before exploring the **let** and **const** let us first see why there was need for it.

##var in javascript
var are **function scoped**, which means they are still accessible outside the block scope even though we have declared them inside it.

{% gist https://gist.github.com/know-prashant/3f7f862bc6e38c6436da3ee232d48126 %}

###Explanation
In the first and second example, the value of the var leaked out of the block-scope and could be accessed from outside of it, whereas in the third example var was confined inside a function-scope and we could not access it from outside.

###This happens because of Hoisting.
var are treated as if they are at the top of the function (or global scope) regardless of where the actual declaration occurs, this is called hoisting. For a demonstration see the following example.
{% gist https://gist.github.com/know-prashant/1e0e8331e254a90ffd3291e36971b0d6 %}

##Block-Level Declarations in javascript
Block or lexical scopes are the boundaries in which declared variables are not accessible outside it. This means the variables declared inside it are available inside given block and its sub-blocks.

Many c-based languages work with block scoping and with its introduction in ES6 will bring the same flexibility to the Javascript.

Block are indicated by { and } characters.

##let in javascript
let are declared same as var but it limits the variable scope to the given block. That is why we should declare let at the top of the block so that is accessible throughout the block and its sub-blocks.
{% gist https://gist.github.com/know-prashant/00420ae198668678cbabc2f50ce1aada %}

###No Re-declaration's
We cannot redeclare a given variable with the same name again in the given block. Doing so will result is an error.
{% gist https://gist.github.com/know-prashant/ebe4ebde34392fda3f874c94e9217e41 %}

##const in javascript
Like let, const is also block scoped. But it differs from the fact that their variable cannot be re declared or change by re-assigning the value. The value remains Constant.
{% gist https://gist.github.com/know-prashant/b1efd1449c03a95d8498d563c654c785 %}

For this reason the const variable should be initialised while declaring.

{% gist https://gist.github.com/know-prashant/5455d5c9cc5db78de7bf57c7af7cd957 %}

Just like let, const is also blocked scoped.

{% gist https://gist.github.com/know-prashant/fd709ce2438f516876286b975a3dfa41 %}

However, the value a constant holds may be modified if it is an [object](https://learnersbucket.com/tutorials/javascript/javascript-objects-complete-reference/).

{% gist https://gist.github.com/know-prashant/182cd342447c7a3a37c21d300006b708 %}

const declarations for objects do not prevent modification of those objects. A const declaration prevents modification of the binding and not of the value of the binding.

But this will result in the error.

{% gist https://gist.github.com/know-prashant/56a12441d965aa976333b8b485cf8983 %}

##The Temporal Dead Zone (TDZ)
According to MDN:
> In ECMAScript 2015, let bindings are not subject to Variable Hoisting, which means that let declarations do not move to the top of the current execution context. Referencing the variable in the block before the initialization results in a ReferenceError (contrary to a variable declared with var, which will just have the undefined value). The variable is in a “temporal dead zone” from the start of the block until the initialization is processed.

{% gist https://gist.github.com/know-prashant/290cd064799a703c16cdaafd130b8408 %}

###The Temporal Dead Zone and typeof
Using the typeof operator to check the type of a variable in it's tdz will throw a ReferenceError. But for the undeclared variables it will throw undefined.

{% gist https://gist.github.com/know-prashant/9de38012439b4535b23122237fe01b3a %}

##Temporal Dead Zone with lexical or block scoping

{% gist https://gist.github.com/know-prashant/cbdd65e3945e2788c2f1620f88682373 %}

Due to lexical or block scoping let foo = (foo + 55) access the foo of the current block that is inside the if condition. It does not access the var foo = 33; as let is blocked scope. let foo is declared but it is not initialized that is why it is still in temporal dead zone.

##When to use Var, Let and Const
There is no as such rule stating where to use each of them, Everyone has different opinions.

But according to the properties of these three, it should be used as follows.
* Use **var** for top-level variables that are shared across many (especially larger) scopes.
* **let** can used for localized variables in smaller scopes.
* If there is no need to re-assign any variable. like const PI = 3.14; then use **const**.

---------------------------------------------------------------------------------
#### Preparing for javascript interview then do checkout [learnersbucket.com](https://learnersbucket.com) for 150+ solved problems for practice. I am sure it may help you .😎. 

I started to share the solved examples in javascript only because I failed many interviews initially. 

If you feel this is a helpful resource then please share these with others who are actively interviewing. 

Also, follow me on  [Twitter](https://twitter.com/LearnersBucket) for tips and tricks to solve the coding interviews and more solved examples of Algorithms. I write 2 - 3 post weekly on my blog [learnersbucket.com](https://learnersbucket.com).