Learn How to Delete Property from Object using the Delete Operator. The Delete Operator can be used to delete own property of an object or an element from an array.
Table of Contents
Delete Operator
You can delete a Property from an Object using the Delete Operator. The Syntax of the delete operator is as shown below
1 2 3 4 | delete object.property delete object['property'] |
Where
objectis the name of an object, or an expression evaluating to an object. Note that expression must evaluate to a objectpropertyis the property to delete.
Note that
- You can delete a Property or Method of an object using the Delete Operator. It will completely remove the Property from the collection.
- Delete Operator can also be used to delete a array element. But this will not re arrange the array, but converts it into an sparse array
- Delete will not delete the regular variables or functions
- You can only delete the property owned by the object. You cannot delete the inherited properties (i.e. Prototype Properties)
- It also does not remove the Non-configurable properties.
- Delete returns
falseif the property is an own property and cannot be deleted. In all other cases it returnstrue.
Try to Avoid adding or deleting the Property of an object after it is created. The JavaScript engines optimize the performance of instances created by constructors. Adding or deleting prevents that optimization
Delete Property from Object
In the following example, we use the delete operator to delete the foo property the object obj.
The delete will remove the property from the collection. Hence you will not see the property when using the console.log on obj
1 2 3 4 5 6 7 8 9 10 | let obj = { foo:'1', boo:'2' } console.log(obj) //{foo: "1", boo: "2"} delete obj.foo //deleting foo console.log(obj) //{boo: "2"} //foo is deleted |
Deletes Only Own Properties
Delete Only deletes the own properties. It does not delete the inherited properties.
The own property is a property that we declare directly on the object. The objects can also inherit properties from their prototype object. You can check if a property is an own property or not by using the hasOwnProperty method
The following example, create a obj1 from the constructor function obj. Here foo & boo are the own properties of the obj1. It does not define toString but inherits it from its Prototype. Hence we cannot delete it.
Another interesting point to note that the delete operator returns true, although it does not delete anything.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function obj() { this.foo=1 this.boo=2 } obj1 = new obj() console.log(obj1) //obj { foo: 1, boo: 2 } console.log(obj1.hasOwnProperty('foo')) //true delete obj1.foo //deleting foo console.log(obj1) // obj {boo: 2} foo is deleted console.log(obj1.hasOwnProperty('toString')) //false var result=delete obj1.toString //deleting toString console.log(result) //true console.log(obj1.toString()) //still works. //It does not delete toString. Because it is not own property of Obj1 |
The toString function belongs to the Object.prototype. Hence we can delete it from there.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | function obj() { this.foo=1 this.boo=2 } obj1 = new obj() console.log(obj1.toString()) //[object Object] console.log(Object.prototype.toString) // toString() { [native code] } //Deleting toString var result = delete Object.prototype.toString console.log(result) //returns true console.log(Object.prototype.toString) //undefined toString no longer exists //You can check it function obj() { this.foo=1 this.boo=2 } obj1 = new obj() console.log(obj1.toString()) //obj1.toString is not a function |
Deleting predefined JavaScript methods like toString is not a good idea. It will crash the parts of the app (or third-party libraries) which use it.
Deleting Non Configurable Properties
Delete will not delete Non Configurable own Properties.
We can create a Non Configurable property using the defineProperty method of the object. The following example creates two properties canDelete & cannotDelete. In cannotDelete, we set configurable: false.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var obj = {}; Object.defineProperty(obj, 'canDelete', { value: "1", configurable: true }); Object.defineProperty(obj, 'cannotDelete', { value: "2", configurable: false }); result = delete obj.canDelete console.log(result) //true result = delete obj.cannotDelete //cannotDelete cannot be deleted console.log(result) //false console.log(obj) //{cannotDelete: "2"} |
Cannot delete functions & variable
You cannot delete regular variables, functions or function parameters using the delete Operator.
The variable declared with var is attached to the global object, but it is a not configurable property. Hence it cannot be deleted.
The let or const variables are not attached to any object. Hence they cannot be deleted.
1 2 3 4 5 6 7 | var sum = function(a, b) { return a + b; } delete sum //deleting function console.log(typeof sum); //function console.log(sum(1,1)) //2 still works |
Trying to delete a variable
1 2 3 4 5 6 | var num = 10 delete num //deleting num console.log(num); //10 still works |
We cannot delete obj here as it is declared with let
1 2 3 4 5 6 7 8 9 10 | let obj = { foo:'1', boo:'2' } console.log(obj) //{ foo: '1', boo: '2' } delete obj // Does not delete obj console.log(obj) //{ foo: '1', boo: '2' } |
obj is declared without let, var or const. Hence the delete operator will delete it.
1 2 3 4 5 6 7 8 9 10 | obj = { foo:'1', boo:'2' } console.log(obj) //{ foo: '1', boo: '2' } delete obj // deletes obj console.log(obj) //ReferenceError: obj is not defined |
The code below deletes the property a from the obj. because a is own property of the obj
1 2 3 4 5 6 7 8 | console.log("property deleted") console.log("----------------") obj = {a: []} console.log(obj) //{ a: [] } delete obj.a console.log(obj) //{} //property a deleted |
In the following code, we pass the obj.a to the function deleteProperty1. But it will not delete the property. This is because function does not know which object o belongs to.
1 2 3 4 5 6 7 8 9 10 11 12 | console.log("Property not deleted") console.log("--------------------") obj = {a: []} console.log(obj) //{ a: [] } deleteProperty1(obj.a) //We are passing property to the function console.log(obj) //{ a: [] } function deleteProperty1(o) { delete o //no error but o is not deleted. } |
To delete the property in a function, we need to pass both the object along with the property name as shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 | console.log("property deleted") console.log("----------------") obj = {a: []} console.log(obj) //{ a: [] } deleteProperty2(obj,'a') console.log(obj) function deleteProperty2(obj, prop) { if (obj[prop]) delete obj[prop]; } |
The return value of delete
delete returns false if the property is an own property, but cannot be deleted. It returns true in all other cases. It will return true even if does not delete anything
Following are some examples.
1 2 3 4 5 6 | var str="Test" result = delete str.toString console.log(result) //true. But does not delete it console.log(str.toString()) //it still works |
In the following example, we try to delete a property that does not exist. Delete Operator returns true, although it does not delete anything
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | obj = { prop1: 'P1', prop2: 'P2', } console.log(obj) var result = delete obj.prop3 console.log(result) //true console.log(obj) |
Delete & Strict Mode
In strict mode deleting a non-configurable property throw a type error.
1 2 3 4 5 6 7 8 9 10 11 | "use strict" var obj = {}; Object.defineProperty(obj, 'cannotDelete', { value: "2", configurable: false }); result = delete obj.cannotDelete //throws error becuase the Property non configurable |
Deleting Array Elements
Delete Operator can also be used to delete an element in the array. JavaScript does not re arrange the array, but converts it into an sparse array. “sparse” array where the length is greater than the number of items or at least one item is missing at any of the index.
The code below deletes the element at index 2 (nums[2]) from the nums array. The Actual elements in array now becomes 3 but the length of the array does not become 3 but stays at 4. It is just that element at index 2 is removed and hence there is no value at that position. i.e. there is a hole in the array.
You can see that the when we loop through the array using the forEach it returns only 3 elements.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const nums = Array("1","2","3","4") console.log(nums.length) //4 delete nums[2] //only 3 elements in the array nums.forEach(element => console.log(element)); //1 //2 //4 //But length still shows 4 console.log(nums.length) //4 |
But remember that the JavaScript returns nums[2] as undefined although the index 2 does not contain any value including undefined
The nums1 & nums2 arrays appears same below, but they are not. The nums1 array is a sparse array with no value at index 2, but the nums2 is not a sparse array because it has a value undefined at index 2.
1 2 3 4 5 6 7 8 | const nums1 = Array("1","2","3","4") delete nums1[2] console.log(nums1[2]) //Undefined const nums2 = Array("1","2",undefined,"4") console.log(nums2[2]) //Undefined |
Watch out for Undefined
Trying to access and property that does not exist returns undefined. Hence deleted Property returns undefined.
1 2 3 4 5 6 7 | obj = { foo:'1', boo:'2' } delete obj.foo //deleting foo console.log(obj.foo) //undefined |
Also, note that you can set a property to undefined, the Property still exists but has the value undefined. Hence merely checking for undefined does not tell you whether the property does exist or not.
1 2 3 4 | obj2 = { foo: undefined} console.log(obj2.foo) //undefined |
References
Read More
