Mastering Let, Var and Const in Javascript 
Tags: javascript, let, var, const
Published: 2020-12-27 16:30:17

In this post let's dive in and explore the key functionalities and differences between `let, var and const` with code examples.

Firstly, before we look into the key features and differences, let's try to understand what they are at the most basic level.

In order to use a variable in JavaScript, we have to declare that variable. Before ES6, we had only var by which we used to declare variables. From ES6 onwards let and const were introduced to solve few problems that existed with var and to make our code less susceptible to errors.

We will look at the differences of `var, let and const` in four main aspects:

1. Scope
2. Redeclaring
3. Redefining
4. Hoisting

***

# Var

Before the introduction of ES6, `var` declarations were used for all kinds of variable declarations. But there are certain issues associated with variables declared with `var`, which led to the introduction of new ways to declare variables in Javascript. First, let's understand `var` before we move on to their issues.

## 1. Scope

Scope basically means where the variables declared are available for use.

**var** is **function-scoped** 
So what it basically means is that if a variable is declared within a function, then it is available and can be accessed only within that function.

Let's look into an example to understand about it.

```javascript
function demo() {
        var item = "hello";
        console.log(item) //"hello"
    }
    demo();
    console.log(item)//Uncaught ReferenceError: item is not defined
```
In the above example we can see that the value of item is available only within the function and returns a error if it is tried to access outside the function.

Now let's see what happens if `var` is declared outside a function.

**var** is **global-scoped**
So what it basically means is that if a variable with var is declared outside the function then that variable is available for use anywhere in the entire window.

Let's look into an example to understand about it.

```javascript
var item = "hello";
    function demo() { 
        console.log(item) //"hello"
    }
    demo();
    console.log(item)//"hello"
```
In the above example we can see that the value of item can be accessed anywhere in the entire window.

## 2. Redeclaring

**var can be Redeclared** 
The variables that are declared using `var` can be declared again and again using `var` anywhere in the program.

Let's look into an example to understand about it.

```javascript
var item = "pizza"
    console.log(item) //"pizza"
    var item ="burger"
    console.log(item) //"burger"
```

In the above example we can understand that *redeclaration of var* is accepted and it doesn't throw any errors.

## 3. Redefining

**var can be Redefined**
The variables that are declared using `var` can be assigned again and again with different values anywhere in the program.

Let's look into a example to understand about it.

```javascript
var item = "pizza"
    console.log(item) //"pizza" 
    item="burger"
    console.log(item) //"burger"
```
In the above example we can understand that *redefinition of var* is accepted and it doesn't throw any errors.

## 4. Hoisting

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

So let's look into an example to understand about it.

```javascript
console.log(item) //undefined
 var item ="pizza" 
``` 
The above code is interpreted as:

```javascript
var item
 console.log(item) //undefined
 var item = "pizza"
```
So `var` variables are hoisted at the top of their scope and they are initialized with a value of `undefined`.

**Problems of Var**

Let's look into the problems with `var` that led to the emergence of `let and var` declaration in javascript.

Let's look into an example to understand more about it.

```javascript
 var item ="pizza"
    var price=100
    
    if(price>50){
    var item = "burger"
    console.log(item) //"burger"
    }
    
    console.log(item) //"burger"
```
In the above example we can see that initially the item is **"pizza"** and the price is **100**. If the price is greater than **50** then the item is redeclared as **"burger"**.But what happens after the if statement is the main problem. If you want the item value to change only inside the if statement to **"burger"** and remain as **"pizza"** outside then it is not possible because var declaration globally redefines all the values declared with it to the newest redefinition made. That's why the value of item outside the if statement is **"burger"**.

If you have used `item` in other parts of your code, you might be surprised at the output you might get. This will likely cause a lot of problems to your code. This is why `let and const` are necessary.

***

# Let

let is now preferred for variable declaration as it not only comes as an improvement to var declarations. It also solves the problem with var that we just looked into. Let's look into it in detail.

## 1. Scope

**let** is **block-scoped** 
A block is a chunk of code bounded by {}. Anything within curly braces is a block.
So what it basically means is that if a variable is declared with `let` within a block, then it is available and can be accessed only within that block.

Let's look into an example to understand about it.

```javascript
 let item ="pizza"
    if(true){
    let item = "burger"
    console.log(item) //"burger"
    }
    console.log(item) //"pizza"
```
In the above example we see that item outside its block (the curly braces where it was defined) returns **"pizza"** whereas within the block returns **"burger"**. This is because let variables are block scoped .

## 2. Redeclaring

**let cannot be Redeclared** 
The variables that are declared using `let` cannot be declared again using `let` in the same block.

Let's look into an example to understand about it.

```javascript
let item = "pizza"
let item= "burger"
console.log(item) //Uncaught SyntaxError: Identifier 'item' has already been declared
```

In the above example we can understand that *redeclaration of let* in the same block is not accepted and it throws **Identifier 'item' has already been declared** error.

## 3. Redefining

**let can be Redefined**
The variables that are declared using `let` can be assigned again and again with different values in the same block.

Let's look into a example to understand about it.

```javascript
let item = "pizza"
    console.log(item) //"pizza" 
    item="burger"
    console.log(item) //"burger"
```
In the above example we can understand that *redefinition of let* is accepted and it doesn't throw any errors.

## 4. Hoisting

So let's look into an example to understand about it.

```javascript
console.log(item) //Uncaught ReferenceError: Cannot access 'item' before initialization"
let item ="pizza"  
```
Just like var, let declarations are hoisted to the top. Unlike var which is `initialized as undefined`, the let keyword is `not initialized`. So if you try to use a let variable before declaration, you'll get a `Reference Error`.

***

# Const

Variables declared with the `const` maintain constant values.

## 1. Scope

**const** is **block-scoped** 
Like let declarations, const declarations can only be accessed within the block they were declared.

Let's look into an example to understand about it.

```javascript
 const item ="pizza"
    if(true){
    const item = "burger"
    console.log(item) //"burger"
    }
    console.log(item) //"pizza"
```
In the above example we see that item outside its block (the curly braces where it was defined) returns **"pizza"** whereas within the block returns **"burger"**. This is because const variables are block scoped .

## 2. Redeclaring

**const cannot be Redeclared** 
The variables that are declared using `const` cannot be declared again using `const` in the same block.

Let's look into an example to understand about it.

```javascript
const item = "pizza"
const item= "burger"
console.log(item) //Uncaught SyntaxError: Identifier 'item' has already been declared
```

In the above example we can understand that *redeclaration of const* in the same block is not accepted and it throws **Identifier 'item' has already been declared** error.

## 3. Redefining

**const cannot be Redefined**
The variables that are declared using `const` cannot be assigned again and again with different values in the same block.

Let's look into a example to understand about it.

```javascript
const item = "pizza"
    console.log(item) //"pizza" 
    item="burger"
    console.log(item) //Uncaught TypeError: Assignment to constant variable
```
In the above example we can understand that *redefinition of const* is not accepted and it throws an error.

## 4. Hoisting

So let's look into an example to understand about it.

```javascript
console.log(item) //Uncaught ReferenceError: Cannot access 'item' before initialization"
const item ="pizza"  
```
Just like `let`, `const` declarations are hoisted to the top but are not initialized.

***

If you liked this article, give it a ❤ 🦄 and Save it for later.