Categories: javascript, mutation, node js

Avoid JavaScript object mutation at all costs

Reading Time: 2 minutes

Introduction

Primitive types in JavaScript are immutable meaning that if we change one then a new instance is created. There are five primitive types:

  • undefined
  • null
  • boolean
  • string
  • number

Everything else is an object, and they are mutable.

A mutable object means that the state and fields of it can be changed. No new instance is created.

The problem

Mutating an object within JavaScript brings the following problems:

  • Harder to read code
  • More difficult to test
  • Produces abnormal side effects (Non predictable)
  • Reduced Performance
  • Increased memory usage

Variables within JavaScript that are assigned a non-primitive value such as an object are given a reference to that value. This reference points to the object’s location in memory. The variables don’t actually contain the value. If we take this concept and change a value of an object, we change the referenced value leading to a situation of unclear state.

Lets see an example of mutating a JavaScript Object:

function savePerson(person) {
  // perform logic to save person
  person.saved = true;
}

function createPerson() {

  const person = {
  firstname: 'Joe',
  lastname: 'Blogs'
  };
savePerson(person);
console.log(person); // saved = true
}

createPerson();

In the example above “the person object” is mutated in the save function. We can improve this by instead returning altered copies of the object instead of mutating the original context based person object.

The solution

Lets see a better example:

function savePerson(person) {
  // perform logic to save person
  const savedPerson = clone(person);
savedPerson.saved = true;

return savedPerson;
}

function createPerson() {
  const person = {
  firstname: 'Joe',
  lastname: 'Blogs'
  };
  const response = savePerson(person);
  console.log(response); // saved = true
  console.log(person); // no mutation
}

createPerson();

In the example above we perform the following:

  • Create the person object
  • Save the person
  • Clone the person object into a new variable
  • Add the saved attribute to the new variable

Unfortunately JavaScript has not got any built in support for immutable objects which makes it harder for the developer. As a result, different methods exist in cloning an object such as:

The scope of which one is best for which situation is out of the scope of this tutorial, but I do advise you to read this StackOverflow Post to dive further into the subject.

Creating new instances may not always be beneficial. It can lead to performance issues with objects where their properties often change or its data structure is extremely large. A refactor of code may be necessary in this scenario.

Conclusion

It can be seen that adopting a developer mindset to avoid mutation is beneficial for the developer and the quality of the code upon reading and execution. The key elements to take away are that an object in JavaScript behaves differently to primitive types therefore should be treated with care. You will thank yourself, the developers around you and even your customers!

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *

*