JavaScript var vs let. Which one should you use?

If you are a JavaScript developer you would probably know about var and let. But those who are not familiar with it let me introduce it to you.

Before ES2015 in JavaScript, you have to use var keyword in order to declare/define variables. But in ECMAScript 2015 two new keywords introduced those are let and const.

Before ES2015, JavaScript had only two types of scope: Global Scope and Function Scope. After ES2015, those two keywords support of Block Scope. You probably arise a question about what do you mean by this scopes.

Let me tell you about the scope first: In simple words, the Scope of variable means in which block of code it would be available to use.

Global Scope: Variables declared Globally (outside any function) have Global Scope. Global variables can be accessed from anywhere in a JavaScript program.

Function Scope: Variables declared within any function would be bound to that particular function and have Function Scope. It would not be available outside of that function.

Block Scope: Variables declared inside a block {} can not be accessed from outside the block. With var keyword can not have Block Scope. It would be also available outside of that block. But if you declare variable with let or const keyword it would not be accessible outside of that particular block.

Let me give you some examples so that it would be clear to you:

1) Using var keyword

I have prepared a small function test to demonstrate to you the behavior of var keyword in JavaScript. Please, take a look at the above snippet and think about the output of the program.

Output:

Now, let me tell you what is going on in this example and how this output is produced.

As stated before, var does understand the function and global scopes and doesn't understand block scope.

I have defined the name variable globally and variable inside of function test with the same name.

So at line 26, it refers to the global name variable.

Now if you refer the name variable inside the function test then it would point to the global variable if the local variable does not exist with that particular name.

But in the above example, I have declared name inside the function so if I refer the name inside the function it would give me the value of that local variable.

In the function, I have also used block and again defined name variable at line 18. But that would overwrite existed name variable because var doesn't understand block scope. so it produced that output of the console statement at line 21.

2) Using let keyword

Now let try the same program but by using the let keyword instead of the var keyword.

Now think about output based on above all rules.

Output:

Now I hope it would be totally clear by just seeing the above output.

If you use let keyword then you variable would be bound to global, function or block scope, not just global and function scope.

So at line 26, it refers to the global name variable.

But at line 21, it would not be overwritten by that block variable, and still refers to that name variable defined at line 15. And variable defined at line 18, would be only available inside that particular block and not outside of that block.

You can also refer to this great article about let keyword:
https://www.w3schools.com/js/js_let.asp

Which one should you use?

• After comparing var and let, I highly recommend you to use let instead of var unless you have a strong reason to use var keyword. Because using var, it may produce unexpected output and it would be hard to find errors in large programs. It would be a headache sometimes. While using let, you do not need to mess with the scopes. It would not lead to unexpected outputs.

I hope now it would be very clear to you why you should use let and how it works.

Please comment down below your thoughts about it.

Comments

[Williams Oluwafemi]

DO NOT USE var in an interview, or any situation where your code will be judged because it will give the impression that you are a newbie that is not up to date on new developments of js

[Yash K]

yeah. that is true.

[Joe Maffei]

1. Avoid the global scope.
2. Use const.
3. Need to reassign it? Use let.
4. Need to support old browsers? Use var.

[Yash K]

Great Rules!

Actually, let is supported in most browsers but it is not supported in Internet Explorer 11 or earlier. You can check that in here: w3schools.com/js/js_let.asp

[Heiker]

I actually wonder how useful block scoping really is.

I think most problems that people have with var can be solve by being explicit when declaring the variable and using unique names.

[Sebastian Vargr]

This ^

If you have the same variable name in your nested blocks, then likely you are also fudging up the readability, a lot, in my experience.

Which is usually where other problems start...

[Sebastian Vargr]

"var' faen" what Scandinavian devs think phonetically when we see var' i reccon.

Roughly translates to "what the devil".

[gmeister-ticketline]

I really enjoy the scoping freedom that var affords (no pre-declaration of variables in if statements for example). I am all for controlled scope in the right context, but JS is designed to be freer of scope restrictions than other languages. Why is the community hell bent on going back on this freedom? If I want a tightly controlled scoping language, I wouldn't use JS in the first place.

[Hatim Hussein]

thx ♥

[southpaw43]

i'll go for let and const