Let, Var and Const in JS

Hello Everyone, Today the discussion is about variables let var and const ..

People might be confuse between var , let and const that why to use and when to use so the blog is here to clear the confusion …

This blog will help you to understand that why to use const and let over var and where to use which of these , So let Started …

Suggestion: Just a suggestion that take the examples given below and try it in your console as well so it will always stay in your mind

1) Var :

Var is used for along time in Javascript but let and const are introduced in ES6 version. With Var variable you can reassign the value to a variable and you can also redeclare the variable with using Var keyword ..

Example:

var b = "Hello"
var b = "Hey" // user can redeclare it using var keyword
 b = "nice"  // you can also reassign value to the variable

Scope :

Var keyword has global scope or function scope . It means if any variable with var keyword is declared globally (outside the function) so it is accessible inside the function and also accessible globally. Look at the example to understand properly .

Example 1 :

var b = "Hello"
        function Checkb(){
            console.log(b)
        }
    Checkb();
    console.log(b);

Explanation: So above in the example you can see variable “b” with var keyword is declared globally and we tried to get value two times one time inside function and second time globally (outside the function) so both the ways we get the correct result . See output

Output:

"Hello"
"Hello"

But if the variable “b ” with var keyword declared inside the function then it is only accessible inside the function and not accessible outside the function and throw a Reference error .

Example 2:

function f() {
 
        var b = "Hello";     // It can be accessible anywhere
        console.log(b)        // within this function
    }
    f();
 
    console.log(b);      // B cannot be accessible
                        //because outside of function

Output:

Explanation: So in the second example the variable “b” is declared inside the function so we tried to get it once inside and then outside the function. In the first we got the expected result but for the second we got ReferenceError because the variable with var keyword is not accessible outside the function . So we come to know with the global scope, var keyword also has function scope.

2) Let :

As I mentioned above , let is introduced in ES6. let is the improved version of var . Using let keyword you can reassign value to a variable with let keyword but you can not redeclare the variable with let keyword .

Example:

let b = 1
let b = 2     //error~ user cannot redeclare the variable again
 b = "0"      // you can reassign value to the variable

Explanation:

The variable “b” is already declared with let keyword so you cannot redeclare it. If you do it you will get SyntaxError( b has already been defined ). but you can reassign value to variable as I did above.

Scope:

let has block scope. Anything inside the {} is considered a block. Block scope means if “b” variable is declared inside the block then it is not accessible outside the block .

Example:

let c = 10
if (c == 10) {
let a = "hi"
console.log(a) 
}
console.log(a)

Output:

hi
ReferenceError: a is not defined

Explanation:

we tried to get value of “a” inside the block where “a” is declared so we got the value as expected. but for the second time we did not get the expected value instead we got ReferenceError . Because “a” is declared inside the block if we try to access it outside it show you error. It happens because any variable declared with let keyword becomes block scope .

3) Const :

Const keyword is also introduced with let in ES6 . Const is quite self-explanatory. const variables maintain constant values. While the nature of const is quite different from let , they both share a lot of similarities like they both have block- scope. The const keyword has all the properties that are the same as the let keyword, except the one that user cannot update it. See Example Below

//let
let a = "john"
a = "micheal"       //value can be updated
//const
const b = "red"
b = "blue"       // give you error because can't be updated

Using const keyword you can not reassign the value nor you can redeclare the variable with const . If you do it will give you error .

Example:

const b = "red"
const b = "green"   // not allowed to redeclare 
b = "yellow"     // not allowed to reassign the value

Scope:

As I mentioned before const also has block scope like let . What the block scope is , it is already cleared above .

Example:

{
 const x = 9
 console.log(x)
 }
 
 console.log(x)

Output:

9
ReferenceError: x is not defined

Most Preferable :

Using const keyword , the code become cleaner but with var keyword the code becomes messy because it is difficult to debug the code if you reassign the value to a variable with var keyword mistakenly in long code . so most preferable by the developers are const and let … Especially const makes the code more cleaner and its easy to debug the error.

Conclusion :

Before finishing , let’s sum up what we just understand:

var: function-scoped and can be updated and redeclared.

let : block-scoped, can be updated, but cannot be redeclared.

const : block-scoped, cannot be updated and redeclared.

I almost clear all main things but if you want deep detail in scoping you can check this freeCodeCamp .