Difference between var and let in javascript

 

For better understanding what is the difference between var and let in javascript, let us understand the scope concept in JavaScript. Basically JavaScript has a different scope like

1. Global Scope: The variable declared globally and the same variable is available for access throughout your code.
2. Function Scope: The variable declared inside a function and it can be accessed inside the function itself
3. Block Scope: The variable declared in a block and those variables are needed in the block.

So, the difference between var and let in javascript is that

1. let can be used to declare a variable that is needed only in the scope of block statement. And
2. var can be used to declare a variable globally or locally inside any functions.
3. The major difference is that let can not create a property on the global object
4. let generates a SyntaxError if try to redeclare the same variable in the same scope of block statement.
5. When you try to access the variable that is declared with the help of var it is evaluated to undefined, but
6. When you try to access a variable that is declared with the help of let it will generate a ReferenceError.

Now Let’s see the same points with an example, consider below example for scope

let x = 1;

if (x === 1) {
    let x = 2;

    console.log(x);
    // output
    // 2
}

console.log(x);
// output
// 1

One more major difference is that let can not create a property on the global object, let’s consider below example

var x = 'global';

let y = 'global';

console.log(this.x); // "global"

console.log(this.y); // undefined

Redeclarations:
One more difference is, let generates a SyntaxError if try to redeclare the same variable in the same scope of block statement.

let globalVar = 'Global var';

let globalVar = 'Global var';

console.log(globalVar); 

// output
// Uncaught SyntaxError: Identifier 'globalVar' has already been declared

To resolve the above SyntaxError you can create a nested block environment

if(true)
{
    let globalVar = 'Global var';
    
    console.log(globalVar+' in first block'); 
}
if(true)
{
    let globalVar = 'Global var';
    
    console.log(globalVar+' in second block'); 
}

// output
// Global var in first block
// Global var in second block

Temporal dead zone:
When you try to access the variable that is declared with the help of var it is evaluated to undefined.
But when you try to access a variable that is declared with help of let it will generate a ReferenceError.

console.log(varWithVar); 

var varWithVar = 'Varibale with var';
// output
//undefined

console.log(varWithLet); 
let varWithLet = 'Varibale with let';
// output
// Uncaught ReferenceError: Cannot access 'varWithLet' before initialization

Read the next article  How to create an object in javascript?