Should I use Var or Let?

Frontend Web Development: The Big Nerd Ranch Guide Chapter 6: Handling Events with JavaScript
1

The book uses “var” for declaring the variables. I hear from some web developers that “var” is no more the way to declare variables. Should I use “var” or “let”?

1 Like
2

Find out first whether the JavaScript makes a distinction between the two types of declaration. That is, which type of variable (var or let type) can be assigned values multiple times after the declaration.

Some programming languages have the notion of value-invariant or constant variables. This type of variables can be assigned values only once.

3

Hi @JohnV! First, a little background. JavaScript has always had the var keyword for declaring a local variable. Until ES6, variables where “function scoped,” which means variable declarations are local to the nearest function. For example:

var myFunction = function() {
  if (false) {
    var myVariable = "hello";
  }
  console.log(myVariable);
};
myFunction();

// => undefined

This looks like the console.log should line should blow up, since myVariable is declared within an if statement that never executes. However, local variables declared with var are “hoisted” to the nearest function, which is equivalent to:

var myFunction = function() {
  var myVariable;
  if (false) {
    myVariable = "hello";
  }
  console.log(myVariable);
};
myFunction();

Thus, undefined is logged instead of crashing.

Now fast forward to ES6. The let keyword gives you “block scope,” which means local variables are “local” to the nearest block (essentially, the nearest curlies) instead of the nearest function. So this:

var myFunction = function() {
  if (false) {
    let myVariable = "hello";
  }
  console.log(myVariable);
};
myFunction();

// => Uncaught ReferenceError: myVariable is not defined

Will crash. let solves the common use case of creating a closure over local variables inside a for loop:

fns = [];
for (let i = 0; i < 5; i++) {
  fns.push(() => console.log(i));
}
fns.forEach(fn => fn());

// => 0
// => 1
// => 2
// => 3
// => 4

If i had been declared with var, it would print out five 5s instead, since the closures all point to the same function-scoped variable.

Should I use var or let?

So back to your question, most ES6 adopters will tell you: “You should always use let! There is no reason to use var anymore.” And in a way, they’re right: the let keyword was intended to be a “replacement” for var, since in JavaScript we can never remove functionality, so var will never go away.

let also triggers a useful exception: you cannot declare a variable more than once in the same scope. So this:

var myVar = 5;
var myVar = 3;

Would not cause issues, while using let will:

let myVar = 5;
let myVar = 3;
// => Uncaught SyntaxError: Identifier 'myVar' has already been declared

A double declaration in the same scope is almost always a bug, so this is helpful. Prior to let, static analyzers like ESLint and JSHint could easily catch these issues, so it’s rarely an issue with var. Still, it’s nice.

My personal take: let is much better mannered when it comes to double declarations. However, I personally dislike block scope. In a language that is already functionally motivated, var's functional based scope makes so much more sense, and it encourages you to write short, shallow functions (design principles that apply to any language) instead of nesting if statements and loops.

That said, let is definitely a better beginner experience, albeit it’s actually harder to teach :slight_smile:

My recommendation: always use let in your own code, but treat it like var. Don’t rely on block scope to create elaborate functions with multiple ifs and for loops, but stick to nesting curlies no more than one level before asking if another function should be extracted.

1 Like