JavaScript ES6: const & let

In JavaScript, we can declare variables by using the const, let, and var keywords. The first two were introduced with ES6, and in order to fully understand the benefits of using them we first have to talk about var and why you would want to stay away from using it.

Bad deals with var

Here, you see how I am able to re-declare quantity in line 2 with no errors output to the console. Then on line 3 I assign a new value to it, again with no errors. In this context, this variable has been re-declared and updated in the global scope. If this code was inside a function, the result would still be the same because variables declared with var are function scoped. With that knowledge in mind, on line 6 I create a temporary variable anotherQuantity and I can access it outside the if statement! Because like our old quantity variable, it was scoped to its parent function.

So as your code grows, keeping track of what variable names you’ve used, the values they’ve been assigned, and where in the code they’ve been declared becomes harder with var. It also creates more opportunities for you (or another dev) to introduce bugs. Let’s look at a different example now:

The counter variable is declared in the global scope, updated inside the function for every iteration of the for loop, and then +1 is added to it. What happens here is that we are mutating (changing) the value of the counter variable all over the place. In the end, even its original value outside the function was affected. This is bad news, and if we needed to use counter in another function, we may not be working with the desired or correct value.

Enter const & let

Both const and let are all about signaling your intent when declaring a new variable. Looking at the errors above, you can take a few things with you:

• const variables must be assigned a value when they’re declared (line 7)
• cannot be updated by just assigning another value to it (line 5)
• cannot be re-declared either (line 2)

As opposed to our last example with var, const promotes immutability and that is a good thing. Let’s take a quick look at let now:

In this case, line 7 throws a reference error because anotherQuantity was declared inside the body of the if statement using the let keyword. This created a block-scoped variable, meaning that only inside the curly braces of the if statement this variable is accessible (const also creates block scope). Loops and conditionals are a great place to make use of let like I did above with the temporary variable. Here’s one last example with const using an object literal:

Updating the whole obj object is not allowed, however, updating the properties of an object declared using const is totally valid! Imagine you have an object called car with some properties inside like color, wheels, and tires; the car by itself is not going to change, but what can change are the wheels, tires and color because at some point you decided you wanted to spend some cash upgrading your ride.

Conclusion

Declare your variables and function expressions using const. Use let for mathematical expressions and conditionals/loops. And stay away from var altogether if you’re writing JavaScript in ES6. Not only will you be signaling your intent better when declaring new variables, but you will also make debugging easier and avoid introducing accidental bugs by doing something with the wrong variable/value.

If you enjoyed this article, please give it some claps and follow me to catch the next ones I’m writing. Thank you!