Master const and let in 3 minutes

Photo by cetteup on Unsplash

If you’re still using var to declare variables in your JavaScript projects, and you’ve heard about const and let but you’re not sure where to start, you’re in the right place. Maybe you’ve read an article or two, maybe you understand the difference on paper but haven’t made the switch. I’m going to share a few things that helped me, and hopefully it will help you too (and I’ll try to do it quick).

Why switch?

If you work with JavaScript day to day, it’s important to keep up with and understand new language features. While var is still perfectly acceptable, const and let add more precision to your code. Likewise, const and let have gone from “experimental” to “new” to “standard” in the past few years, which means the day when var is considered “deprecated” may not be far off. It’s better to be a little ahead of the curve.

The (very) quick overview

If you want to switch and start using const and let in your code, the main thing to know is that a variable declared with let can be reassigned to another value, while a variable declared with const can not be reassigned to another value. Here’s a simple example:

let foo = 4;
foo = 10;
console.log(foo) // 10

const bar = 4;
bar = 10; // Uncaught TypeError: Assignment to constant variable.

Much like var, we were able to assign foo to one value using let, then assign it to another value on the next line. However, when we try to do the same with const, we get an error.

One thing to note, if you assign an array or an object using const, you can still change items or properties of the array/object, but you can’t reassign the variable to a whole other value. Here’s an example:

const arr = [1, 2, 3, 4];
arr[0] = 5;
console.log(arr); // [5, 2, 3, 4]
arr.push(6);
console.log(arr); // [5, 2, 3, 4, 6]

const obj = {
  foo: 1,
  bar: 2
};
obj.foo = 3;
console.log(obj); // { foo: 3, bar: 2}
obj = {
  baz: 3,
  foobar: 4
}; // Uncaught TypeError: Assignment to constant variable.
arr = ["cat", "dog", "fish"]; // Uncaught TypeError: Assignment to constant variable.

Don’t be scared of const

Once you learn this, I think the first temptation is to stick with let since it’s more forgiving and avoid const. However, I think the best option is to reach for const first, and use let only in cases where a variable needs to be re-assigned, for instance an initialized variable that might get re-assigned from false to true once some action has occurred.

Using this approach, what I’ve found is the vast majority of the variables I declare are just fine being declared with const, and I only reach for let when absolutely necessary. This approach takes a little more thought than just reaching for var or let, but it comes with the benefit of more precise and readable code (const signals to other devs “Hey don’t re-assign this!” while let signals “Hey this variable might change value and that’s ok”). And you’ll avoid potential bugs, since you’ll get an error if you try to re-assign a const that’s not supposed to change.

Conclusion

This was a (very) quick look at const and let and I’ve left out a lot of nuance, with the intention of trying to give a practical approach for anyone looking to switch over quickly and dive into the theory side later. The main takeaway is to think about the purpose of each variable you declare, and to try out the const-first method of variable declaration to help your code be precise and readable.

If you want to take a deeper dive into the nuances of each, I recommend this article from freecodecamp.