JavaScript Quick Tip: How To Make Your Objects Immutable

JavaScript Quick Tip: How To Make Your Objects Immutable

JavaScript’s objects are mutable by default. If you don’t take any action, anyone can mutate the state of objects you create.

const obj = {
  prop: 1
};
obj.prop = 2; // obj.prop is now 2

Especially in functional programming, immutability is a core requirement. Instead of changing the state of existing objects repeatedly, you create new objects, copy over what you don’t change, and then apply your changes to the properties left.



Enter Object.freeze

JavaScript gladly has an API to freeze your objects. This prevents all forms of mutation and can give you some safety back.

const obj = {
  prop: 1
};
Object.freeze(obj);
// silently fails in lax mode
// throws a TypeError in strict mode ("use strict";)
obj.prop = 2;

What Object.freeze, however, actually does is only doing a shallow freeze. This means that if you have nested objects that aren’t frozen, you don’t get a fully frozen object.

const obj = {
  prop: 1,
  nested: {
    prop: 0
  }
};
Object.freeze(obj);
// This works perfectly fine
obj.nested.prop = 1;

When you want nested objects to be frozen, as well, you would also have to freeze them.


The Whole Tip As An Image

If you like visual content more, or if you want to store it for later, I put all this into one single image for you. I hope you like it!

A picture showcasing the above code

Before You Leave

If you would love to read even more content like this, feel free to visit me on Twitter or LinkedIn.

I’d love to count you as my ever-growing group of awesome friends!

Oliver Jumpertz

Contact

Feel free to contact me

Contact Me

Connect

Subscribe

Join the Newsletter

You will regularly be informed about new content, special offers, and interesting information about software development.

Your data might be transferred to servers located in the USA. By subscribing, you agree to the data transfer. You can revoke your approval at any time by unsubscribing. For more information, please visit the privacy policy.

    We won't send you spam. Unsubscribe at any time.