let VS var JavaScript

In this article, you will understand the difference between let and var in JavaScript.

Both let and var are used to declare variables in JavaScript. But there are some differences between them.

Difference between let and var

It may look like both let and var are the same for beginners because both can declare a variable. But when you look at them closely, you will find they are different.

Here are some of the differences between them based on different parameters.

Scope - The scope of these two keywords creates the most significant difference between them. let is only accessible within the block in which it is defined. Whereas, var is accessible within the function in which it is defined.

The following example shows how they are different in terms of scope.
Example
```
function example() {
    if (true) {
        var x = "function scope";
        let y = "block scope";
    }
    console.log(x); // "function scope"
    console.log(y); // ReferenceError: y is not defined
}
example();

// similarly x is not accessible outside the function
console.log(x);
```
You can see that var is accessible outside the block in which it is defined. But let is not accessible outside the block in which it is defined.
Redeclaration - Any variable that is declared with let keyword cannot be redeclared within the same scope. But var can be redeclared within the same scope.

Here is an example to show this:
```
let x = 10;
let x = 20; // ❌ SyntaxError: Identifier 'x' has already been declared

var y = 10;
var y = 20; // ✅ No error
```
You can see that let throws an error when you try to redeclare it. But var does not, redeclaration is valid with var.
Hoisting - Hoisting in JavaScript is a process in which variable and function declarations are moved to the top of the scope before execution. let is not hoisted, but var is hoisted.

You can use a let variable only after the declaration. But you can use a var variable before the declaration.

Let's see an example to understand this:
Example
```
x = 10; // ✅ No error
console.log(x); // 10
var x;

y = 10; // ❌ ReferenceError: Cannot access 'y' before initialization
console.log(y);
let y;
```
You can see that var is accessible before the declaration. But let is not accessible before the declaration.
Temporal Dead Zone - Temporal Dead Zone is a period of time when a variable is not accessible. let has a temporal dead zone, but var does not.

This means that you cannot access a let variable before the declaration. But you can access a var variable before the declaration.
Example
```
console.log(y); // undefined
var y = 5;

console.log(x); // ReferenceError: x is not defined
let x = 5;
```
You can see that let throws an error when you try to access it before the declaration. But var does not, it returns undefined.

Other Interesting differences

Inside a loop

When you declare a variable inside a loop using let it is accessible only inside the loop. But when you declare a variable with var inside a loop then it is also accessible outside the loop.

Example

// initialize i with var
for (var i = 0; i < 5; i++) {
  // console.log(i); // 0, 1, 2, 3, 4
}
console.log(i); // 5

// initialize j with let
for (let j = 0; j < 5; j++) {
  // console.log(j); // 0, 1, 2, 3, 4
}
console.log(j); // ReferenceError: j is not defined

You can see that let is not accessible outside the loop. But var is accessible outside the loop.

Loops with closures

When you use let inside a loop, it creates a new variable for each iteration. But when you use var inside a loop, it creates only one variable and it is updated in each iteration.

This will result in different outputs when you use let and var inside a loop.

Example

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 5, 5, 5
  }, 1000);
}

for (let j = 0; j < 3; j++) {
  setTimeout(function() {
    console.log(j); // 0, 1, 2
  }, 1000);
}

You can see that let creates a new variable for each iteration. But var creates only one variable and it is updated in each iteration.

Global let and var

The global let variable is not added to the global object. But the global var variable is added to the global object.

Let's see an example to understand this:

Example

let x = 10;
console.log(window.x); // undefined

var y = 10;
console.log(window.y); // 10

Conclusion

You can declare a variable using both let and var, but it is preferable to use let.

Happy Coding!😇