How can I reimplement JavaScript delete method?



The delete operator in JavaScript is used to remove properties from an object to remove element(s) from an array or to remove element(s) from a set object. Always remember the following points about delete: delete is a keyword in JavaScript, so it shouldn’t be altered, and you cannot use delete objects in single variables since it is used only for deleting properties of objects.

Let's look in detail at how we can implement delete operators in JavaScript.

Deleting object properties

Objects in JavaScript, we will write using key-value pair like

const Employee = {
   firstname: 'Devika',
   lastname: 'Rani',
   age : 25,
   department : web development
};

Syntax

Syntax for delete operator in object, Like

delete expression

Here, expression should be property i.e.

delete object or
delete object.property or
delete object['property']

This operator will return true or false. If it removes the property, it will return as true. If an object property doesn't exist while deleting, it will return as true but it won't show any effect on an object. If we try to delete any variable or function using delete keyword, it will return false.

Now, let’s look at an example for deleting age property from an object mentioned above.

Example

<!DOCTYPE html>
<html>
<body>
   <h2>Deleting an object property</h2>
   <p>Before delete a property :
      <span id="showMessage" style="color: darkgreen"></span>
   </p>
   <p>After delete a property:
      <span id="result" style="color: darkgreen"></span>
   </P>
   <script>
      let employee = {
         firstName: "Devika",
         lastName: "Rani",
         age : 25,
         role : "web developer"
      }
      document.getElementById('showMessage').innerHTML =employee.firstName + " " +employee.lastName + " is " + employee.age +" old and working as " + employee.role;
      delete employee.age; // returns as true
      document.getElementById('result').innerHTML = employee.firstName + " " +employee.lastName + " is " + employee.age +" old and working as " + employee.role;
   </script>
</body>
</html>

Here, the delete keyword used for deleting age property from employee object. After deleting the age property, we tried to get age property from employee object, it shows as undefined.

Example

Let's see an example for deleting non-existing property from an object.

<!DOCTYPE html>
<html>
<body>
   <h2>Deleting an object property</h2>
   <p>Before delete a property :
      <span id="showMessage" style="color: darkgreen"></span>
   </p>
   <p>After delete a property:
      <span id="result" style="color: darkgreen"></span>
   </P>
   <script>
      let employee = {
         firstName: "Devika",
         lastName: "Rani",
         age : 25,
         role : "web developer"
      }
      document.getElementById('showMessage').innerHTML = employee.firstName + " " +employee.lastName + " is " + employee.age +" old and working as " + employee.role;
      delete employee.age; // returns as true
      delete employee.role; // returns as true
      delete employee.salary; // returns as true
      document.getElementById('result').innerHTML =employee.firstName + " " +employee.lastName + " is " + employee.age +" old and working as " + employee.role;
   </script>
</body>
</html>

Example

Let's see another example for deleting variable.

<!DOCTYPE html>
<html>
<body>
   <h2>Deleting a variable</h2>
   <p>After delete a variable:
      <span id="result"></span>
   </p>
   <script>
      let num1 = 20;
      let num2 = 30;
      let sum = (a, b) => {
         return a + b;
      }
      if(delete num1){ // returns false
         document.getElementById('result').innerHTML ="variable num is deleted."
      } else {
         document.getElementById('result').innerHTML = num1
      }
   </script>
</body>
</html>

Here, we can observe delete won't work for variables. Even delete used for variables won't show any effect on that.

Example

Now, we will check with deleting global variables. We all know that undeclared will be considered as a global variable. Let's see an example

<!DOCTYPE html>
<html>
<body>
   <h2>Deleting a global variable</h2>
   <p id="result">
   </p>
   <script>
      value = 5;
      try{
         delete value; // returns true
         document.getElementById('result').innerHTML = value;
      }
      catch(e){
         document.getElementById('result').innerHTML = e;
      }
   </script>
</body>
</html>

Object.Prototype delete

Now, we will check how to delete a property of an object which has a prototype chain.

Example

<!DOCTYPE html>
<html>
<body>
   <h2>Deleting a prototype object property</h2>
   <p>Object value :
      <span id="check"></span>
   </p>
   <p>Object value after delete:
      <span id="checkDelete"></span>
   </p>
   <p>Object.prototype value after delete:
      <span id="checkProtoDelete"></span>
   </p>
   <script>
      function check() {
         this.value = 3;
      }
      check.prototype.value = 8;
      var newCheck = new check();

      // check.value is associated with its own property.
      document.getElementById('check').innerHTML = newCheck.value;

      // Delete the own property within the newCheck object.
      delete newCheck.value; // returns true

      // newCheck.value is still available in the prototype chain.
      document.getElementById('checkDelete').innerHTML = newCheck.value;

      // Deleting the property on the prototype.
      delete check.prototype.value; // returns true

      // The "value" property can no longer be inherited from check since it has been deleted.
      document.getElementById('checkProtoDelete').innerHTML = newCheck.value;
   </script> 
</body>
</html>

Another thing with delete method is that this operator delete doesn't delete property value rather than property itself. Let's see an example to check in detail

Example

<!DOCTYPE html>
<html>
<body>
   <h2>Deleting a property</h2>
   <p id = "result"></p>
   <script>
      let employee = {
         firstName: "Sarah",
         lastName: "Max",
         age: 25
      }

      let age = employee.age;
      delete employee.age;
      document.getElementById("result").innerHTML = age;
   </script>
</body>
</html>

Here, we can observe that the output shows that the delete operator has deleted the property of an object but the value still exists on the memory.

Deleting array elements

In JavaScript, we know the typeof array also is an object. So, delete operation we can do it on arrays also. But here we have an issue with the array delete operator that is deleting elements from an array won't affect the length of the array. Deleting elements position will show as empty. Let's look into an example

Example

<!DOCTYPE html>
<html>
<body>
   <h2>Deleting an array</h2>
   <p>Length of the array after delete an element :
      <span id = "arrLength"></span>
   </p>
   <p>Array elements after delete an element :
      <span id = "result"></span>
   </p>
   <script>
      let arr = [1, 2, 3]
      delete arr[1];
      document.getElementById("arrLength").innerHTML = arr.length;
      document.getElementById("result").innerHTML = arr;
   </script>
</body>
</html>

Here, we can see the second element came as empty. But still length is same. So, for deleting elements from an array, pop() or splice() or shift() methods are better approaches to use.

We have seen delete operator on objects and variables. We have seen delete operator on prototype chain objects. We have seen deleting an element from an array. Hope, this article gives knowledge on delete operator in javascript


Advertisements