DEV Community

Cover image for JavaScript var vs let. Which one should you use?
Yash K
Yash K

Posted on • Updated on

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

Alt Text

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.


Alt Text

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.

Alt Text

Now think about output based on above all rules.


Alt Text

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:

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.

Top comments (10)

vvilliam5 profile image
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

meetwithyash profile image
Yash K

yeah. that is true.

joemaffei profile image
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.
meetwithyash profile image
Yash K • Edited

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:

vonheikemen profile image

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.

sebbdk profile image
Sebastian Vargr • Edited

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...

sebbdk profile image
Sebastian Vargr • Edited

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

Roughly translates to "what the devil".

gmeisterticketline profile image

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 profile image
Hatim Hussein

thx ♥

southpaw43 profile image

i'll go for let and const