How To Make Changes to Objects in a Cleaner, Immutable Way

This article will give you some tips on how to change state in a cleaner way in your JavaScript programs and with the ES6 syntax.

I’m assuming that you have a basic knowledge of JavaScript and its ES6 syntax or you have a little experience with using JavaScript.

It’s always a good idea to make states in your application immutable.
Immutable data means data that doesn’t change. An example is a string in JavaScript. Once you create a string, it never changes.

Data that is immutable is simpler. By doing this, you are sure that your data won’t be changed somewhere else in the codebase. And that’s a good thing. You are much more confident that unexpected things won’t happen.

What is State?

State are the things your program remembers or the stuff that takes place over time that your program keeps track of. For example, in a to-do list, the things that the app needs to remember are: when new to-dos are added, when to-dos are updated, and when they are removed from the list. Keeping track of these changes is what is known as maintaining state in your app.

So then how do we deal with data in an immutable way, without changing the data? Every program needs a way of keeping track of these changes, and if you can’t modify the state, how then do we maintain state in the program?

I’ll show you how.

Below is an object with two properties:

const person = {
  id: 1,
  name: 'Adjoa',
};

console.log(person); // returns { id:1, name: 'Adjoa'};

Now, how might I take all the properties in the person and add another property to it, say gender, without mutating it?

Let me introduce you to the Object Spread operator.

Object Spread Operator

The object spread operator allows us to spread or expand an object’s properties into a new object. It makes copies of all the properties from one object to another object. This is useful in a lot of ways!

Example:

const newPerson = {
  ...person,
  gender: 'female',
};

console.log(newPerson); //{ id:1, name: 'Adjoa', gender: 'female'};
// Includes all properties from the person object.

We don’t need to manually create a new object, write all the properties in the first object into the second, and then add the new properties. This way is super simple and easier!

Do you know that this same operator can also be used to override the properties of an object?

Let me show you.

Example:

const updatedPerson = {
  ...newPerson,
  gender: 'male',
};

console.log(updatedPerson); // returns { id: 1, name: 'Adjoa', gender: 'male' };

The value of gender has changed from female to male.

We have seen how we can update an object by adding new properties by not modifying its content. One might ask, how then do I remove elements in an immutable way? Here comes destructuring and rest.

Remove Fields From an Object With Destructuring + Rest

What is destructuring?

Destructing just allows us to assign object values to variables.

Example:

// using our earlier example

const {name} = updatedPerson;

console.log(name); // returns 'Adjoa';

As you can see from the example above, we used the same names for the variables as we did for the properties of the updatedPerson. But you can also replace variables with names that differ from the properties of the object.

Example:

const {name: title} = updatePerson;

console.log(title); // returns 'Adjoa';

What is rest?

Rest allows us to unpack all the remaining arguments or properties of an object to a variable.

Example:

// using the earlier person object

const {id, ...rest} = person;

console.log(id); // 1

console.log(rest); // {name: 'Adjoa')

How to remove fields using destructuring + rest:

const {id, ...updatedPersonWithoutId} = updatedPerson;

What is happening above?
We’re pulling the id out into its own constant and then whatever properties remain in the updatedPerson is collected into the updatedPersonWithoutId constant. In other words, we are copying all the properties of updatedPerson except the id into the updatedPersonWithoutId constant.

console.log(updatedPersonWithoutId); // returns { name: 'Adjoa', gender: 'male' }

// id was not included in the object returned.

console.log(updatedPerson); // { id:1, name: 'Adjoa', gender: 'male' }

// original object hasn't mutated but retains its old properties!

So we effectively added and removed properties from the object in a cleaner, immutable way!
Next, I will write on modifying arrays in JavaScript.

Thank you for reading. If you found this article helpful, please leave a comment.