What people don’t know about immutable objects in JavaScript

pandaquests
Aug 14 · 3 min read

JavaScript (JS) is also a functional programming (FP) language. One of the core concepts of FP are immutable objects that has lots of benefits for other programming paradigms, e.g. object-oriented programming (OOP), too.

In this article I’ll explain to you the different types of immutable objects and how to achieve immutable objects in JavaScript.

Image for post
Image for post
Photo by Jack O'Rourke on Unsplash

Let’s start with mutable objects first: A mutable object is an object that can be modified after it is declared. For example foo is a mutable object:

let foo = {
a: "b"
};
let bar = foo;
bar.a = "c";
console.log(foo.a); // c

By default custom objects in JS are mutable. The issue with mutable objects is that changing a value of the object propagates to all its references. This is known as side-effects and can lead to hard to debug errors.

An immutable object on the other hand is an object which can not be changed after it is declared. By default Math, Date, Numbers and Strings are immutable in JS, meaning you can’t delete, add, or overwrite their properties. For example you want to concatenate the string Hello with world like so:

let foo = "Hello" + "world";
console.log(foo); // Hello world

The String Hello was not modified. Instead a new String was created. The original Hello is left unchanged.

Some people think a constant, created with the keyword const , is an immutable object:

const foo = {
a: "x"
};
foo = {
a: "y"
}; // error

The above code would throw an error if you try to reassign it. Some people assume that this is what immutability mean. But it’s not, like the following example shows:

const foo = {
a: "x"
};
foo.a = "y";
console.log(foo.a); // y

const in JS only means that you can’t reassign. So, the “constant” part in const only refers to the pointer — you can’t change the pointer. But, as you saw above, you can still change the object’s property. The same applies not only to custom objects but also built-in objects like arrays.

In JavaScript there are different ways how to create immutable objects.

In JS objects have (hidden) properties writeable and configurable that you can manually set to false and thus preventing mutating or deleting the value:

const immutableFoo = {};
Object.defineProperty(immutableFoo, "a", {
value: "d",
writable: false,
configurable: false
});
console.log(immutableFoo.a); // d
immutableFoo.a = "z";
delete immutableFoo.a;
console.log(immutableFoo.a); // d

However, you can still add a new property to your object

In case you want to prevent an object from having new properties added to it and leave the rest of the object’s properties untouched, you can do like this:

const immutableFoo = {
a: "e"
};
Object.preventExtensions(immutableFoo);
immutableFoo.b = "z";
console.log(immutableFoo.b); // undefined

But preventExtensions doesn’t prevent your property from being overwritten or being deleted.

Object.seal() creates an object that is “sealed”, meaning it takes an object and calls Object.preventExtension() . In addition to that it sets all object’s properties to configurable: false . By doing so you neither can’t add nor delete properties.

const immutableFoo = {
a: "e"
};
Object.seal(immutableFoo);
immutableFoo.b = "z";
console.log(immutableFoo.b); // undefined
immutableFoo.a = "999";
delete immutableFoo.a;
console.log(immutableFoo.a); // 999

But you can still change the values of the properties.

Using freeze you can create truly immutable objects in JS, meaning you can’t delete, add, or overwrite the object’s property.

const immutableFoo = {
a: "e"
};
Object.freeze(immutableFoo);
immutableFoo.b = "z";
console.log(immutableFoo.b); // undefined
immutableFoo.a = "999";
delete immutableFoo.a;
console.log(immutableFoo.a); // e

So, in JS there are methods that emulates aspects of immutable objects. But only one method is able to create full immutable object in JS. Below is a summary of the methods and which part of immutable attribute they cover. Only Object.freeze() is able to prevent all forms of mutability. So, if you want to create immutable objects in JS, only go for Object.freeze() .

Image for post
Image for post

If you have any questions, comment below and let me know.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store