performance - How to quickly clear a JavaScript Object?

ID : 20026

viewed : 7

Tags : javascriptperformancejavascript

Top 5 Answer for performance - How to quickly clear a JavaScript Object?

vote vote

95

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.

vote vote

82

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.

vote vote

72

The short answer to your question, I think, is no (you can just create a new object).

  1. In this example, I believe setting the length to 0 still leaves all of the elements for garbage collection.

  2. You could add this to Object.prototype if it's something you'd frequently use. Yes it's linear in complexity, but anything that doesn't do garbage collection later will be.

  3. This is the best solution. I know it's not related to your question - but for how long do we need to continue supporting IE6? There are many campaigns to discontinue the usage of it.

Feel free to correct me if there's anything incorrect above.

vote vote

62

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; }; 
vote vote

57

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.

Top 3 video Explaining performance - How to quickly clear a JavaScript Object?

Related QUESTION?