let, const and var : Crystal Clear
Tags: javascript, webdev, programming, beginners
Published: 2023-05-03 13:51:29

New Javascript developers often run into problem while using let, const and var. Due to unfamiliarity with their use cases and differences, they introduce subtle bugs in their codes. 

In this article, I will explain the differences between these three keywords and their use cases. 

## The Genesis
_var_
var keyword was introduced in Javascript from its inception, in 1995. It was the only keyword which was used to declare variables.

_let and const_
let and const were introduced in EcmaScript 6 (in year 2015). They have almost replaced var.

## Differences
let, const and var can be distinguished on the basis of four factors: **hoisting**, **redeclaration**, **reassignment** and **scope**.

Lets understand each topic one by one.

**Hoisting**

It is the phenomenon in which a variable or a function can be accessed before it is declared in the code. 


| var   | let | const  |
|------------|----------|-----------|
| Hoisted and are accessible     | Hoisted but they are inaccessible because they reside in Temporal Dead Zone until they are not initialized   | Hoisted but they are inaccessible because they reside in Temporal Dead Zone until they are not initialized     |

```javascript
console.log(name); // undefined
var name = "rudra"; 
```

```javascript
console.log(name);  // referenceError: cannot access name without intitialization
let name = "rudra";
```

**Scope**

Scope of a variable means the area in the code where a variable can be accessed.

| var   | let | const  |
|------------|----------|-----------|
|function scoped|block scoped|block scoped|

```javascript
{
    var name = "rudra";
}
console.log(name); // rudra

```

```javascript
{
    let name = "rudra";
}
console.log(name); // referenceError: name is not defined

```
```javascript
{
    const name = "rudra";
}
console.log(name); // referenceError: name is not defined

```

**Redeclaration**

Redeclaration means if a variable is already declared then if it is possible to declare another variable with the same name.

| var   | let | const  |
|------------|----------|-----------|
|Yes|No|No|

```javascript
var name = "rudra";
var name = "pratap";
console.log(name); // pratap
```
```javascript
let name = "rudra";
let name = "pratap";
console.log(name); // SyntaxError: Identifier 'name' has already been declared
```
```javascript
const name = "rudra";
const name = "pratap";
console.log(name); // SyntaxError: Identifier 'name' has already been declared
```

**Reassignment**

Reassignment means if a variable is already initialized with some value, then is it possible to assign another value to it later.

|var|let|const|
|------------|----------|-----------|
|Yes|Yes|No|

```javascript
var name = "rudra";
name = "pratap";
console.log(name); // pratap
```

```javascript
let name = "rudra";
name = "pratap";
console.log(name); // pratap

```
```javascript
const name = "rudra";
name = "pratap";
console.log(name); // typeError: Assignment to constant variable.
```


## Tip

1. Always use let and const, forget that there exist any var keyword in Javascript. Use var only when you need some variable to be hoisted.
2. Always use const if you are certain that the value in the variable is not going to change.