Back to: JavaScript Tutorial For Beginners and Professionals
How to Delete a Property from a JavaScript Object with Examples
In this article, I am going to discuss How to Delete/Remove a Property from a JavaScript Object with Examples. Please read our previous article where we discussed How to Add a new Property in JavaScript Objects with Examples.
Delete/Remove Property from a JavaScript Object
So far, we saw how we can add a new property in an object and how we can update existing property value later on same way we can delete an existing property from an object.
There are three ways we can delete/remove property from an object:
- Using delete Operator
- Delete property from an object using variable
- Delete property from an object using ES6 destructuring feature
Delete Property from a JavaScript object using the delete operator
The delete keyword is used to delete/remove a property from an object. It will delete/remove a property from the object if it has one. In case we want to delete an existing property from an object we have to use the delete keyword followed by the normal syntax of accessing the properties of an object using dot notation (.) or bracket notation ([]).
Syntax:
var ObjName = {
myProp1: value1,
myProp2: value2
}
delete ObjName.myProp1; //to delete a property use delete keyword followed by normal syntax of accessing the properties of an object using dot notation
//or
delete ObjName[‘myProp1’] //to delete a property use delete keyword followed by normal syntax of accessing the properties of an object using bracket notation
Considering the previously created object name person with few defined properties example shown below:
//Object Literal with properties
var person = {
firstName: “Elon”, //setting or adding the value of property of an object
lastName: “Musk”,
age: 25,
location: “India”,
pincode: 400001
};
We have deleted an existing property location of a person object by using the delete keyword followed by the normal syntax of accessing the properties of an object using dot notation.
delete person.location;
We also have deleted an existing property Pincode of a person object by using the delete keyword followed by the normal syntax of accessing the properties of an object using bracket notation ([]).
delete person[‘pincode’]
When tried to access the deleted properties it returns undefined as it’s already deleted and it doesn’t exist.
Example: JavaScript Objects, Delete/Remove property in objects
<html>
<head>
<title>JavaScript Objects, Delete/Remove property in objects example</title>
</head>
<body>
<script>
//Object Literal with few defined properties
var person = {
firstName: "Elon", //setting the value of property of person object
lastName: "Musk",
age: 25,
location: "India",
pincode: 400001
};
delete person.location; //to delete a property location use delete keyword followed by normal syntax of accessing the properties of an object using dot notation
delete person['pincode'] //to delete a property pincode use delete keyword followed by normal syntax of accessing the properties of an object using bracket notation
//display data
console.log("person object: ", person)
console.log("person object length: ", Object.getOwnPropertyNames(person).length)
console.log("person Object literal type? : ", typeof person);// object
console.log("Person Object already defined property firstName- with dot notation-->Property firstName value is: ", person.firstName);//Elon
console.log("Person Object already defined property firstName- with bracket notation-->Property firstName value is: ", person['firstName']);
console.log("Person Object accessing deleted property location- with dot notation-->Property location value is: ", person.location);//undefined
console.log("Person Object accessing deleted property pincode- with bracket notation-->Property pincode value is: ", person['pincode']);//undefined
</script>
</body>
</html>
Output:
In the above code, we deleted the existing location and Pincode properties of the person Object and then we tried to print it to the screen, as it doesn’t exist it will print ‘undefined’.
Delete property from a JavaScript Object using variable
Another way to delete the property from an object is by storing the property (we want to delete) into variables and then we can delete it by accessing them using bracket notation [] like a computed property with delete keyword before it, as shown below:
Syntax: Computed property
delete objectName[expression] //z=”age”; person[z]; the expression needs to calculate a property name. we will learn about computed property in the coming article.
If we try to delete the property by accessing them using dot notation it will not delete the property from an object rather it returns undefined. This means in order to delete it we have to access it using bracket notation only.
Example: JavaScript Objects, delete property from an object using a variable with bracket notation
<html>
<head>
<title>JavaScript Objects, delete property from an object using variable with bracket notation example</title>
</head>
<body>
<script>
//Object Literal with few defined properties
var person = {
firstName: "Elon", //setting the value of property of person object
lastName: "Musk",
age: 25,
location: "India",
pincode: 400001
};
let propLocation = 'location';
delete person[propLocation] //to delete a property location stored it into variable and access it using bracket notation with delete keyword before it
//display data
console.log("person object: ", person)
console.log("person object length: ", Object.getOwnPropertyNames(person).length)
console.log("person Object literal type? : ", typeof person);// object
console.log("Person Object already defined property firstName- with dot notation-->Property firstName value is: ", person.firstName);//Elon
console.log("Person Object already defined property firstName- with bracket notation-->Property firstName value is: ", person['firstName']);
console.log("Person Object accessing deleted property location- with bracket notation-->Property location value is: ", person[propLocation]);//undefined
</script>
</body>
</html>
Output:
In the above code, we deleted the existing location property of the person object by storing the property into variables and accessing them with bracket notation, hence the person object property count is now 4 earlier before deleting it was 5. When we tried to print it to the screen, as it doesn’t exist it will print ‘undefined’.
Example: JavaScript Objects, delete property from an object using a variable with dot notation
<html>
<head>
<title>JavaScript Objects, delete property from an object using variable with dot notation example</title>
</head>
<body>
<script>
//Object Literal with few defined properties
var person = {
firstName: "Elon", //setting the value of property of person object
lastName: "Musk",
age: 25,
location: "India",
pincode: 400001
};
let propLocation = 'location';
delete person.location //to delete a property location stored it into variable and if we access it using dot notation it will not delete the property
//display data
console.log("person object: ", person)
console.log("person object length: ", Object.getOwnPropertyNames(person).length)
console.log("person Object literal type? : ", typeof person);// object
console.log("Person Object already defined property firstName- with dot notation-->Property firstName value is: ", person.firstName);//Elon
console.log("Person Object already defined property firstName- with bracket notation-->Property firstName value is: ", person['firstName']);
console.log("Person Object accessing deleted property location- with dot notation-->Property location value is: ", person.propLocation);//undefined
</script>
</body>
</html>
Output:
In the above code, we tried deleting the existing location property of the person object by storing the property into variables and accessing them with dot notation but it will not delete the property, hence the person object property count is still 5 as it doesn’t delete the property rather when we tried to print it to the screen, it will print ‘undefined’ as it doesn’t work.
Delete property from the JavaScript object using ES6 feature destructuring
Destructuring is a JavaScript ECMAScript 6 version new features, it is an easy way of extracting or removing values from data stored such as objects and Arrays. we will learn about Destructuring feature in the ES6 Destructuring chapter.
As of now, we will see how it removes the values from data stored like objects. To remove/delete a property from an object we have to use the combination of the destructuring object with the rest parameters (…), In this, we have to put the properties we want to remove from an existing object inside the curly bracket {}.
In the below example, if we want to remove properties age and Pincode from a person object we can put them inside the curly bracket along with we can add one expression called remainOtherProperties with prefixed by three dots called rest parameters. We are picking/destructuring 2 properties from person object with the rest parameters
Example: JavaScript Objects, delete property from an object using ES6 feature destructuring
<html>
<head>
<title>JavaScript Objects, delete property from an object using ES6 feature destructuring example</title>
</head>
<body>
<script>
//Object Literal with few defined properties
let person = {
firstName: "Elon", //setting the value of property of person object
lastName: "Musk",
age: 25,
location: "India",
pincode: 400001
};
// assign properties which we want to keep (except "age" & "pincode") into rest parameter i.e., RemainOtherProperties
//remove/delete age and pincode properties
let { age, pincode, ...remainOtherProperties } = person;
//display data
console.log("After removing age and pincode properties remainOtherProperties object: ", remainOtherProperties)
console.log("remainOtherProperties object length: ", Object.getOwnPropertyNames(remainOtherProperties).length)
console.log("remainOtherProperties Object type? : ", typeof remainOtherProperties);// object
</script>
</body>
</html>
Output:
The above code will pick or destructure(remove) properties such as age and Pincode from person object and put all the other properties we want to keep except age and Pincode into the rest parameter remainOtherProperties variable. So, in the end, the remainOtherProperties variable will only have only those properties we want to keep such as firstName, lastName, and location properties are present in them. Since only 3 properties are present in the remainOtherProperties variable hence the length of the person object is 3.
In the next article, I am going to discuss Traversing and Enumerate JavaScript Object Properties with Examples. Here, in this article, I try to explain How to Delete/Remove Property from a JavaScript Object with Examples and I hope you enjoy this How to Delete/Remove Property from a JavaScript Object article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.