JavaScript Variables: var and let and const

tldr;

There are three ways to create variables in a JavaScript application: using var, using let, or using const. This will not be a post trying to convince you which one you should use, or arguing about what is best. It’s just good to know about the differences and what it means when you use the different options. But hopefully by the end of all this you’ll be comfortable with the three options and can make a decision for your team that will suit your needs. To get the most out of this post, it is best if you understand variable scope, which we covered in this post previously.

Variables using var

When you declare a variable with var, the variable will be function scoped. If you try and use the variable before it’s declared in that function, it will have an undefined value due to hoisting. These may be desired effects for your app, but my recommendation is to not use var for variable declarations.

Variables using let

When you declare a variable with let, the variable will be block scoped. If you try to use the variable before it’s declared in that block, or outside that block, a ReferenceError will be thrown. This is nice because the occasions should be rare that you use a variable before declaring it. These variables are also re-assignable. Let’s look at an example:

function playGame() {
    let gameName = 'Super Mario Brothers';

    gameName = 'Mario Kart 8';

    console.log(gameName); // Mario Kart 8
}

playGame();

In the above example, we declare the gameName variable and initialize its value to Super Mario Brothers. But right below it, we reassign the value to a different string, Mario Kart 8. This is completely valid for variables declared with let. My recommendation is to use let any time you need to reassign the value of a variable. Examples of when you might need to do this would be when in a for loop, for example.

Variables using const

When you declare a variable with const, the variable will be block scoped. If you try to use the variable before it’s declared in that block, or outside that block, a ReferenceError will be thrown. This is nice because the occasions should be rare that you use a variable before declaring it. The difference between const and let, though, is that variables declared with const can not have their values reassigned. So our above example would produce a TypeError for trying to assign a value to a constant variable. Let’s look at an example of ways that you can change parts of a const variable:

const game = {
    title: 'Zelda: Breath of the Wild',
};

game.title = `Zelda: Link's Awakening`;

console.log(game.title); // Zelda: Link's Awakening

Even though game was declared using const, we can still change the value of an attribute on the object. The same is true with arrays. You can push onto an array declared with const. What you can’t do is the following:

const game = {
    title: 'Zelda: Breath of the Wild',
};

game = {
    title: `Zelda: Link's Awakening`,
}; // TypeError: Assignment to constant variable

In the second example, the error occurs because we are changing the value of the game variable itself, not just one of its attributes’ values.

Conclusion

So which of the three options should you use? Well, I’ll let you and your team decide. I personally like to use const all the time, unless in the case where I know I’ll need to reassign the value of a variable. In those cases I use let. I think it helps your future self and other developers know that you didn’t intend for that value to change, and the application will produce an error if you do try to change it. But if you would rather use let, then go ahead and do what works best for you and your team.