Exploring common misconceptions about ES6's `const` keyword.

TIL: const holds values that are just as mutable as the rest of them

Since the time const was introduced to JS i’ve been championing it’s use. Yesterday however, it was brought to my attention that I had the wrong assumptions about my beloved const keyword and it’s immutable capabilities so I felt compelled to write a quick excerpt about it. If you’re like me, then this won’t have much of an impact on your coding practices, however you might be in for a bit of a surprise.

Diving In

I came across this quite vocal post yesterday and I quickly realized this is the same person behind unstated. Couple that with the fact that Kyle Simpson’s RT sent me to the page, and I had no choice but to accept that I was being naive and overlooking consts true purpose: to create an immutable binding to some value. This means that the binding will always maintain reference to a specific value.

const data = [1,2,3];
data  = [‘a’, ‘b’,’c’]; // TypeError: Assignment to constant variable.

As shown in the code above, variables created with const cannot be reassigned to reference any other value once it’s been declared. Immutability, hooray!

Well, not quite. As mentioned before, const eliminates any possibility of reassignment by creating an immutable binding, however no one said anything about the data being immutable. On the contrary, values bound via const are just as susceptible to mutations as values bound using let.

const data = [1,2,3,4];
data; // 1,2,3,4
data[0] = 2;
console.log(data);// 2,2,3,4

Say it ain't so, const.

It was a bit disheartening to realize my partner-in-immutability, const, wasn’t the declaration that I had believed it to be. That said, my misinterpretation of consts behavior was no one’s fault but my own. I should have picked up on this earlier. I mean what does immutable binding really mean, or rather, what advantage does the use of const hold over let in regards to writing immutable software? Well as it turns out, the answer to that is…. none.

Just take one look at this excerpt from MDN JavaScript Docs which explicity states that values bound via const are not immutable by default.

The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object's contents can be altered.
MDN

If you’ve been a const warrior like myself then this might be a tough pill to swallow. But have no fear, Object.freeze is here.

Mr. Freeze upon realizing he was duped by consts behavior as well

Preventing Mutations with Object.freeze

Before wrapping this up let’s quickly see how we can get past this limitation with const using Object.freeze. As its name suggests, this method is going to “freeze” whatever object it’s given thus preventing properties from being added, removed, modified, etc. once it’s frozen.

Taking a look at the screenshot from this jsbin we can see this in action.

One really important thing to point out is that when Object.freeze is given an object, then any properties on that object will still be successability to mutations if the object being passed in is not frozen as well.

const player = {
Name: ‘tom’
};

Const data = [1,2,3];
const data = Object.freeze(data, player)

Wrapping Up

You may be wondering "when should you use const, if ever?". Well, good question! const can still be an effective tool to express that the reference created is never going to change, ever. We can use it to make our code more self-documenting to other developers can jump in and understand how a particular piece of code should behave.As I mentioned before, this realization isn’t going to have too profound of an impact on my coding style. Nevertheless, ignorance certainly is not bliss within the setting of building software, so if you, like myself, were misled by the const keyword, hopefully this post helped set the record straight.