difference between 'var' and 'let' keyword in javascript

Hello reader, I hope you are doing fine. So before we jump into the "why we should not use the 'var' keyword in JavaScript", Let's recall what is a scope in JavaScript.

What is Scope?

When we are talking about scope, we are talking in the context of variables. That is the Scope of variables. A Scope of a variable determines the accessibility or visibility of that variable. There are three kinds of scope:-

Global Scope
Function Scope
Block Scope ( new with ES6 )

Global Scope:

Global Scope variables are declared outside functions and can be accessed anywhere in the javascript program. Thus, It is Global Scope.

let message = "hello planet";  //Globally declared variable outside functions 
function greetings(){
    let greeting = "hi, how are you";
    console.log(message);     // accessing that global variable inside our function
}

Function Scope:

Variables defined within a function are in the local scope and are not accessible in other functions. Each function, when invoked, creates a new scope, therefore variables with the same name can be used in different functions.

let message = "hello planet";  
function greetings(){
    let greeting = "hi, how are you";  //function scope or local scope 
    console.log(message);     
}
console.log(greeting); // this will give error, greeting variable can't be accessed outside the function it is declared

Block Scope:

Block scope includes if statements and loops, or any other code wrapped in {}. When invoked, they don’t create a new scope. Variables declared inside a block scope will remain in the scope they were already in.

function hello(){
    let greeting = "hi";
        if(true){
                let box = 64;      //block scope , cant be accessed outside this if block
                }
       console.log(box)  //gives error
       }
console.log(box)  //gives error

Difference between let and var keyword

Okay, let's get back to our main topic. If you have noticed in the above code snippets, everywhere I have used the 'let' keyword and not 'var'. And I believe by the end of this blog you will too. No lol, your code will not explode if you use var. But it's a better approach and let me tell you why.

See, when 'let' was not introduced in javaScript, 'var' was commonly used to declare variables. Variables declared using the var keyword are either globally or functionally scoped, they do not support block-level scope.

LETS US UNDERSTAND WITH AN EXAMPLE

using 'let' to declare


for(let i = 1; i < 5; i++){
const pi = 3.14;
let message = "hello planet earth";
}

console.log(message);

In the above code, we can't access the variable 'message' outside the for-loop because it is blocked scope. 'let' or 'const' keywords when used to declare variables support all three scoping: global, block, and function.

using 'var' to declare variable

 for(let i = 1; i < 5; i++){
const pi = 3.14;
var message = "hello planet earth";
}

console.log(message);

Now, the program will not give errors and the output will be: hello planet earth

This is because the 'var' keyword does not support block scoping. So, the concept of block scope does not exist if we use the 'var' keyword to declare any variable.

This means any variable inside a for loop or any block statements can be accidentally redefined leading to a buggy program if we use 'var'. This can create some complications in your program and scoping issues.

As a general rule, you should avoid using the var keyword.

That's it, Keep coding :) Good luck!

Sagar's Blog