Objects In Javascript And How To Remove A Property From Them

The following object contain some properties and we gonna delete some of them.

The name, position,techs and so on defines the employee data, but sometimes we just need to delete one of these properties. Let's suppose we want to delete techs, how can we do that?

1 - Delete Operator

Well, there are some ways to do that, first one is with Delete operator , basically to use you have to indicate the property that you want to remove. With this one you will modify the original object, known as mutable way. Let's see the example in the image below, by using the dot property we can remove techs property from the employee object. DeletedProperty return true case was deleted of false if fails.

The delete operator delete both the value of the property and the property itself. After that process, the property cannot be used, in that case you should add again. This method is designed for be used on object properties, it has no effect on variable or functions - Speaking of effect, soon I will bring an article about how the useEffect hook works, stay tuned :) - But maybe you desire is to delete dinamically some properties, for that you can remove by using square brackets property accessor as well.

2 - Reflect.deleteProperty( )

The first argument is the object itself, the second one is the property you want to delete. Like the Delete operator this one is mutable also, since it changes the original object. Reflect.deleteProperty return indicating whether or not the property was successfully deleted. Reflect.deleteProperty(Object.freeze({foo: 1}), 'foo') return false since property is unconfigurable, because of freeze method.

3 - Object destructuring with rest syntax

Another approach to removing properties, is to use Object destructuring with rest syntax. But different from others, this one doesn't change the original object reason why is called immutable manner. The idea here is quite simple, the goal is destructure the object to the property we want to remove and the remaining properties collect into a rest object. 

After applying the destructure and rest syntax, restObject will contain all the properties from student object, without the removed property. For example, let's remove profileImage property from user object.

3 - Conclusion

In JavaScript you can remove a property from a object with 3 common ways, some of them are mutable, because the original object is changed after the process. And there are a second approach that doesn't affect the original object, like object destructuring with rest syntax. In both manners you are able to use square brackets for dynamically remove some property.

4 - Where did I read about that before write it?

Before I start to write all of this, I read the following articles :

1 - https://codezup.com/10-ways-to-delete-remove-property-of-an-object-javascript/

2 - https://dmitripavlutin.com/remove-object-property-javascript/

3 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete