Teach with us

How to work with delete operator in JavaScript?

JavascriptWeb DevelopmentFront End Technology

In this tutorial, we will learn how to work with delete operator in JavaScript.

Use the delete property in JavaScript to remove a property from an object. Eventually, the object stored by that property is released if the property’s value is an object and there are no more references to the object.

In this tutorial, we will discuss two uses of the delete operator in JavaScript −

  • Delete the object properties
  • Delete array elements

Delete the object properties using the delete operator

In JavaScript, the objects store data in the form of key-value pairs. The name values or keys are called the properties. The delete operator is used to delete an object’s property. The property should be present in the object for deletion operation. We can omit the property from the object by writing the property name with the delete operator.

Syntax

// object
const obj = {...}

// delete operator
delete obj.propertyName
delete obj['property name']

In the above syntax, we use the delete operator to delete a property of the object. The ‘obj’ is the object’s name, and the ‘propertyName’ and ‘property name’ is that object's property name.

Example

In the below example, we work with the delete operator in JavaScript to delete an object’s property. An object ‘obj’ is used that stores ‘firstname’, ‘lastname’, and ‘age’ values. Three buttons are used as ‘Delete firstname’, ‘Delete lastname’ and ‘Delete age’ to delete the ‘firstname’, ‘lastname’, and ‘age’ properties from the object respectively by a button click. The function 'deleteProperty()' is associated with the click event of these buttons, so the function deletes their respective properties using the delete operator when the user clicks on them. The JSON.stringify() method converts the object into a string to show it on the webpage.

<html>
<body>
   <h2>Delete the object properties using the <i>delete operator</i> of JavaScript</i></h2>
   <button onclick="deleteProperty('firstname')">Delete firstname</button>
   <button onclick="deleteProperty('lastname')">Delete lastname</button>
   <button onclick="deleteProperty('age')">Delete age</button>
   <h4>Object:</h4>
   <div
      id="root"
      style=" padding: 15px; background-color: mintcream; border: 1px solid black; white-space: pre; " >
   </div>
   <script>
      const obj = {
         firstname: 'ABC',
         lastname: 'XYZ',
         age: 18
      }
      const root = document.getElementById('root')
      root.innerHTML = JSON.stringify(obj, null, ' ')
      function deleteProperty(propertyName) {
         delete obj[propertyName]
         root.innerHTML = JSON.stringify(obj, null, ' ')
      }
   </script>
</body>
</html>

Delete array elements using the delete operator

In JavaScript, the arrays are used to store a list of data. Each data of the list are called an element. The delete operator deletes an array element at a particular index. Therefore, to delete an element at a specific position of an array, the array name and the index position of that element should use with the delete operator.

Syntax

// Array
const arr = [...]

// delete operator
delete arr[index]

The above syntax uses the delete operator to delete an array element. The ‘arr’ is the array’s name, and the ‘index’ is the index position of the element.

Example

In the below example, we work with the delete operator in JavaScript to delete an array element. We have taken an input field where users can put the index position of the element that needs to be deleted. The button ‘Delete element’ is used that executes the ‘deleteElement()’ function on the click event. This function deletes the array element of the user input index position.

<html>
<body>
   <h2>Delete the array element using the <i>delete operator</i>of JavaScript</i></h2>
   <h4>Enter the index position of the element that needs to be deleted:</h4>
   <input type="number" id="index" name="index">
   <button onclick="deleteElement()">Delete element</button>
   <h4>Array:</h4>
   <div
      id="root"
      style=" padding: 15px; background-color: mintcream; border: 1px solid black; white-space: pre; " >
   </div>
   <script>
      
      // array
      const arr = [10, 20, 30, 40, 50]
      const root = document.getElementById('root')
      root.innerHTML = '[' + arr + ']'
      function deleteElement(propertyName) {

         // user input value for the index
         const index = document.getElementById('index').value;
         delete arr[index]
         root.innerHTML = '[' + arr + ']'
      }
   </script>
</body>
</html>

In this tutorial, we have learned how to work with the delete operator in JavaScript. We discussed two uses of the delete operators: deleting the object property and the array element. Users can follow the two examples to better understand the delete operator's work.

raja
Shubham Vora
Updated on 31-Oct-2022 11:51:54

Previous Page Print Page Next Page  
Advertisements