Enough JavaScript to get you Started : #16 var vs let vs const
Tags: javascript, beginners, webdev, 100daysofcode
Published: 2021-01-22 06:52:44

### Before we start
👉 Before we start this article i would like to clarify some technical jargons for you <br>
👉 Scope : Scope is nothing but a code block where the variable is accessible for usage <br>
👉 Global Scope : Global Scope means variable is declared globally (not in some condition or function) hence it can be used any where throughout the execution of program <br>
👉 Local/ Functional Scope : this simply means that when we declare a variable on function level or somewhere locally in code block then it's not accessible outside of that particular scope (imagine variables declared in functions , loops ,conditionals...) <br>
👉 Block Scope : Blocks are nothing but piece of code written inside any curly braces {...} [ex. if block , or function's block]

### Var
👉 Var is the oldest way of declaring variable <br>
👉 Var can be globally and functionally scoped <br>
👉 If we Declare var inside function it becomes functionally scoped if we declare it outside function it becomes globally scoped and is available anywhere in program<br>
👉 can be redeclared or updated

👉**Example of Scope**
```
var a = 10; // global variable

function fun()
{
    // functional scoped variable
    var b = 20;
    console.log(a);
    console.log(b);
}
fun();
console.log(a);
console.log(b);
```
👉 output
```
-> inside function
10 ✔
20 ✔
-> outside function
10 ✔
uncaught reference : b is not defined ❌ 
```
👉 Notice that functions can access both global and functional variables.

👉 **Example of Re-declaration**
```
// variables with var can be re-decalred ✔
var a = 10;
var a = 20;
// you won't get any error
```
👉 **Example of updatable variables**
```
// variables with var can be updated ✔
var a =10;
a=20;
// you won't get any error
```
👉 **Problems with var** <br>
👉 Redefining variables won't throw any errors which means it's tricky to remember which variable is already there and which variable is new. <br>
<hr>

### Let 
👉 Let is the modern way of declaring variables introduces in ES2015 <br>
👉 Let is now recommended way of declaring variables <br>
👉 Let is **block scoped** <br>
👉 Let can be updated but not redeclared <br>

👉**Example of Declaration**
```
// let can be updated ✔
let a = 30; ✔
a = 40; ✔
// but not redeclared ❌
let b = 40; ✔
let b = 90 ;❌

// error : Identifier 'b' has already been declared
```

👉**Example of block scope**
```
let sayHi = "hi";
if(sayHi === "hi")
{
    let newMsg = "how are you?";
   console.log(sayHi); // outputs "hi"
}

console.log(sayHi); ✔
console.log(newMsg); ❌ // 'newMsg is not defined'
```
<hr>
### Const
👉 Variables declared with `const` remains same throughout the execution <br>
👉 variables declared with `const` are not redeclarable or updatable <br>
👉 if `const` variables declared outside any block they becomes global scoped , but if they are declared within block they becomes block scoped <br>
👉 values can not be changes or new values can not be assigned to `const` variables

👉 **Example:**
```
const sayHi = "hi";
const sayHi = "hello"; ❌ // will throw error

//and ...

const msg = "buy bread from market";
msg = "new msg here"; ❌ // error:  assignment to constant variable.
```
👉 But...
```
const numbers = [1,2,3];
number[0] = 4; ✔ // works fine

// but...
numbers = [5,6,7]; ❌ // won't work
```
👉 the first case will work because we're within the rules , we're not redeclaring the const variable nor we're updating it. but we're mutating it. 😀

<hr>

### Summary
👉 **var:** Global/function scoped depending on declaration undefined when accessing a variable before it's declared. can be redeclared and updated.
<br>
👉 **let:** block scoped. can be updated but we can't redeclare.
<br>
👉**const:** block scoped. can not be reassigned nor we can redeclare.

<p>Let me know in comment section if you have any doubt or feedback. it's always worth to give time to the thriving developer community :) <br>
<br>
Keep Coding ❤
</p>

#### Hey , Let' Connect👋
 [Twitter](https://twitter.com/codarsh) / [Github](https://github.com/WhoAdarshPandya/)