Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to delete a getter using the delete operator in JavaScript?
In this tutorial, we are going to learn how we can delete a getter function using the delete operator in JavaScript. Getter functions are used to get the property of an object and bind the property with the getter function i.e., whenever the property is called the getter function will also be called with it. You can only have one getter or setter per name on an object as we cannot create more than two getters using the same name in JavaScript.
To delete a getter function in JavaScript we use the delete operator which uses the keyword “delete”.
Syntax
Syntax to delete a getter function using delete operator is given as −
delete object_name.property or delete object_name[property]
The delete operator can also be used to delete the normal property of an object. The delete operator is the most useful operator in the object because like array it cannot use the operators like pop(), splice(), filter() or any other method so it just uses the delete operator to remove any property from the object. So while deleting getter function you should be very aware that not to delete the normal property of the object. Also while deleting a setter using this property you need to be aware to backup the getter function and restore it back after deleting the setter function.
In the accessor properties we use two methods getter and setter to get and set the value of the object means both methods can be used to define the object accessors. Getter and setter properties allow us to get and set the value of the property of an object from outside the object we can also change the value without accessing the object
Let’s look into one example where we will create a getter function and later on delete it with the help of delete operator.
Steps
Steps to write a HTML code to delete a getter using delete operator in JavaScript −
Step 1 − Create an object named as person.
Step 2 − Assign some key-value pairs to the object like first_name, last_name, section, and hair_color.
Step 3 − Now we create another property using getter function in which we are creating one object method by calling other key-value pairs inside it.
Step 4 − To call the other key- value pairs in the method we are using “this” operator.
Step 5 − We will also use the return statement to return the value of the getter property.
Step 6 − Now we print the value of getter property
Step 7 − Now using delete operator we delete the getter property using “delete” keyword.
Step 8 − At last, we again print the value of getter property to check if it is deleted or not.
Example
We can use the below code to delete a getter using the delete operator in JavaScript −
<html>
<body>
<script>
var person = {
first_name: "Aditya",
last_name: "Chaudhary",
section: "A",
hair_color: "black",
get details() {
return "Student Details<br>" + this.first_name + " " +this.last_name + " of section " + this.section + " have " + this.hair_color+ " color hairs ";
},
}
document.write( person.details);
delete person.details;
document.write("<br>Student details (after deletion): " +person.details);
</script>
</body>
</html>
As we can see in the output when we firstly print the getter property than it shows us the all the details of person and after deleting it is showing it as undefined which means the delete operator deletes the value of getter property.
So, the delete operator deletes the value of the getter property, but we can also reassign the value to the getter property after deleting it if we want than it will work as a normal property of the object. It also replaces an accessor property with a data property after the first access making a lazily initialized data property.
Apart from removing a key-value pair from the object the delete operator also returns the value either true or false. In most of the cases it return true except when the property is non−configurable property in that case it returns false.
Note − If we are deleting one property from the object which does not exist in the object than also we get the output as true.
604 Views
