Where to use `var` and where `let` in javascript? (NOT asking difference)

Question

I have read my blog about the var and let. What I see is this.

var is a function or global scope variable depend on where it is defined.

where

let is block scope variable

So in lots of articles, I see they recommend to use let instead of var. I understand that because it eliminated the conflict of the scope of a variable.

So I want to ask where to use let and where to use var? If possible please provide any relevant link for that. If I go with recommendation than I have to use let everywhere.

What I understand is this.

let should be used in for loop as it creates its own lexical scope.

for(let i =0;i<5;i++){
  setTimeout(function(){
   console.log(i);  
  },100);
}

So in this case because of let, we will able to print 0,1,2,3,4, but if we have used var it would have print 5 time 5.

Also, I want to know your suggestion on what should be used in function scope and global scope?

let say, I have file index.js

var first = 1; // what should be used here and why

function function1(){
  var first = 1;  // what should be use here and why `let or var`
  var first1 = 2; // what should be use here and why `let or var`
  for(let i=0;i<2;i++){
    console.log(i);
  }

Also, I fill let is more than a variable, I create its own lexical scope, there would be more manipulation under the hood like creating IIFE sort of thing.

What I understand is that we should use function and global scope as var and let as only block scope? Please provide any recommended link which describes what is better where and why?

Thanks.

Answer 1

It's mostly right to only use let these days.

In almost all situations, let is a better or at least equivalent to var considering that leaky declarations make you write error prone code. Avoid using var.

Look at this code:

for(var i = 0; i < 6; i++) {
  document.getElementById('my-element' + i)
    .addEventListener('click', function() { alert(i) })
}

contrary to this code:

for(let i = 0; i < 6; i++) {
  document.getElementById('my-element' + i)
    .addEventListener('click', function() { alert(i) })
}

The first one makes a closure which catches i, defined by var, while the other one makes i different values. The first example makes every callback alert 6, since they are all pointing to the same object. However, the let in the second example makes a new block scope every time it iterates. This solves a very common pitfall in javascript.

In most situations, if you need to use var's scope to achieve something not available using let, it's almost always a sign that's something is wrong.

Also, don't rely on var's variable hoisting. If you are using a variable you didn't declare before, it becomes error prone.

Mostly, try to follow on the style guide you follow. If you don't have a special style guide you follow, try the AirBnB's: https://github.com/airbnb/javascript The "never use var and use let" thing is mentioned here: https://github.com/airbnb/javascript#variables

Answer 2

let and var

You should use var, when you wan to define a variable globally, or locally to an entire function regardless of block scope. Variables assigned with the var keyword have functional scope. The variable isn’t accessible outside of the function.

And, you should use let to declare variables that are limited in scope to the block, statement, or expression on which it is used. When used inside a block, let limits the variable's scope to that block.

Variables assigned with let are very similar to those defined with var. The major difference is scope. This has been referenced above. Variables assigned with let have block scope. This means the variable can be seen within that block and any sub-blocks. Variables assigned with var have functional scope and ignore block scoping rules. Variables assigned with let can not be redeclared, they can only be reassigned.

According to this article, Only use the let keyword when you know that a variable will have a dynamic value. You probably don’t need to use var anymore

Answer 3

Clearly, you know the difference between let and var, and your question is WHERE TO USE WHICH?

First of all, if you are seeking for a better performance, use let wherever you are able to. However, you have to be aware that some old browsers may not be able to handle the let.

Second, I think the best and shortest answer to your question is " use let as long as you can, and if you couldn't then use var".

If you study the differences between let and var deeply, you can figure out where you should use var instead of let, I recommend you to read this article.