Javascript 'delete' doesn't work inside iteration loop

Question

I'm a C/C++/Java programmer working with JavaScript.

I'm trying to write a function that will delete all properties of an object 'obj'. I've read the posting on "How to quickly clear a Javascript Object?" and saw that there are two answers: (1) creating a new 'obj' (which I don't want to do because my code is a high-performance program running in a mobile browser, and I want to minimize garbage collection); and (2) iterating over the properties of an object in a loop and deleting the properties. This latter approach doesn't work in Chrome 12.

Consider the following code:

var foo = {};
foo['baz'] = 'bar';
console.log("1. foo.baz = " + foo.baz);

delete foo.baz;
console.log("2. foo.baz = " + foo.baz);

foo['baz'] = 'bar';
console.log("3. foo.baz = " + foo.baz);

for (prop in foo)
{
    if (foo.hasOwnProperty(prop))
    {
        console.log("deleting property " + prop);
        delete foo.prop;
    }
}
console.log("4. foo.baz = " + foo.baz);

This produces the following result in my console on Chrome 12:

1. foo.baz = bar
2. foo.baz = undefined
3. foo.baz = bar
deleting property baz
4. foo.baz = bar

Why doesn't foo.baz get deleted inside the loop?

Answer 1

You lookup the key in the wrong way. You need to use the bracket notation:

delete foo[ prop ];

However, you don't need to loop over every property within an object. It's just fine to null the object reference itself. The garbage collector will take care of you.

foo = null; // done

Talking of high performance, that is the way you want to do.

Answer 2

This line delete foo.prop is incorrect. foo has no property named prop in this case. Using brackets delete foo[prop].