While working with arrays or objects the programmers may face situations when some of the elements or properties must be removed. JavaScript offers a special operator for such cases, that is delete.

This operator allows you to delete an object, its properties or elements of an array and returns false if the removal is not possible or true otherwise. The correct syntax is delete expression, where expression is a reference to a property that you want to erase. If this reference does not link to any items, the operator will not perform any actions. 

Note that unlike the other programming languages (for example, C++), the delete operator in JS does not free up any memory. The memory management in JavaScript can be performed indirectly through cleaning up the references.

Delete operator for objects and properties

In order to delete a property of the object, just indicate it using the object name. The following example illustrates how easy it is. 

const Person = {
 name: "John",
 age: 25,
 isMarried: true,
};


console.log(delete Person.isMarried); // true
console.log(delete Person.surname); // true
console.log(Person); // "{name: 'John', age: 25}"

 There is an object with three properties created in this example. The delete operator returns true after removal of the isMarried property. You can see that the object itself was changed and only two properties were printed after the removal. 

Note, that the operator does not throw any exceptions when you try to delete a non-existing property. It returns the same true value instead.

The delete operator does not change a prototype of the specified object. Even if there is a property with the same name, it will not be removed. You can only remove such properties directly through the prototype. Thus, after removal of a specific property, the object will use the one from the prototype chain because of the inheritance.

The delete operator cannot modify certain properties of the built-in objects (such as Object, Array, Math, etc.). They are marked as DontDelete. 

console.log(delete Math.LN10); //logs false

You can also configure the process of removing the properties from the custom objects. The built-in Object.defineProperty() method is very helpful for this purpose.

For example, let’s create an object with one property and then add another one by means of the defineProperty() method. We will set a flag configurable to false and in that way will make the deletion impossible. 

In the example below the delete operator returns false, being unable to remove the specified property. When you try to print your object, you can as well see the created age property with an undefined value.

const Person = {
 name: "John",
};

Object.defineProperty(Person, "age", { configurable: false });
console.log(delete Person.age); //false
console.log(Person); //"{name: 'John', age: undefined}"

Thus, in this case the delete operator just did not perform any actions. Note that in the strict mode of JS this situation will even cause the Typer Error.

Delete operator for arrays, variables and functions

The delete operator is not able to remove the variables declared with the help of var, let or const keywords because they create non-configurable properties. This case is illustrated in the example below.

var a = 5;
b = 10; // declared as global variable a.k.a globalObject property
        // The same as: 
        // globalThis.b = 10;
const c = 20;
let d = 30;

console.log(delete a); // logs false
console.log(delete b); // logs true
console.log(delete c); // logs false
console.log(delete d); // logs false

If you try to use the b variable after its removal, you will get the Reference Error message saying that b is not defined. You can apply the delete operator in order to remove certain elements of your array. Note that its length will not be changed in this case. 

For example, if you want to remove the item with the index 2 from an array of numbers [1, 2, 3, 4, 5], after using the delete operator this array will be changed to [1, 2, …, 4, 5]. Number 4 will still have index 3 and the length of the array will remain 5. Thus, some sort of a hole will be created. This situation is illustrated in the following code.

const array = [1, 2, 3, 4, 5];
console.log(delete array[2]); // logs true
console.log(array); // logs (5) [1, 2, …, 4, 5]

The same thing will happen if you try to remove the first or the last element of your array. The removal of the function or its arguments using the delete operator is not possible either. Each time it will not perform any actions and just return false as a result. In a strict mode the Syntax Error will be thrown in this case.

function f(arg) {
 console.log(delete arg); // false
}
f();
console.log(delete f); // false

Cross-browser issues

In most cases web browsers implement the iteration process in the way when the properties get their indexes in order of addition one by one. However, it does not always work in the same way.

In case with Internet Explorer, if there is a property with the undefined value, you can use the delete operator to remove it. However, if you add a property with the same name later, it will be located into its old position instead of the end of iteration sequence as expected. Thus you need to be very careful while creating cross-browser programs.