Demystifying Var, Let, and Const
Tags: javascript, tutorial, beginners
Published: 2020-09-06 11:12:51

I know that a lot of devs already know the difference between `var`, `let`, and `const`. However, it is also true that many devs in the beginning of their learning journey might not know about the differences.

***

###So...

There are three ways of declaring variables in JavaScript:
1. `var`
2. `let`
3. `const`

Today, most relevant browsers support `let`, `var`, and `const`. `let` keyword is still not supported in Opera Mini.

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2kdxifwoxcy2w6uqfmcz.png)

`let` keyword is still not supported in Opera Mini.

***

###Let's get started with `var`

`var` was the primary way to declare variables until 2015. In ES6, the concept of `let` and `const` were introduced.

`var` is scoped to 'current execution context' i.e. it is scoped to the function enclosing the variable or the global scope.

```javascript
var x = "hello world";

function hello() {
    var x  = "hey there"; // redeclared
    x = "hola!"; // reassigned
    console.log(x); // OUTPUT: hola!
}
console.log(x); // OUTPUT: hello world
hello();
```

This tells that variables declared using `var` keyword can be reassigned as well as redeclared to a different value.

***

###`let` is _almost_ similar to `var`
`let` is block scoped. NOT context scope. This means that a variable declared with `let` is only valid within `{ }`. 

```javascript
let colour = "red"; 

function hello() {
    let colour = "blue"; //different variable
    colour = "pink"; // can reassign
    let colour = "orange"; // can't redeclare
    console.log(colour);
}
console.log(colour); // OUTPUT: red
hello();
```

```
error: unknown: Identifier 'colour' has already been declared (6:8)

  4 |     let colour = "blue"; //different variable
  5 |     colour = "pink"; // can reassign
> 6 |     let colour = "orange"; // can't redeclare
    |         ^
  7 |     console.log(colour); // OUTPUT: pink
  8 | }
  9 | console.log(colour); // OUTPUT: red
```

This tells that `let` is scoped within a `{ }` block. It can be reassigned but can't be redeclared in the same scope. The variable `colour` outside `hello()` and inside `hello()` are two different variables.

Let's see what happens if we try to access a `let` variable outside the `{ }`.

```javascript
for (let i = 0; i < 5; i++) {
  console.log(i);
}
console.log(i);
```

```
0
1
2
3
4
error: Uncaught ReferenceError: i is not defined
```

This means that `i` is not defined beyond `{ }`.

###`Const`
`Const` stands for constant. Like `let`, `const` is also scoped to a block. Like `let`, `const` can't be redeclared within the same block scope.

The idea is that the reference of the `const` variable can't change. This doesn't mean that the variable is immutable. It just means the memory reference can't change.

```javascript
const x = 5;
x = 10; // error: Uncaught TypeError: Assignment to constant variable.

const y = ["a", "b", "c"];
y.push("d"); // array can be manipulated
console.log(y); // OUTPUT: ["a", "b", "c", "d"]
```

Array declared with `const` keyword can be manipulated because the memory reference the variable `y` is NOT changing. `Const` doesn't care about the value of the variable. It only cares about the variable reference.

Unlike `let` and `const`, you can't initialise a `const` variable without a value.

```javascript
var x; // OK
let y; // OK
const z; // NOT OK
```

```
error: unknown: Unexpected token (3:7)

  1 | var x; 
  2 | let y;
> 3 | const z;
    |        ^
```
***

This pretty much sums up `var`, `let`, and `const`. One thing I didn't touch upon in this post is variable hoisting.
I think it would be a better idea to break it up in two parts. So in the next part, we will look at `var`, `let`, and `const` from variable hoisting point of view.

***

Cheers!