Different types of variable declarations in JavaScript - var, let and const.
Tags: javascript, beginners, webdev, react
Published: 2022-10-21 17:16:20


Hi everyone. Here is my first blog in JavaScript. This blog is about the ways that can be used to declare variables in JavaScript. I know, as a beginner, it is difficult to understand the declaration of variable scope.

So.. I am here to make it easy. 
And here you go................

In JavaScript, there are **four** ways to declare a variable.

Yes, you heard it right... let's elaborate.

## 1. Assign variable without declaring it in JS:

Yes, we can assign the variable without using _var_, _let_ and _const_ keywords. And when we do that, it becomes a global property of [window object](https://developer.mozilla.org/en-US/docs/Web/API/Window). 

But remember, this is **not recommended.**


```javascript
x = 78
console.log(a); // output- 78
```

But this is not applicable when we use the **strict** mode.

```javascript
'use strict'
x = 78;
console.log(a); // output- Uncaught ReferenceError: x is not defined
```

## 2. var: 
When JavaScript was first introduced, developers only used _var_ to declare variables.Let's see a few examples.

* Hoisting: We can use variables before we declare them in our code. 
We would get undefined as an output, but JavaScript would not throw an error if we are using _var_ keyword.

```javascript
'use strict'

function varExample() {
    console.log(x); // output- undefined
    for ( var i = 0; i< 3; i++){
        var x = i;
    };
};
varExample();
```

* Global Scope: _var_ can be used globally. 
We have declared x without any assignment, so for the first output we got undefined. And in the last output, we got 2 after assigning the value. 

```javascript
'use strict'

var x
function varExample() {
    console.log("First check", x); // output- First check undefined.
    for ( var i = 0; i< 3; i++){
        x = i;
    };
    console.log("last check", x); // output- 2
};
varExample();
```

* Functional scope: _var_ has a functional scope, which means we can access the _var_ variable anywhere within the function. 
For example, x is declared within the _for loop block_ but x is accessible outside of the block.

```javascript
'use strict'

function varExample() {
    
    for ( var i = 0; i< 3; i++){
        var x = i;
    };
    console.log(x); // output- 2
};
varExample();
```
But x can't be accessible outside of the function. 
```javascript
'use strict'

function varExample() {
    for ( var i = 0; i< 3; i++){
        var x = i;
    };
    
};
console.log(x); // output- Uncaught ReferenceError: x is not defined
varExample();
```
* Re-Declaration is allowed: We can use _var_ to re-declare or update the variable.

```javascript
'use strict'

function varExample() {
    var x = 10;
    var x = 19;
    console.log(x); // output- 19
    x = 60;
    console.log(x); //output - 60
};
varExample();
```


## 3. let: 
_let_ is introduced in [ES6] (https://developer.mozilla.org/en-US/docs/Web/JavaScript).Let's see the same examples with _let_ as well.

* Hoisting: We can't use variables before we declare them in our code using the _let_ keyword. While trying to access 'c', we are getting a reference error. This is called Temporal Dead Zone(TDZ). until the value gets initialized to the variable TDZ continues.

```javascript
'use strict'

function varExample() {
    console.log(c); // output-Uncaught ReferenceError: c is not defined. TDZ continues here.
    for ( var i = 0; i< 3; i++){ // TDZ continues here.
        let c = i; // TDZ ended here.
    };
};
varExample();
```


* Global Scope: _let_ is having global scope too. And it would show the same output as _var_.

```javascript
'use strict'

let c;
function varExample() {
    console.log(c); // output - undefined
    for ( var i = 0; i< 3; i++){
        c = i;
    };
    console.log(c); // output - 2
};
varExample();
```
* Block Scope: The scope of a _let_ variable is only block scope in JavaScript. Let's check out the below example. x is declared inside the _for loop block_, so when we are trying to access the x outside of the block, we are getting an error.

```javascript
'use strict'

function varExample() {
    
    for ( let i = 0; i< 3; i++){
        let x = i;
    };
    console.log(x); // output - uncaught ReferenceError: x is not defined
};
varExample();
```


* Re-declaration: For _let_ variable, re-declaration is not permitted.

```javascript
'use strict'

function varExample() {
    let t = 10;
    let t = 19; // output - Uncaught SyntaxError: Identifier 't' has already been declared.
    console.log(t);
    t = 60;
    console.log(t);
};
varExample();
```
But updating variables are allowed.

```javascript
'use strict'

function varExample() {
    let t = 10;
    console.log(t); // output - 10
    t = 60;
    console.log(t); // output - 60
};
varExample();
```

## 3. const: 
The variable _const_ is the same as the variable _let_. _const_ is also introduced in [ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript). The only difference is that "const" can't be updated once it is declared.

```javascript
'use strict'

const x = 8
function varExample() {
    x = 11; // output - Uncaught TypeError: Assignment to constant variable.
    console.log(x);
    
};
varExample();
```
But if we are declaring a variable like below, then x has a different scope—one is global and another is block scope,so JavaScript treats them as different variables.


```javascript
'use strict'

const x = 8
function varExample() {
    const x = 11; 
    console.log(x); // output - 11 (block scope)
    
};
console.log(x); // output - 8 (global scope)
varExample();
```

## Summary:

- We should not use variables without the _var_, _let_ and _const_ keywords.

- It is a good practice to use _const_ unless you don't have anything to override.

- Try to avoid _var_ until you don't have a browser compatible issue. 
- _let_ and _const_ does not create properties of [window](https://developer.mozilla.org/en-US/docs/Web/API/Window) object when declared globally (in the top scope).

- Our first priority should be to use _const_ variable to avoid value re-assignment errors in our code Unless we are pretty sure that we will not be changing its value later. Then _let_ should be our second priority. 


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp0fjywubjx6wb39etti.gif)](https://www.buymeacoffee.com/payalsasmal)