The delete operator removes a property from an object.
Syntax
delete expression
where expression should evaluate to a property reference, e.g.:
delete object.property delete object['property']
Parameters
object- The name of an object, or an expression evaluating to an object.
property- The property to delete.
Return value
Throws SyntaxError in strict mode if the property is an own non-configurable property (returns false in non-strict). Returns true in all other cases.
Description
Unlike what common belief suggests, the delete operator has nothing to do with directly freeing memory .
Memory Managment is done indirectly via breaking references. See the memory management page for more details.
delete operator shall remove the property from the Object. On succesful deletion of property it will return "true" else "false" would be returned.
However it is important to consider following Scenerios:
- Even if the Object property which you are trying to delete does not exists, delete keyword shall not do anything and would return "true"
- If the property with the same name exists on the Object's Prototype chain, Object shall be using that property from the Prototype Chain.
- Any Property declared using "var" keyword cannot be deleted from Global or Function Scope.
- Delete Keyword cannot delete the "functions" assigned to Global Scope. It wont work on either Function Definition or Expression in case of Global Scope Functions.
- Functions which are part of Object apart from Global Scope (window) can be deleted.
- Cannot remove Properties of Predefined Objects like Math, Array, Object. These properties are marked as non-configurable.
- Any property marked as Non-Configurable, cannot be deleted
- Does not delete local Variables
We shall be evaluating these scenerios, but lets first see how basic synatax works
var Employee = {
age: 28,
name: 'abc',
designation: 'developer'
}
console.log(delete Employee.name) //returns true
console.log(delete Employee.age) //returns true
//If User tries to delete the property that does not exists, "true" is returned
console.log(delete Employee.salary) //returns true
Marking Property as Non-Configurable
We can mark the property of an Object as Non-Configurable using following Code.
Marking any property as Non-Configurable shall not allow delete keyword to delete that property. In case of Non Configurable Properties, false will be returned.
When we talk about Strict Mode, if we try to delete any Non Configurable, property, it will result in Error.
Dont put delete on Non Configurable Properties.
var Employee = {};
Object.defineProperty(Employee, 'name', {configurable: false})
console.log(delete Employee.name); // return false
When we create a variable using "var" keyword, it is marked as Non Configurable. Therefore they cannot be deleted.
var name = 'XYZ';
//We can access properties of Object using:
Object.getOwnPropertyDescriptor(window, 'demoName')
//output: Object {value: "", writable: true, enumerable: true, configurable: false}
//Since Property is added using "var" keyword, it is marked as "Non Configurable"
delete name; // return false
In the strict Mode, this will return an Error. In strict Mode we cannot delete Non Configurable Properties.
Delete Keyword in "Strict and Non Strict Mode"
When a delete opperator is encountered in a "Strict Mode", any direct reference to variable, function argument or function name shall throw "Syntax Error".
In the code below, we can see a direct reference of delete keyword to a variable in a non strict mode. Lets evaluate how it behaves:
Since any variable defined using "var" keyword is marked as "Non Configurable", therefore "salary" property cannot be deleted. Delete keyword will return "false" in this case.
function Employee() {
delete salary;
var salary;
}
Employee()
Lets see how the same code behaves in "Strict Mode".
Since in the below code we are referencing to the "variable" directly, it would return a "Syntax error".
"use strict";
function Employee() {
delete salary; // Syntax Error
var salary;
}
// Similarly, access to function directly with "delete" keyword shall return "Syntax Error".
function DemoFunction() {
//some code
}
delete DemoFunction // Syntax Error
Examples
// creates the property adminName on the Global Scope
adminName = 'xyz';
// creates the property empCount on the Global Scope
// Since we are using "var", property is marked as "Non Configurable"
var empCount = 43;
EmployeeDetails = {
name: 'xyz,
age: 5,
designation: 'Developer'
};
// adminName is a property of the Global Scope
// Can be deleted since it is created without "var" keyword. Therefor Configurable.
delete adminName; // returns true
// empCount is not configurable, since "var" keyword is used, marking it as Non Configurable
delete empCount; // returns false
// delete can remove Properties from Objects
delete EmployeeDetails.name; // returns true
// Even when the property does not exists, it returns "true"
delete EmployeeDetails.salary; // returns true
// delete doesn't affect certain predefined properties
delete Math.PI; // returns false
// EmployeeDetails is a property of the Global Scope.
// Since it defined without "var", it is marked Configurable
delete EmployeeDetails; // returns true
function f() {
var z = 44;
// delete doesn't affect local variable names
delete z; // returns false
}
Lets evaluate what happens if the property exist inside ProtoType Chain.
function Foo(){
this.bar = 10;
}
Foo.prototype.bar = 42;
var foo = new Foo();
// Return True, since it deletes the property on "foo" Object
delete foo.bar;
// foo.bar is still available, since it is present in Proitotype Chain.
console.log(foo.bar);
// deletes property on prototype
delete Foo.prototype.bar;
// logs "undefined", property no longer inherited
console.log(foo.bar);
Deleting array elements
When you delete an array element, the array length is not affected. This holds even if you delete the last element of the array.
When the delete operator removes an array element, that element is no longer in the array. In the following example, trees[3] is removed with delete.
var trees = ["redwood","bay","cedar","oak","maple"];
delete trees[3];
if (3 in trees) {
// this does not get executed
}
If you want an array element to exist but have an undefined value, use the undefined value instead of the delete operator. In the following example, trees[3] is assigned the value undefined, but the array element still exists:
var trees = ["redwood","bay","cedar","oak","maple"];
trees[3] = undefined;
if (3 in trees) {
// this gets executed
}
Specifications
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}} | {{Spec2('ESDraft')}} | |
| {{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}} | {{Spec2('ES6')}} | |
| {{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}} | {{Spec2('ES5.1')}} | |
| {{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}} | {{Spec2('ES1')}} | Initial definition. Implemented in JavaScript 1.2. |
Browser compatibility
{{CompatibilityTable}}
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
| Temporal dead zone | {{CompatUnknown}} | {{CompatGeckoDesktop(36)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
| Temporal dead zone | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatGeckoMobile(36)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Cross-browser notes
Although ECMAScript makes iteration order of objects implementation-dependent, it may appear that all major browsers support an iteration order based on the earliest added property coming first (at least for properties not on the prototype). However, in the case of Internet Explorer, when one uses delete on a property, some confusing behavior results, preventing other browsers from using simple objects like object literals as ordered associative arrays. In Explorer, while the property value is indeed set to undefined, if one later adds back a property with the same name, the property will be iterated in its old position--not at the end of the iteration sequence as one might expect after having deleted the property and then added it back.
So, if you want to simulate an ordered associative array in a cross-browser environment, you are forced to either use two separate arrays (one for the keys and the other for the values), or build an array of single-property objects, etc.
See also
- In depth analysis on delete
- {{jsxref("Reflect.deleteProperty()")}}