JavaScript var vs let. Which one should you use?
Tags: javascript, beginners, node, tutorial
Published: 2020-01-02 06:07:12

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](https://thepracticaldev.s3.amazonaws.com/i/uxzev7tbsv9db8yvl4d2.jpg)

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: 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9fd8yoaphehv26bg7ydp.jpg)

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](https://thepracticaldev.s3.amazonaws.com/i/vtj1e442om1hnoyjh8xb.jpg)

Now think about output based on above all rules.

Output:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sa2omyabv4r9qbyggq8v.jpg)

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.