Var, Let, and Const
Tags: javascript, programming, tutorial, beginners
Published: 2022-01-16 09:28:01

#  var vs let vs const

In this article, we'll discuss `var`, `let` and `const` with respect to their scope, use, and hoisting.
In javascript, you can create/declare variables using keywords var, let and const.

Lets see the differences between these keywords to have a better understanding of what to use when.

# **Scope**

Scope essentially means where these variables are available for use.

**There are two types of scopes in JS:**

 - **Function Scope:** Visibility is limited to the function.
```javascript
 function scopeFn() {  
   var num = 10;   
   console.log(num); //prints 10  
   }   
  console.log(num); // ReferenceError: num is not defined
 ```
 ```javascript
 function scopeFn() {  
   var num = 20;   
   if (true) {   
	 var num = 100;   
	 console.log(num); //prints 100  
	 }  
   console.log(num); //prints 100  
 }   
   console.log(num);  // ReferenceError: num is not defined
 ```
- **Block Scope:** Visibility is limited to the block of code.
```javascript
let num = 20;
 if (true) {   
	 let num = 10;   
	 console.log(num); //prints 10  
 }   
 console.log(num); // prints 20
```

Now, that we have idea of scope. We can discuss the scope of var, let and const.

 -   var declarations are function scoped.
 -   let declarations are block scoped.
 -   const declarations are block scoped.
## **Redefining and Redeclaring feature**

**A variable declared using ‘var’ can be redefined and even redeclared    anywhere throughout its scope.**

```javascript
var x = 30;  
 console.log(x); //prints 30  
 x = "Hi"; //redefining or re-assigning (works without any error)  
 console.log(x); //prints "Hi"  
```
``` javascript
 var y = 10;  
 console.log(y); //prints 10  
 var y = "Hello"; //Redeclaring (works without any error)  
 console.log(y) //Prints "Hello"
```

**A variable declared using ‘let’ can be redefined within its scope but cannot be re-declared within its scope.**
```javascript
let x = 11;  
console.log(x); //prints 11  
x = "IB"; //works without any error  
console.log(x); //prints "IB"  
 ```
 ``` javascript
let y = 12;  
console.log(y); //prints 12  
let y = "Scaler"; // error: Identifier y has already been declared  
 ```
 ``` javascript
let z = 13;  
if(true){  
 let z = "Fun"; //works without any error as scope is different.  
 console.log(z) //prints "Fun"  
}  
console.log(z) //prints 13
```

**A variable declared using ‘const’ cannot be redefined or re-declared within its scope.**
```javascript
const x = 10;  
console.log(x); //prints 10  
x = 11; // error: Assignment to constant variable.  
```
```javascript
const y;  
y = 2; //error  
```
```javascript
const z = 12;  
console.log(z) //prints 12  
const z= 13; // error: Identifier 'y' has already been declared
```
  
**Note** : Every const declaration must be initialized at the time of declaration.
## **Hoisting**
Hoisting is a mechanism where variables and function declarations are moved to the top of their scope before code execution.
```javascript
console.log(x); // prints undefined  
var x = 100;  
console.log(x); //prints 100
```
-   Variables declared using var are hoisted to the top of their scope and initialized with a value of undefined(special type).
-   Variables declared using let are hoisted to the top of their scope but are not initialized with any value.
-   Variables declared using const are hoisted to the top of their scope but are not initialized with any value.
```javascript
console.log(x); // prints undefined  
var x = 100;  
console.log(x); //prints 100  
 ```
```javascript
console.log(y); //Reference error  
let y = 200;  
console.log(y); //prints 200  
```
``` javascript 
console.log(z); //Reference error  
const z = 300;  
console.log(z); //prints 300
```


**Summary:**
-   `var`  declarations are globally scoped or function scoped while  `let`  and  `const`  are block scoped.
-   `var`  variables can be updated and re-declared within its scope;  `let`  variables can be updated but not re-declared;  `const`  variables can neither be updated nor re-declared.
-   They are all hoisted to the top of their scope. But while  `var`  variables are initialized with  `undefined`,  `let`  and  `const`  variables are not initialized.
-   While  `var`  and  `let`  can be declared without being initialized,  `const`  must be initialized during declaration.

Now we have understood the main difference between `let`, `var` and `const`.

**Let's predict the output for the following code in the comments:**
```javascript 
var x = 100;
{
	var x = -100;
}
let y = x;
{
	let y = 200;
}
console.log(y);
```
Got any question or additions? Please let me know.

**Thank you for reading :)**