Difference between let and var in JavaScript | let v/s var | ES6 | JavaScript Tutorial Series by SFDC Stop

 Hello Trailblazers,

Welcome to the first tutorial in JavaScript Tutorial Series by SFDC Stop. In this tutorial, we're going to learn about the difference between let and var in JavaScript. This tutorial is published on SFDC Stop YouTube Channel. So, if you want to learn in detail, have a look at the tutorial video down below. Otherwise, you can scroll down to have a look at the code gist with explanation.

Tutorial Video

Code Gist with Explanation

Let's have a look at the code snippet given below:

What do you think will be the output of above code snippet? Think about it. When you try to execute this code, you'll get the output as shown below:

As you can see that the value is updated only inside the function, this means that the var keyword supports function scope as the value is updated only inside the function and the variable which is declared outside the function remains unchanged.

Now, let's replace this var keyword with let and check the output again. Below is our updated code:

What do you think will be the output of above code snippet this time? When you try to execute this code, you'll get the output as shown below:

As you can see , the output is the same when you're replacing var with let. This means that Both the let and var keyword supports function scope. Now you must be wondering that:

 WHY SHOULD I USE LET INSTEAD OF VAR WHEN BOTH ARE SAME?

To answer this question, we need to study another code snippet. This time, we're going to replace the function with a block. Let's have a look at the code snippet given below:

What do you think the output will be when we execute the above code? When you try to execute this code, you'll get the output as shown below:

As you can see above, this time the value of the global variable is also updated even if we're assigning the value to a local variable inside an if block. This means that the var keyword doesn't support block scope. Let's try to replace this var keyword with let and check the output again. The updated code snippet is given below:

What do you think will be the output of the above code? When you try to execute this code snippet, you'll get the output as shown below:

As you can see above, this time the result is correct i.e. the value of the global variable is not updated inside the if block. This leads us to the conclusion that the let keyword supports block scope. 

To summarize, the learnings are given below:-

• Both var and let keyword supports function scope.
• var keyword doesn't support block scope
• let keyword supports block scope

This was the reason when let was introduced, it was said that let is the new var because is supports block scope which makes JavaScript more similar as different programming languages and it leads to less errors.

So, next time when you're about to declare a variable in your JavaScipt code, make sure to use let instead of var.

That's all for this tutorial. I hope you liked it. All the code used in this tutorial is available on GitHub and you can have a look at that by clicking here. Make sure to have a look at the video if you want to learn in detail and let me know your feedback in the comments down below.

Happy Trailblazing..!!