In ES6 JavaScript introduced the let statement. In this post I will be going over some of the main differences with let vs var and maybe a real world example or two of when to use let over var.

First, it is important to remember that let is an ES6 feature, which means it's still not available on every browser (you can check availability here). Although almost all modern browsers support ES6 and the let syntax there are for sure browsers out there that don't support it and customers who run on older browsers.

The major difference between let and var is how it's scoped. var is scoped to the nearest enclosing function block, or globally if there is no function block. let on the other hand is scoped to the nearest enclosing block, which can be smaller than a function block, or global if not withing any block. For example take the following code.

function varSyntax() {
    // i *is* visible out here

    for (var i = 0; i < 5; i++) {
        // i is visible to the whole function
    }

    // i *is* visible out here
}

Whereas with let.

function letSyntax() {
    // i *not* visible out here

    for (let i = 0; i < 5; i++) {
        // i is only visible in here
        // there is a seperate i variable for each iteration of the loop
    }

    // i *not* visible out here
}

I have had situations before where I have wanted to run async JavaScript within a for loop then update that specific element based on the result of the async JavaScript. Problem is the async JavaScript at that point i will always equal the last value of the last time the loop ran and not specifically the element I want to update. For example.

function asyncVarFunction() {
    var array = ["Hi", "Hello", "World"];

    for (var i = 0; i < array.length; i++) {
        $.get("/"+array[i], function (data) {
            array[i] = data;
        });
    }
}

Problem is, this code will only update the last element in the array. So any response I get will only update the last element in the array because i will always equal 2 within the ajax callback function.

If we convert this to the let syntax this issue will be fixed.

function asyncLetFunction() {
    var array = ["Hi", "Hello", "World"];

    for (let i = 0; i < array.length; i++) {
        $.get("/"+array[i], function (data) {
            array[i] = data;
        });
    }
}

So the only change we made is changing var to let. This will scope it to that specific function and now it will update every individual element instead of updating only the last element.

When I first learned about this it was a surprisingly easy fix for what seemed like a very complex problem.

The major downsides to let is the fact that is it still a new feature and not widely supported yet. The other major thing that doesn't make sense is in a programming language like Swift, var in Swift behaves like a let in JavaScript, and let in Swift behaves like a const in JavaScript. Although it makes sense why this is (changing var in JavaScript to be like let in JavaScript, would cause major problems in everyone's code), it's still annoying to have to remember that major difference between languages.