Deleting Objects in JavaScript

Viewed 433965

I'm a bit confused with JavaScript's delete operator. Take the following piece of code:

var obj = {
    helloText: "Hello World!"
};

var foo = obj;

delete obj;

After this piece of code has been executed, obj is null, but foo still refers to an object exactly like obj. I'm guessing this object is the same object that foo pointed to.

This confuses me, because I expected that writing delete obj deleted the object that obj was pointing to in memory—not just the variable obj.

Is this because JavaScript's Garbage Collector is working on a retain/release basis, so that if I didn't have any other variables pointing to the object, it would be removed from memory?

(By the way, my testing was done in Safari 4.)

13 Answers

The delete operator deletes only a reference, never an object itself. If it did delete the object itself, other remaining references would be dangling, like a C++ delete. (And accessing one of them would cause a crash. To make them all turn null would mean having extra work when deleting or extra memory for each object.)

Since Javascript is garbage collected, you don't need to delete objects themselves - they will be removed when there is no way to refer to them anymore.

It can be useful to delete references to an object if you are finished with them, because this gives the garbage collector more information about what is able to be reclaimed. If references remain to a large object, this can cause it to be unreclaimed - even if the rest of your program doesn't actually use that object.

The delete command has no effect on regular variables, only properties. After the delete command the property doesn't have the value null, it doesn't exist at all.

If the property is an object reference, the delete command deletes the property but not the object. The garbage collector will take care of the object if it has no other references to it.

Example:

var x = new Object();
x.y = 42;

alert(x.y); // shows '42'

delete x; // no effect
alert(x.y); // still shows '42'

delete x.y; // deletes the property
alert(x.y); // shows 'undefined'

(Tested in Firefox.)

The delete operator deletes an object, an object's property, or an element from an array. The operator can also delete variables which are not declared with the var statement. In the example below, 'fruits' is an array declared as a var and is deleted (really??)

delete objectName
delete objectName.property
delete objectName[index] 
delete property // The command acts  only within a with statement.

var fruits = new Array("Orange", "Apple", "Banana", "Chery");
var newParagraph = document.createElement("p"); 
var newText = document.createTextNode("Fruits List : " + fruits);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);
//Delete the array object.
delete fruits;
var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode("Display the Fruits after delete the array object - Fruits List : "+ fruits;); 
newParagraph1.appendChild(newText1);
document.body.appendChild(newParagraph1);

https://www.w3resource.com/javascript/operators/delete.php

We have multiple ways to Delete the Object property.

Arrow Function: We can also use the arrow function to remove the property from an object which is a one-liner solution.

const obj = {
    'first': 'one',
    'second': 'two',
    'third': 'three'
}

const fn = (key, { [key]: deletedKey, ...others }) => others;

console.log(fn('first', obj))        // { 'second': 'two', 'third': 'three' }

Reduce Method: We can use the reduce method to delete the specific property from the original object in javascript.

const obj = {
    'first': 'one',
    'second': 'two',
    'third': 'three'
}

const exceptSecond = Object.keys(obj).reduce((acc, key) => {
    if (key !== 'second') {
        acc[key] = obj[key]
    }
    return acc
}, {})

console.log(exceptSecond)    // { 'first': 'one', 'third': 'three' }

Delete: This is easy simple way to delete.

delete obj.first; 
// Or
delete obj['first'];

Using unset, Omit, Pic Method from "loadash" lib:

    import { unset } from 'lodash'


const obj = {
    'first': 'one',
    'second': 'two',
    'third': 'three'
}

unset(obj, 'third')        // true

console.log(obj)        // { 'first': 'one', 'second': 'two' }

// Using omit 
import { omit } from 'lodash'
const obj1 = {
    'first': 'one',
    'second': 'two',
    'third': 'three'
}

omit(obj1, [ 'first', 'second' ])

console.log(obj1)  

Reflect Delete Property: This is the new built-in Object introduced in ES6. Now it is possible to delete object property by calling the deleted property() function from this Refect Object.

This function is equivalent to what we have discussed with the delete operator in the first method.

const someObject = {
    'first': 'one',
    'second': 'two',
    'third': 'three'
}

Reflect.deleteProperty(someObject, 'second')

console.log(someObject)        //  { 'first': 'one', 'third': 'three' }
Related