Immutability. Unchangeable. Changeless.

When we learn about programming, one of the first things we learn is how to declare a variable. We, then, learn how to change a value of said variable in different ways. From then on, it's up to us on how we implement our applications.

Now I didn't understand the importance of immutable vs mutable until functional programming started to trend for JavaScript. To be honest, it was hard to wrap my head around the concept of pure functions and immutability. It was only through my failures in programming that I started to learn the importance of having state immutable.

What about const?

When I want a variable to be impossible to change, I just declare a const. But hey, there's a problem. const only works on primary types. String, numbers, booleans work fine with const. It is when you want to declare an immutable object.. that's when const will fail you.

In the above code example, we declare an car object with const. As you can see we can modify this object directly. car.speedUp value has been changed from a function to a number. So what the hell does const actually do?

Well, declaring a const tells JavaScript, that the value of the const cannot be bound to a different value after declaration. Changing the actual constant of car to a string value or any value will result in an error. If you're smart, you'd have an IDE that catches this before runtime. Otherwise, you'll just get a nasty message when you run the application.

Object.freeze

So what now? How do we declare an immutable object? Use Object.freeze, of course!

Object.freeze takes an object as a parameter and returns a non-extensible version of object that was passed. New properties cannot be added to the frozen object. Frozen object properties cannot be changed or deleted.

The above code shows a bar object being frozen by Object.freeze. When we try to change the value of the a property we get a TypeError.

But there's a problem. Object.freeze is just a shallow freeze. This method only goes down one level. The last line in the above code is successful in modifying bar.b.c to the value of 3.

Unfortunately, there isn't a deep freeze method available in Object. A quick Google search returns a small NPM package called deep-freeze that recursively freezes an object. This package is actually so small, copy/pasting this into one of your "helper" methods in your application is easily doable.

Why freeze?

Why? Well, first and foremost, use Object.freeze whenever you want an object that is unchangeable. When would you want this?

There are many cases where this would be useful. When an object is mutable, there is a chance that the object may have changed unintentionally through side effects from different methods or lines of code.

Object.freeze protects you from modifying an object. A good use case for this is if you make a XHR call to the server and it returns data that should NOT be modified what so ever.

Another good use case is if you're creating a micro-service and want other programmers to have access to this object you've created but don't want them to modify it in any way.

Here's an example:

We create a factory function called Users that returns a frozen object with methods as the object's properties. If you're familiar with other programming languages, Object.freeze is similar to that of the final keyword in Java where you're not allowed to modify a final class what so ever.

Conclusion

With the use of Object.freeze you can prevent your code from having unintentional side effects. It can allow you to manage state better in your applications with immutability. Use it well.