How to Remove Property from JavaScript Object

JavaScript objects are versatile data structures that allow you to store all kinds of information in a compact manner. They have become essential in modern websites and applications. While working with JavaScript objects, web developers need to delete one or more properties from JavaScript object. There are several ways to do this. In this article, we will learn how to remove property from JavaScript Object.

How to Remove Property from JavaScript Object

Here are the present different ways available for removing property from JavaScript object. Let us look at them one by one. For our use cases, let us say you have the following JavaScript object.

var data = {'a':1, 'b':2, 'c':3};

1. Using Delete Operator

JavaScript provides a delete command that allows you to directly access and remove JavaScript property. There are a couple of ways to use it.

delete object.property
OR
delete object['property']

Here is the command to remove property ‘b’ from our data object.

delete data['b']
console.log(data);  // output is { a: 1, c: 3 }

Please note, delete command always returns control unless there is an error. It returns true, whether the property exists or not.

It returns false only if the property cannot be removed, such as the built in properties of data types. For example, it will return false, if you call it on the length property of an array. On similar lines, if a property is defined in the object prototype, then it cannot be removed and can be still accessed.

Also, delete command can remove only one property at a time. If you want to delete multiple properties, you need to call delete separately for each property.

2. Using Object Destructuring

Object destructuring is useful to delete multiple properties at once. Here is the command to remove properties ‘a’ and ‘c’ from data object.

var {a, c, ...newdata} = data;
console.log(newdata); // { b: 2 }

In the above code, we mention the properties to be removed, along with a new object within curly braces. The new object name is preceded by … operator.

This approach does not modify the existing object but creates a new object without the removed properties. It is really easy to understand the syntax of object destructuring.

Also, it creates a shallow copy of the object. It is slower and more memory consuming than using delete command since you need to create a new object.

3. Using Reflect.deleteProperty

JavaScript provides Reflect API that provides tons of functions, including deleteProperty that allows you to delete object properties. It provides a very intuitive way to remove properties. Here is its syntax.

Reflect.deleteProperty(object_name, property_name)

Here is the command to delete property ‘b’ from data object.

Reflect.deleteProperty(data,'b')
console.log(data);  // { a: 1, c: 3 }

This is a very easy to understand method since you get to explicitly mention object and property names during deletion.

4. Set Property to Null or Undefined

If you are not really particular about deleting an object property, you can simply set it to null or undefined. Here is the command to set property ‘b’ to null or undefined.

data['b'] = null;
data['b'] = undefined;

You can use undefined value to indicate the value has not been defined for the property. You can use null to indicate that the value is explicitly set to null. This method is very fast compared to the rest, since you are only modifying the value of the property and not removing the property. It doesn’t mess with the JavaScript optimization for objects.

Conclusion

In this article, we have learnt several ways to delete property from JavaScript objects. But it is important to remember that every time you delete a property it will slow down your application or website, since JavaScript typically optimized objects for better performance. So remove JS object properties only if required. Also, if an object is shared in global scope, then you need to be extra careful, since the deleted property may be accesses in some totally different part of your application.

Also read:

How to Remove Item from JavaScript Array
How to Set Checked for Checkbox in jQuery
How to Include JavaScript File in Another JavaScript File