For a long time, var filled a lot of roles in JavaScript: at the start of many older scripts, most everything appeared to be a variable. ES2015 introduced a true constant in the form of const, but also added a replacement for var called let. So what is let, and why should you use it instead of var?

A Problem of Scope

I’ve previously written about scope, and how variables are either global, or limited to the scope of the function they are written inside. let is more granular: it is scoped to the nearest enclosing block.

What does block scope mean for variables? If a variable declared inside a block of code that is surrounded by curly braces, it is valid only within that block, and the variable if referred to as having block scope. This is not the case in JavaScript outside of functions; for example, a variable set inside a for loop can “leak”. outside of its context.

for (var i = 0; i < 9; i++) {
    // do something
}
console.log(i);

In the above code, i will still be a registered variable after the for loop is complete: the console will report a value for the variable. While this might be useful in some cases, it’s more likely to pollute the global namespace, causing problems as your code becomes more complex.

Using let

In contrast, let is only understood inside it’s particular context:

for (let i = 0; i < 9; i++) {
    // do something
}
console.log(i);

i will be reported as undefined in the console, although it works perfectly well when it is used in the context of the for loop.

The same scope restrictions are in place for let within any set of curly code braces in JavaScript:

if (condition == true) {
    let x = 3;
    …
}

In the case above, x will be understood only between the opening and closing curly braces.

It should be noted that const is also block-scoped. And, of course, let defined outside a block scope can be referenced within the inner scope, so long as that scope is contained inside the block:

let orbit = 4;
if (resonance = 3) {
    orbit++;
}

Similarly, let defined at the very start of a script will be global.

Conclusion and Browser Support

let is valid in any context that var is, and functions as a replacement in ES6 (or, at least, is a close cousin). While var still has some uses, let should be used in its place in manyu cases in modern JavaScript development: it’s safer and more direct way of using variables, saying “use this variable here, and only here”..

The one issue is browser support: as a recent addition to the JavaScript spec, let only supported in recent browsers: IE 11 (and Edge, of course) in desktop and mobile, Firefox 44+, Chrome 41+, Android 52, and (most recently) in Safari 10 (desktop and mobile). For that reasons, JavaScript code that uses let is often compiled back to ES5 compatibility (and thus broader browser support) for production using an application like Babel, at least in current development practices.

Photograph by Trey Ratcliff, used under a Creative Commons license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.