How to remove a property from a JavaScript object?

JavascriptWeb DevelopmentObject Oriented Programming

The delete operator is used to remove the property and also the value of the property. After deletion, the property cannot be used before it is added back again.

The delete operator does not affect variables or functions.

Note − Using the delete operator on predefined JavaScript object properties can crash your application.

Syntax

delete object.property;

In the code snippet below, cricketer is an object having three properties. We can delete the property points as delete cricketer.points.

<script>
var cricketer = {
   name:"John",
   rank:3,
   points: 800
};
delete cricketer.points;

Let’s understand how to remove a property from a JavaScript object with the help of a complete example.

Example 1

In the example below, we use delete operator to remove the property ‘points’ of the object ‘cricketer’-

<html>
<body>
<p id="demo"></p>
<script>
var cricketer = {
   name:"John",
   rank:3,
   points: 800
};
delete cricketer.points;
document.getElementById("demo").innerHTML = cricketer.name + " scored" + ' '+cricketer.points;
console.log(cricketer);
</script>
</body>
</html>

Output

On successful execution of the above program, in the console, the output is as follows -

{name: 'John', rank: 3}

And the browser displays -

John scored undefined

Notice that before deletion, cricketer.points=800 and after deletion, cricketer.points=undefined.

The output in the console shows that the property ‘points’ and the value ‘800’ are deleted.

Syntax

delete object["property"];

We could also remove a property using delete operator as follow -

<script>
var cricketer = {
   name:"John",
   rank:3,
   points: 800
};
delete cricketer["points"];

In the code snippet above, we delete the property points using delete cricketer["points"].

See the complete example as below -

Example 2

In the example below, we use delete operator to remove the property ‘points’ of the object ‘cricketer’-

<html>
<body>
<p id="demo"></p>
<script>
var cricketer = {
   name:"John",
   rank:3,
   points: 800
};
delete cricketer["points"];
document.getElementById("demo").innerHTML = cricketer.name + " scored" + ' '+cricketer.points;
console.log(cricketer);
</script>
</body>
</html>

Output

On successful execution of the above program, in the console, the output is as follows -

{name: 'John', rank: 3}

And the browser displays -

John scored undefined

The output in the console shows that both the property ‘points’ and the value ‘800’ are deleted.

Example 3

In the example below, we assign the ‘undefined’ to the property ‘points’. This assignment does not remove the property but deletes the value of the property.

<html>
<body>
<p id="demo"></p>
<script>
var cricketer = {
   name:"John",
   rank:3,
   points: 800
};
cricketer.points = undefined;
document.getElementById("demo").innerHTML = cricketer.name + " scored" + ' '+cricketer.points
console.log(cricketer);
</script>
</body>
</html>

Output

On successful execution of the above program, in the console, the output is as follows -

{name: 'John', rank: 3, points: undefined}

Also, the browser displays -

John scored undefined

Notice that the output in the console shows that the property is not removed, but the value of the property is deleted.

Deleting properties of nested objects

In the code snippet below points is a nested object having two properties match1 and match2. We could delete a property of this nested object using the delete operator as below -

<script>
var cricketer = {
   name:"John",
   rank:3,
   points: {
      match1: 800,
      match2: 750
   }
};
delete cricketer.points.match2;

In the above code snippet, we delete property match2 from the nested object points.

Example

Have a look at the complete example below -

<html>
<body>
<p id="demo"></p>
<p id="demo2"></p>
<script>
var cricketer = {
   name:"John",
   rank:3,
   points: {
      match1: 800,
      match2: 750
   }
};
delete cricketer.points.match2;
document.getElementById("demo").innerHTML = cricketer.name + " scored" + ' '+cricketer.points.match1+" in match1.";
document.getElementById("demo2").innerHTML = cricketer.name + " scored" + ' '+cricketer.points.match2+" in match2.";
console.log(cricketer);
</script>
</body>
</html>

Output

On successful execution of the above program, the browser will display the following result -

John scored 800 in match1.
John scored undefined in match2.

Notice that property match2 is removed from the object points.

raja
Published on 08-May-2020 13:41:30
Advertisements