var, let & const in JavaScript
Tags: javascript, beginners, webdev, programming
Published: 2021-02-27 06:26:35

ES2015(ES6) was released long back and one of the features that came with ES6 is the addition of let and const, another way for variable declaration. If you are still not clear about this concept, then this article is for you. We will discuss let, const and var in this blog with respect to their scope and use.

#Var
__var__ is a reserved keyword and helps to declare the variables in javascript. Assigning a value using __var__ keyword happens as per the below code (using = operator)

```javascript
// Setting name to some value 
var name = 'John Doe';

// Initalizing the name variable and set to undefined
var name;
```
##### Scope
The scope of the var keyword is limited to the function within which it is defined. If it is defined outside any function, the scope of the var becomes global.

Have a look at the below code:
```javascript
// This var keyword has a global scope, available globally 
var name = "John Doe";

function dispName() {

  //This var keyword is defined has local/functional scope, avaialble locally 
  var name = "Johny";
  console.log(name); // Johny
}
console.log(name); // John Doe
dispName();
```
The above code provides a situation where the keyword 'name', is called inside and outside the function. Therefore we can conclude that __*var is function scoped*__

#Let
__let__ keyword was introduced in JavaScript ES6(ES2015). Nowadays developers prefer __let__ keyword over var keyword, as it's an improvement over the var keyword. It helps us to assign the value or store it to some variable. Consider the below code for the same:
```javascript
//Assigning value
let name = 'John Doe';
//Initializing b and set it to undefined
let name;
``` 
##### Scope
Anything or any code within a __{}__ braces is a block. Hence __let__ is limited to the block defined by curly braces

```javascript
var x = 4;
let y = 5;

if (true) {
  var x = 1;
  let y = 2;
  console.log("Block Scope", x, y); // Block Scope 1 2
}
console.log("Global Scope", x, y); // Global Scope 1 5
```
* In the above code, x acts as a global scope, hence its value gets re-assigned to 1 inside block scope and that's why it prints 1 in both console statements.
* y acts as a block-scoped variable (defined by let keyword), therefore its value is preserved. Its value is 2 inside the block and 5 outside the block. Because of this reason, developers prefer let over var. Therefore, we can conclude that __*let is block scoped*__

#Const
ES6 also introduced one more keyword known as __const__. Variables defined with __const__ variable behaves like the let variables, except they cannot be reassigned

```javascript
const name = "John Doe";
name = "Johny";
console.log(name);
```
The above code will throw an error, something similar to this, Hence __const__ cannot be reassigned
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7v6j19n6msj91fndyxks.PNG)

__NOTE__: const doesn't make the variables constant. It defines the constant reference to the value. Therefore we cannot change constant primitive values. But we can change the properties of Objects or values inside an Array. (But it cannot be reassigned to the new Object or Array)

Consider the below code:

```javascript
const fullDetails = { firstName: "John", lastName: "Doe" };
fullDetails.age = 22;
console.log(fullDetails); // { firstName: 'John', lastName: 'Doe', age: 22 }

// This code will throw error, as const varaibles cannot be reassigned 
fullDetails = { firstName: "Tony", lastName: "Doe" };
console.log(fullDetails); // TypeError here
```
##### Scope
Scope of const is same as let i.e. Block scoped (limited to the blocks defined by curly braces {}).

```javascript
const name = "John";
if (true) {
  console.log(name); // John
  // Scope of age is limited to this block only
  const age = 25;
  console.log(age) // 25
}

// name will be John, but age will be not defined as it is block-scoped variable (Reference Error will occur)
console.log(name, age);
```
Therefore we can conclude that __*const is block-scoped and const variable cannot be reassigned to a new value. But it can be mutated*__

#### Conclusion
* var is functional scope
* let & const are BLOCK scope
* const is mutable but cannot be reassigned