Remove property from object javascript

3 Ways to Remove a Property from a JavaScript Object

The easiest way to remove a property from an object in JavaScript is by using the delete operator.

delete objectName.propertyName;

For example, if you have an object called person with a property age , you can remove the age like this:

After you run this code, the person object will no longer have an age property. Note that this will only remove the property from the object; it will not affect other objects that reference the same property.

You can also use the square-brackets accessing operator to remove an object property:

This guide shows you the most common ways to remove properties from objects. If the above answer is enough, feel free to stop reading. But to explore JavaScript and learn useful methods and features, I recommend you keep reading the post. At the end of this guide, you will learn how to prevent a property from being deleted too!

Let’s jump into it!

1. The ‘delete’ Operator

In JavaScript, the delete operator deletes a property from an object. More specifically, it removes the property and its value and returns true if the property was successfully deleted.

// Define an object with some properties var myObject = < property1: "Hello", property2: "World" >; // Delete the property2 property from the object delete myObject.property2; // Print the object to see the result console.log(myObject);

Here the delete operator deletes property2 from the myObject . After the delete operator is completed, the object will no longer have the property2 property and its value will be undefined .

Notice that another way to remove a property with the delete operator is by using the square brackets to access the property.

For example, let’s repeat the above example but use myObject[‘property2’] instead of myObject.property2 .

var myObject = < property1: "Hello", property2: "World" >; // Delete the property2 property from the object delete myObject['property2']; console.log(myObject);

2. The … Operator

Another popular JavaScript operator you may be familiar with is called the spread operator or the “three-dots” operator ( . ).

In a sense, you can use this operator to remove a property from an object. In reality, it just creates a new object that lacks the property you ‘deleted’.

So to remove a property from an object using the spread operator, create a new object that contains all of the properties of the original object except for the property you want to remove.

For instance, let’s remove the prop2 from an object with three properties:

const obj = < prop1: 'value1', prop2: 'value2', prop3: 'value3' >; // Create a new object with all of the properties of `obj` except `prop2` const newObj = < . obj, prop2: undefined >; console.log(newObj); // Output:

1. You create an object obj that has three properties: prop1 , prop2 , and prop3 .
2. You then create a new object called newObj that contains all of the properties of obj except prop2 .

The latter step happens by using the spread syntax ( . obj ). When used this way, it simply re-creates a new object that includes all the original properties of obj . Then you set the prop2 to undefined in the new object which effectively removes it from the newly created object.

Notice that this method only creates a new object with the properties you want. It does not modify the original object. To truly remove a property from an object such that you modify the original object, use the delete operator:

const obj = < prop1: 'value1', prop2: 'value2', prop3: 'value3' >; // Remove the `prop2` property from `obj` delete obj.prop2; console.log(obj); // Output:

3. Reflect.deleteProperty() Method

The Reflect object in JavaScript is a built-in object that provides methods for interceptable JavaScript operations. It is similar to Proxy , but it does not allow you to define custom behavior for individual operations.

To delete a property from an object using the Reflect.deleteProperty() method, you can use the following syntax:

Reflect.deleteProperty(object, propertyName);

Here, object is the object from which you want to delete the property, and propertyName is a string that specifies the name of the property to delete. This method returns true if the property was successfully deleted, or false if the property could not be deleted (for example, if it is non-configurable).

Here is an example of how you can use this method to delete a property from an object:

// Define an object with a property that we want to delete const obj = < name: "John Doe", age: 15 >; // Delete the «name» property from the object const result = Reflect.deleteProperty(obj, «name»); // Print the result of the operation console.log(result); // true console.log(obj); //

In this example, the Reflect.deleteProperty() method deletes the name property from the obj object, and the result variable is set to true to indicate that the property was successfully deleted.

How to Prevent a Property from Being Deleted?

You might find it useful to know that JavaScript also lets you configure your objects such that you cannot remove a specific property.

To do this, use the Object.defineProperty() method, which allows you to define or modify the properties of an object. You can use this method to set the configurable property of a property to false , which prevents the property from being deleted.

For example, let’s prevent the name property from being deleted from the following object:

let myObject = < name: 'John', age: 30 >; Object.defineProperty(myObject, ‘name’, < configurable: false >); delete myObject.name; console.log(myObject); // Output:

As you can see, deleting the property name is not possible anymore. This is because of the restriction we placed on the object.

To make the name property removable, just set the configurable back to true .

let myObject = < name: 'John', age: 30 >; Object.defineProperty(myObject, ‘name’, < configurable: true >); delete myObject.name; console.log(myObject); // Output:

Thanks for reading. Happy coding!

