Home » JavaScript » Immutable Objects in JavaScript

About Keyhole Software

Keyhole is a midwest-based consulting firm with a tight-knit technical team. We work primarily with Java, JavaScript and .NET technologies, specializing in application development. We love the challenge that comes in consulting and blog often regarding some of the technical situations and technologies we face.

Immutable Objects in JavaScript

There are very good reasons to use immutable objects in certain languages. In JavaScript, however, I’m still kind of…. meh.

In this blog post, I plan to discuss my reasonings with the hope that I might spark discussion on the use of Immutable Objects in JavaScript.

What Are Immutable Objects?

The definition of mutable is “liable or subject to change or alteration.” When discussing programming, we use it to indicate objects that are allowed to change over time. So, conversely, an immutable value is the opposite – after that object is first created, it cannot be changed. It is not variable.

Basically… immutable objects means that you are always creating new objects (or entire data structures) as opposed to making individual changes to those existing objects in the original data structure.

Why Are Immutable Objects Used?

The main reason for immutable objects is that they are thread safe. This makes sense in some languages.

But as JavaScript is single threaded, this doesn’t really apply. And when you use web workers to take advantage of multi-threading in JavaScript, you’re using a messaging interface that helps to keep you out of trouble with the state of your objects.

Performance is debatable for immutable objects. They use a larger memory footprint but in some situations can reduce the number of processes. The most important performance issue for a model though is its impact on DOM rendering.

But When Applied to React.js Apps…

Facebook’s React.js is a popular view framework – that’s the V in MV*. It also has a library for models called Immutable.js.

For React apps, it makes some sense to use Immutable.js. React uses the Observer Pattern to update the View on a change to its Model.

Thoughts

Whether you like React or not, there is some simplicity in not having to write specific binds between the Model and View. And the expensive process of observing all objects isn’t impacted by replacing the entire Model through Immutable.js. React creates a simplified, virtual DOM and compares this to the actual one to see if any updates need to be made.

With other MV* libraries however, you already have a Model with its own methods and way of binding the View to the Model. I think immutable JavaScript makes some sense for React apps but only depending on the application.

Sometimes native objects make more sense for React apps, not just for performance, but because you can use native arrays with a much more extensive list manipulation library like lodash.

 

Reference: Immutable Objects in JavaScript from our WCG partner Keyhole Software at the Keyhole Software blog.

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments