Before ECMAScript 2015, we only had the use of the var keyword for defining variables. The lifetime of a var keyword was from the function declaration to the end of it. This could lead to quite a few problems. The following code showcases one of the issues that we could run into with the var keyword:

var fun = function() {
    for(var i = 0; i < 10; i++) {
        state['this'] += 'what';
    }
    console.log('i', i);
}
fun();

What would the console print out? In most languages, we would guess that this is an error or that it would print null. However, JavaScript's var keyword is function scoped, so the variable i will be 10. This has led to many bugs popping up by accidentally forgetting to declare it a variable, or even the dreaded switch statement errors (these still happen with let and const). An example of a switch statement error is as follows:

var x = 'a';
switch(x) {
    case 'a':
        y = 'z';
        break;
    case 'b':
        y = 'y';
        break;
    default:
        y = 'b';
}
console.log(y);

From the preceding switch statement, we would expect y to be null, but because the var keyword is not block-scoped, it will be the letter z. We always had to stay on top of variables and make sure that we were not using something that was declared outside our scope and changing it, or we were making sure that we were redeclaring variables to stop leaks from happening.

With both let and const, we got block scoping. This means that the curly braces tell us how long our variables should live for. An example of this is seen here:

let x = 10;
let fun2 = function() {
    {
        let x = 20;
        console.log('inner scope', x);
    }
    console.log('outer scope', x);
    x += 10;
}
fun2();
console.log('this should be 20', x);

As we look at the printouts for the variable x, we can see that we have first declared it as 10 outside of the function. Inside the function, we have created a new scope with the curly braces and redeclared x as 20. Inside the block, the code will print out inner scope 20. But, outside of the block inside of fun2, we print out x and it is 10. The let keyword follows this block scope. Had we declared the variable as var, it would have stayed as 20 when we printed it out the second time. Finally, we add 10 to the outer x and we should see that x is 20.

In addition to getting block scoping, the const keyword gave us some immutability. If the types that we are working with are value types, we will not be able to mutate that value. If we have a reference type, the values inside the reference can be changed, but we cannot change the reference itself. This leads to some nice capabilities.

A great style of coding is to use const as much as possible and only use let when we need to mutate something at the base level, such as loops. Since an object, array, or a function can have its values mutated, we can set them to const. The only downside that this has is that they cannot be nulled out, but it still adds quite a bit of safety on top of possible performance gains that the compiler can utilize knowing a value is immutable.