Источник

How to Remove a Property from a JavaScript Object

There are two ways to remove a property from a JavaScript object. There’s the mutable way of doing it using the delete operator, and the immutable way of doing it using object restructuring.

Let’s go through each of these methods in this tutorial.

Remove a Property from a JS Object with the Delete Operator

delete is a JavaScript instruction that allows us to remove a property from a JavaScript object. There are a couple of ways to use it:

The operator deletes the corresponding property from the object.

let blog = ; const propToBeDeleted = 'author'; delete blog[propToBeDeleted]; console.log(blog); //

The delete operation modifies the original object. This means that it is a mutable operation.

Remove a Property from a JS Object with Object Destructuring

Using the object restructuring and rest syntax, we can destructure the object with the property to be removed and create a new copy of it.

After the destructuring, a new copy of the object gets created and assigned to a new variable without the property that we chose to remove.

let blog = ; const < author, . blogRest >= blog; console.log(blogRest) // ; console.log(blog); //

If we want to do this dynamically, we can do this:

const name = 'propertToBeRemoved'; const < [name]: removedProperty, . remainingObject >= object; 

It is also possible to remove multiple properties using the same syntax.

Wrapping Up

And those are the two ways to remove a property from a JavaScript object. If you have any questions, feel free to reach out to me!

Источник

How to Remove a Property from a JavaScript Object?

JavaScript objects contain properties that can be deleted if required. There are three ways using which we can easily delete any property of the object. The first way is using the special operator in JavaScript called the delete operator, the second way is using Object Destructuring and the third one is using the Reflect.deleteProperty() method.

Introduction

JavaScript Objects consist of properties that are just the combination of keys and values. In short, properties have pair of keys and values that can be of any kind of entity. Even functions can also act as a key or as a value in any Object. Anyway, here, we are going to discuss how can we remove key from Object JavaScript.

Removing a key automatically removes the value associated with that key. Hence, removing a key is nothing but removing that property itself. Now, there are three ways to remove key from object in JavaScript. Let us have a brief look over all of them.

1. Remove a Property from a JavaScript Object using the Delete Operator

There is a special operator in JavaScript called the delete operator which can be used to remove a key from Object JavaScript. As the name suggests, the delete operator simply deletes the specified property from the object. But first, we need to access the property to delete it. The Object property can be accessed either using the dot property accessor or the square brackets property accessor.

Deleting using the Dot Way

Let us create an employee object called emp that will be used for further operations.

Let us delete the age property using the dot way.

Explanation:

In the above-given output, we can see that the property age of the object emp has been deleted successfully using the delete operator(dot way).

Deleting using the Square Brackets Way

Let us delete the designation property of the same object emp using the square brackets way.

Explanation:

In the above-given output, we can see that the property designation of the object emp has been deleted successfully using the delete operator(square brackets way).

2. Remove a Property from a JavaScript Object using Object Destructuring

Object Destructuring can also be used for removing a property from an object, but there’s a catch, Object Destructuring does not mutate(or change) the original object, instead creates a new object which does not consist of the deleted property. This way the original object remains intact(does not change).

Explanation:

In the above-given example, we used object destructuring to remove a property from an object. When we used object destructuring on the original object laptop to remove the property model from it, we got the new object myLaptop without that property. Again, we can see in the output that the original object did not change.

3. Remove a Property from a JavaScript Object using the Reflect.deleteProperty() method

The Reflect.deleteProperty() method is provided by one of the built-in JavaScript objects called ‘Reflect’. This method is like the function form of the delete operator that we already discussed.

Explanation:

In the above-given example, we had an object called ‘cars’ with three properties. We used the Reflect.deleteProperty() method to delete the car2 property from that object. The output proves that the car2 property has been successfully deleted from the cars object.

At last, I would like to add that it does not matter whether you use the delete operator or Reflect.deleteProperty() method as both of them do the task in almost same time compexity. But using Object Destructuring consumes more time comparatively. Hence, the delete operator is the most preferred way of removing key from javascript object due to its short syntax and less time complexity.

Conclusion

• JavaScript Objects consist of properties that are just the combination of keys and values.
• Removing a key automatically removes the value associated with that key.
• There are three ways to remove key from object in JavaScript.
• We can remove a Property from a JavaScript Object using the delete Operator, Object Destructuring, and Reflect.deleteProperty() method.
• The delete operator and the Reflect.deleteProperty() method deletes the specified property from the original object.
• This means that the delete operator and the Reflect.deleteProperty() mutates the original object.
• The Object Destructuring does not mutate the original object instead it creates a new object which does not contain the deleted property.

Источник