var vs. let

From my experiences using other languages, I haven't found an exact parallel with how ES6 offers two options for variable declaration. In the case of var and let, their differences affect the scope and access-level of the variable which seems to be unique to JS.

Error handling (strict mode)

One noticeable difference between var and let is the ability to redeclare the variable in the same scope. This means being able to overwrite the declaration of a variable.

var

In the case of var, it behaves just as a normal variable may in other languages, and allows you to redeclare the variable without any issue. While this is good, it potentially might be dangerous when considering security or just the robustness of code if variables that the developer wants to be unchanged can be altered with.

let

So this is where let comes in - where:

Trying to redeclare a let variable while you're in the same scope (within the same level of curly braces) raises a SyntaxError

So in that sense, variables declared using let can be considered to be more secure than var because the first declaration is firm and cannot be redefined accidentally.

Example

'use strict';
var foo = "foo1";
var foo = "foo2"; // No problem, 'foo' is replaced.

let bar = "bar1";
let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared

Source: https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var

Scope

Another major difference between var and let comes with the scope of the variables. The ruling between the two follows:

This difference can be seen using a code example where you change a variable declared by var and one declared by let and print their values.

function example() {
    // Within the same scope
    var foo = "Foo";
    let bar = "Bar";
    
    console.log(foo, bar); // prints 'Foo Bar'
    
    // Outside of the scope
    for(var i=0; i<3; i++) {
    }
    console.log(i); // prints 3 (accessible anywhere within the function)
    
    for(let j=0; j<3; j++) {
    }
    console.log(j); // j is unknown outside the loop (scope)
}

example(); // run the example

This might be useful for you if you need the value of i elsewhere outside of the loop, or it could be a hindrance, carrying the old value which may affect some other calculations that occur later in your code. If the second scenario is your case, then using let will prove useful as a guarantee to always provide a fresh value outside of the declared scope.

Browser Support

Finally, the question then comes down to which is better to use? var or let?

Unfortunately the answer isn't that simple, simply because their uses are quite conditional. Using var in some cases has advantages over let, and the same applies vice-versa. The usage of which is really dependent on the developer and the environment they're using when deciding whether or not let is a safe alternative to var.

However, it is to be noted as JavaScript is used as a web technology, some browsers don't support the use of let , so knowing which ones do should be the first question if you are intent on using it. Most major frameworks and modern browsers do provide support, but with lesser known structures, you'll find you need to sacrifice performance or utilise some hacky implementations to get what you want.

Last updated