Out with var

Prior to ES6, JavaScript required var to define variables. If we forget to define a variable explicitly before assigning to it, we’ll accidentally define a global variable. The ’use strict’; directive saves us from that error. In short, all variables should be defined before their first use. However, var is not the right choice, as we’ll see here.

var does two things poorly. First, it does not prevent a variable from being redefined in a scope. Second, it does not have block scope. Let’s explore these two issues with examples.

Redefining

It’s poor programming practice to redefine a variable in the same scope as that often leads to errors in code. Here’s an example where a variable max is redefined.

On line 5 the variable max, which already exists, is redefined. If the programmer intended to assign a new value to an existing variable, then there should be no var declaration on that line. It appears, though, that the programmer intended to define a new variable, which happens to have the same name as an existing variable, thus accidentally erasing the previously stored value in that variable.

If a function were several lines long, it’s possible that by accident we may redefine a variable for a different purpose or intent. Unfortunately, JavaScript doesn’t give us any hint of the variable being redefined when var is used—tough luck.

No Block Scope

Variables defined using var within functions have function scope. Sometimes we may want to limit the scope of a variable to a smaller scope than the entire function. This is especially true for variables that are defined within a branch or a loop. Let’s look at an example with a loop to illustrate the point.

The variable message was defined within the loop—what happens in a loop should stay in the loop, but vars are not good at keeping secrets (poor encapsulation). The variable spills over the loop and is visible outside the loop—var hoists the variable to the top of the function. As a result, both message and the loop index variable i are visible throughout the function.

Not only is the variable, defined using var, visible following the block, it’s also visible before the block. In other words, regardless of where in the function a variable is defined, it has the scope of the entire function.

Here’s the output of running the previous code:

In short, var is a mess; don’t use it.

var is terrible, but programmers have used it extensively for a few decades in JavaScript. Changing its behavior to fix these issues or removing var entirely will create compatibility issues between old and new JavaScript engines. This will turn into a nightmare for developers who deploy code on different browsers. That’s the reason why var is still lingering around in the language. Even though the language can’t get rid of it, we can and should. Quit using var and choose from the new let or const.