[javascript] How to quickly clear a JavaScript Object?

With a JavaScript Array, I can reset it to an empty state with a single assignment:

array.length = 0;

This makes the Array "appear" empty and ready to reuse, and as far as I understand is a single "operation" - that is, constant time.

Is there a similar way to clear a JS Object? I know I can iterate its fields deleting them:

for (var prop in obj) { if (obj.hasOwnProperty(prop)) { delete obj[prop]; } }

but this has linear complexity.

I can also just throw the object away and create a new one:

obj = {};

But "promiscuous" creation of new objects leads to problems with Garbage Collection on IE6. (As described here)

So to recap your question: you want to avoid, as much as possible, trouble with the IE6 GC bug. That bug has two causes:

1. Garbage Collection occurs once every so many allocations; therefore, the more allocations you make, the oftener GC will run;
2. The more objects you've got ‘in the air’, the more time each Garbage Collection run takes (since it'll crawl through the entire list of objects to see which are marked as garbage).

The solution to cause 1 seems to be: keep the number of allocations down; assign new objects and strings as little as possible.

The solution to cause 2 seems to be: keep the number of 'live' objects down; delete your strings and objects as soon as you don't need them anymore, and create them afresh when necessary.

To a certain extent, these solutions are contradictory: to keep the number of objects in memory low will entail more allocations and de-allocations. Conversely, constantly reusing the same objects could mean keeping more objects in memory than strictly necessary.

Now for your question. Whether you'll reset an object by creating a new one, or by deleting all its properties: that will depend on what you want to do with it afterwards.

You’ll probably want to assign new properties to it:

• If you do so immediately, then I suggest assigning the new properties straightaway, and skip deleting or clearing first. (Make sure that all properties are either overwritten or deleted, though!)
• If the object won't be used immediately, but will be repopulated at some later stage, then I suggest deleting it or assigning it null, and create a new one later on.

There's no fast, easy to use way to clear a JScript object for reuse as if it were a new object — without creating a new one. Which means the short answer to your question is ‘No’, like jthompson says.

You can try this. Function below sets all values of object's properties to undefined. Works as well with nested objects.

var clearObjectValues = (objToClear) => {
    Object.keys(objToClear).forEach((param) => {
        if ( (objToClear[param]).toString() === "[object Object]" ) {
            clearObjectValues(objToClear[param]);
        } else {
            objToClear[param] = undefined;
        }
    })
    return objToClear;
};

Assuming your object name is BASKET, simply set BASKET = "";

You can delete the props, but don't delete variables. delete abc; is invalid in ES5 (and throws with use strict).

You can assign it to null to set it for deletion to the GC (it won't if you have other references to properties)

Setting length property on an object does not change anything. (it only, well, sets the property)

This bugged me for ages so here is my version as I didn't want an empty object, I wanted one with all the properties but reset to some default value. Kind of like a new instantiation of a class.

let object1 = {_x000D_
  a: 'somestring',_x000D_
  b: 42,_x000D_
  c: true,_x000D_
  d:{_x000D_
    e:1,_x000D_
    f:2,_x000D_
    g:true,_x000D_
    h:{_x000D_
      i:"hello"_x000D_
    }_x000D_
  },_x000D_
  j: [1,2,3],_x000D_
  k: ["foo", "bar"],_x000D_
  l:["foo",1,true],_x000D_
  m:[{n:10, o:"food", p:true }, {n:11, o:"foog", p:true }],_x000D_
  q:null,_x000D_
  r:undefined_x000D_
};_x000D_
_x000D_
let boolDefault = false;_x000D_
let stringDefault = "";_x000D_
let numberDefault = 0;_x000D_
_x000D_
console.log(object1);_x000D_
//document.write("<pre>");_x000D_
//document.write(JSON.stringify(object1))_x000D_
//document.write("<hr />");_x000D_
cleanObject(object1);_x000D_
console.log(object1);_x000D_
//document.write(JSON.stringify(object1));_x000D_
//document.write("</pre>");_x000D_
_x000D_
function cleanObject(o) {_x000D_
  for (let [key, value] of Object.entries(o)) {_x000D_
    let propType = typeof(o[key]);_x000D_
_x000D_
    //console.log(key, value, propType);_x000D_
_x000D_
    switch (propType) {_x000D_
      case "number" :_x000D_
        o[key] = numberDefault;_x000D_
        break;_x000D_
_x000D_
      case "string":_x000D_
        o[key] = stringDefault;_x000D_
        break;_x000D_
_x000D_
      case "boolean":_x000D_
        o[key] = boolDefault;    _x000D_
        break;_x000D_
_x000D_
      case "undefined":_x000D_
        o[key] = undefined;   _x000D_
        break;_x000D_
_x000D_
      default:_x000D_
        if(value === null) {_x000D_
            continue;_x000D_
        }_x000D_
_x000D_
        cleanObject(o[key]);_x000D_
        break;_x000D_
    }_x000D_
  }_x000D_
}_x000D_
_x000D_
// EXPECTED OUTPUT_x000D_
// Object { a: "somestring", b: 42, c: true, d: Object { e: 1, f: 2, g: true, h: Object { i: "hello" } }, j: Array [1, 2, 3], k: Array ["foo", "bar"], l: Array ["foo", 1, true], m: Array [Object { n: 10, o: "food", p: true }, Object { n: 11, o: "foog", p: true }], q: null, r: undefined }_x000D_
// Object { a: "", b: 0, c: undefined, d: Object { e: 0, f: 0, g: undefined, h: Object { i: "" } }, j: Array [0, 0, 0], k: Array ["", ""], l: Array ["", 0, undefined], m: Array [Object { n: 0, o: "", p: undefined }, Object { n: 0, o: "", p: undefined }], q: null, r: undefined }

Well, at the risk of making things too easy...

for (var member in myObject) delete myObject[member];

...would seem to be pretty effective in cleaning the object in one line of code with a minimum of scary brackets. All members will be truly deleted instead of left as garbage.

Obviously if you want to delete the object itself, you'll still have to do a separate delete() for that.

ES5

ES5 solution can be:

// for enumerable and non-enumerable properties
Object.getOwnPropertyNames(obj).forEach(function (prop) {
  delete obj[prop];
});

ES6

And ES6 solution can be:

// for enumerable and non-enumerable properties
for (const prop of Object.getOwnPropertyNames(obj)) {
  delete obj[prop];
}

Performance

Regardless of the specs, the quickest solutions will generally be:

// for enumerable and non-enumerable of an object with proto chain
var props = Object.getOwnPropertyNames(obj);
for (var i = 0; i < props.length; i++) {
  delete obj[props[i]];
}

// for enumerable properties of shallow/plain object
for (var key in obj) {
  // this check can be safely omitted in modern JS engines
  // if (obj.hasOwnProperty(key))
    delete obj[key];
}

The reason why for..in should be performed only on shallow or plain object is that it traverses the properties that are prototypically inherited, not just own properties that can be deleted. In case it isn't known for sure that an object is plain and properties are enumerable, for with Object.getOwnPropertyNames is a better choice.

Something new to think about looking forward to Object.observe in ES7 and with data-binding in general. Consider:

var foo={
   name: "hello"
};

Object.observe(foo, function(){alert('modified');}); // bind to foo

foo={}; // You are no longer bound to foo but to an orphaned version of it
foo.name="there"; // This change will be missed by Object.observe()

So under that circumstance #2 can be the best choice.