Question

This JavaScript snippet

var x = window.foo;
window.x = null;
alert( window.bar === undefined );

alerts “true”.

However, this snippet

var x = window.foo;
window[x] = null;
alert( window.bar === undefined );

alerts “false”.

What is going on here?

(I am running this code in the latest Chrome browser inside a HTML page with no other JavaScript code in it.)

Update

As @elusive cleverly summed up in his comment below, I mistakingly assumed that window.x and window[x] are equivalent. That is not correct. window.x is equivalent to window["x"].

Answer 1

The behavior that you are experiencing is because the undefined property of the Global object, is mutable on any ECMAScript 3 based implementation. (latest Chrome versions are implementing ES5, but this behavior is still present).

Let’s examine the second snippet:

var x = window.foo;
window[x] = null;
alert( window.bar === undefined );

The x variable will hold the undefined value, since the foo property does not exist.

By assigning window[x] = null, you are overriding the value of the undefined property:

window[x] = null; // is equivalent to
window['undefined'] = null; // or
window.undefined = null; //

(In your first snippet, when you assign window.x = null, you are creating a property named "x" on the window object.)

Therefore (in your second snippet), the undefined property will hold null, and window.bar will produce undefined:

alert( window.bar === undefined ); // false
alert( undefined  === null ); // false

The undefined property was not specified as { ReadOnly } on ECMAScript 3, (along with his friends NaN, Infinity).

This has changed in ECMAScript 5, those properties are described as non-writables.