The Different Levels of Immutability in Javascript

Avoiding mutations in our code is becoming increasingly important in Javascript due to the principles of functional that makes our code easier to predict and to scale. This blog post can be considered a continuation of a previous one: The Limits of Object.assign().

Setting Up the Environment

To begin with, we are going to create a folder to work called immutable-levels.

Because I am first and foremost an Angular 2 developer and I love the technology, we are going to be using typescript in our examples. Let’s go ahead and create a package.json file, install typescript as a dependency and create a npm script to run the transpiler in watch mode.

With all our commands in place, we can now create our file tsconfig.json.

The final step of our setup is to create a file to work and fire up typescript in watch mode.

Level 0: Mutable Object

Normally in javascript, an object is mutable unless otherwise stated. To prove that, we can write the following code:

As expected, we were able to completely change the reference of our variable an assign a new object to it. Our object is by default mutable.

Level 1: The “const” Keyword

To prevent the ability to change the reference of our variable, we could use the const keyword instead of let.

Now, typescript is going to complain because changing the reference of a constant object is forbidden.

We have achieved the first level of immutability! Sadly, we can still mutate our object changing the properties directly.

Now typescript is not complaining anymore and if we run this code, we can see that our object again has mutated.

Still, not what we want.

Level 2: Object.freeze()

We can go one step further and not only prevent changing the reference of the variable but prevent modifying its properties using Object.freeze().

This time, when we execute the code something curious happen.

Even though we tried to modify the properties age and height, we can see that at the end those properties were not affected. The same cannot be said about the nested object address that mutated again. That happens because Object.freeze doesn’t prevent nested objects from being mutated. We still have some more work to do.

Level 3: Immutable.js

It’s clear that the language is not well suited to completely prevent mutations and that’s why we need to resort to libraries, in this case immutable.js created by Facebook. To use this package in typescript, we need to install the package and the typings as well.

We need to add additional script commands to package.json.

With this commands, we can now create the file tsconfig.json and install the typescript definition file of the immutable.js library.

We are finally ready to start using this library to prevent mutations of our object.

If we try to run this code, we are going to get an exception when trying to modify the nested properties.

If we remove both lines that try to mutate the address object, we are going to see the same result as with Object.freeze().

None of the properties changed. Complete immutability achieved!

Published by

David Barreto

David Barreto is a Javascript Developer with a Bachelor's degree in Electronics Engineer and a Master's degree in Systems Engineering. He is passionate about developing web apps, teaching programming, discovering new technologies and learning all about software development methodologies. He currently works at in Toronto.

2 thoughts on “The Different Levels of Immutability in Javascript”

  1. in the line “$ npm run typings:install — dt~immutable –save –global”: what does “dt~immutable”? what does “dt~”? 🙂

    1. That is searching for the type definition file of immutablejs in “definitely typed” instead of “npm”. You can fin the sources of the immutablejs package with “typings search immutable”.

Leave a Reply