Using more const and making const more constant
ES6 is becoming more and more widely supported and one of the features I’m most excited about might initially seem to be one of the most boring… const! const is really about not shooting yourself in the foot by reassigning variables on accident. I’d also argue that it may be a nice compromise in thinking more pure functionally without actually being purely functional.
Even if you agree with me, you might find it hard to use const as much as you like however. And even if you do use const, it may not be obvious, but const may not provide the level of immutability that you really want. This post is intended to show you exactly what const does, what it doesn’t do, and give you some tips and tricks to use it more often and more effectively.
What’s const about const?
The const keyword lets you declare a reference to a value with block scope that must be assigned at declaration time and cannot be reassigned. (Notice how I avoided the word, “variable,” there? 😉) Thus you can do things like the following:
const behaves about like you’d think it would behave in these cases, which is awesome. Here’s a bunch of ways that you cannot use const, where the only non-obvious case (IMO) is that declaration and assignment must happen at the same time:
Finally, let me show you a couple of completely legitimate uses of const that might not be obvious and in fact contradict what you might think should happen:
Ironically, more options for const
const is awesome, but as we saw above, it does exactly one thing: it makes a constant reference, not a constant value. It also requires that you assign it immediately upon declaration. Given that, let’s talk about how we can use it in more situations and supplement it with a good ol’ ES5 function to lock down values as well.
One situation where I want to use const a lot is with default values. There are a few old tricks we can use with const and a few new ES6 nuggets that let us assign once, at declaration time:
Now the above works for simple conditional assignment of consts, but what about when we have several options?
The switchExpression and ifExpression examples above probably need slightly more unpacking. We’re basically just creating an anonymous, ephemeral function with some logic, then invoking it immediately and assigning the result to the const. It’s using the ES6 arrow function syntax to make it as “inline” as possible, but you could definitely do it with the function keyword as well. Both are actually pretty much doing what the first helper example is doing, but keeping the logic within the body of the invoking function. You may or may not agree that this makes the assignment logic cleaner, but that logic is not escaping the one place (in this case) where we’re using it.
Locking down values
Immutable.js is awesome. It provides a bunch of very useful data structures and operations on those structures, but sometimes you just need Javascript objects and arrays. You may even need them alongside Immutable.js for interacting with other libraries. As we saw above however, const does not force values to be immutable, simply the reference to those values. For that, we have Object.freeze, which has been around since ES5.
These examples show you how to make your values const as well, though both of these are runtime solutions.
Speaking of runtime solutions…
While const is enforced at runtime, wouldn’t it be better to know ahead of time if something is going to break? const is a good hint to humans that something is not supposed to change, but tools like eslint can help too! Here are a couple of rules that will help you enforce const-ness:
- http://eslint.org/docs/rules/no-const-assign — Check for double assignment/reassignment.
- http://eslint.org/docs/rules/prefer-const — Let you know when you can make a var or let into a const, if it’s not being reassigned at the moment.
If you’re interested in working with us, discussing issues like these and others, please check out our jobs page and get in touch!
