Deleting a property from a Javascript Object without Mutation

Photo by Oskar Yildiz on Unsplash

Hey everyone 👋🏻,

There are multiple approaches to do the same operation in Javascript. Every approach has its own pro’s and con’s and there is always better way to do a particular operation in Javascript. In this article, let us see how to properly delete a property in Javascript without mutating an object.

Why Mutating Objects is bad idea?

We end up running into hard-to-debug and completely avoidable issues if we keep mutating objects in Javascript. The object might have correct value somewhere but will be different at other place and we would have no idea what changed what.

So it is highly recommended to perform CRUD operations on Javascript objects without mutating the objects. Take a look at this post to understand more about why it is recommended to avoid mutating Javascript objects.

Using delete keyword

Consider the below object,

const person = {
  firstName: "Tony",
  lastName: "Stark",
  team: "avengers",
  worth: "billions",
};

so if you want to delete a key from the person object then one way to do this is

delete person.worth; 
console.log(person); 

or

delete person['worth'];
console.log(person);

Although delete can be used to delete a property, you end up mutating the object which can cause undetectable bugs later on.

Alternative approach

A better way to delete a property without mutating is by using spread operator.

const {worth, …newPerson} = person;
console.log(newPerson);

Instead of mutating the original object, you create a new object and use it instead. If your object is a nested one then you may have to handle accordingly as using spread operator doesn’t perform a deep clone.

Bonus

Want to delete an object from an Array without mutating the Array?

const people = [
{ id: 1, name: 'ninja' },
{ id: 2, name: 'darkknight' },
{ id: 3, name: 'dexter' }
...
];

const updatedPeople = people.filter(person => person.id !== 2);
console.log(updatedPeople); 
// [
// { id: 1, name: 'ninja' },
// { id: 3, name: 'dexter' }
// ...
// ];

The updatedPeoplewill no longer have the person object with id 2.

Are there any other alternative and better approaches that you follow in your code? Share it with me in the comments.

Comments

[Samson Andrew]

I think this is application specific.

The object might have correct value somewhere but will be different at other place

JavaScript objects are not stuffs you throw around as you like. No matter the number of places where you use them, they still have a single reference. When you mutate an object from a certain function, you should expect the changes to reflect in every other place where it's being referenced.

If I delete person.worth from a certain place in my app, I want all active references to know that person is now worthless. Not that I would make it worthless in some part of the UI and worth a billion in other parts.

Generally, use what is best for your use case.

[Santosh Viswanatham]

Yes! In the end it is up to what is best for your use case and as per your application. This is about why it is not recommended to have a best case where you mutate the objects, that becomes impossible to track mutations when the size of your application grows and a number people work on the same code. The fundamental part of Redux is to avoiding mutations, so this is about how a delete operation can be done without mutation. If Mutation has been working well for you so far then go for it. 🎊