JavaScript for C# programmers: the with statement considered harmful

A quickie pitstop on the road to learning JavaScript when you know C#.

In this episode, the with statement. See it, and then forget all about it.

If you've ever used Pascal or VB, you'll be familiar with with. It introduces a block where unqualified identifiers can come from the object referenced in the with clause. So, for example, you could have

var point = { x: 10, y: 20 };
console.log('(' + point.x + ',' + point.y + ')');

Using the with statement, you could write this instead:

with (point) {
    console.log('(' + x + ',' + y + ')');
}

Which some could view as being easier to read, especially if the object name from the with clause were long.

However all is not rosy. The way with works is to insert the object being referenced at the front of the scope chain (getting worried yet? what were the rules about scope again?) whilst in the block. So any time you have to resolve some variable, JavaScript would start off with the referenced object and then, if not found, continue with the rest of the scope chain.

Let's look at some other code — but this time I'm not going to show you the object definition:

with (someOldThing) {
    color = defaultColor;
}

Your natural instinct is to read that code like this:

someOldThing.color = someOldThing.defaultColor;

That's what it says, doesn't it? Right? Wrong, I'm afraid. Sure if someOldThing has properties named color and defaultColor, that would be an acceptable way to read that with statement. But what if it didn't?

Let's suppose it didn't have a property called color. JavaScript, in executing that with statement, would look at someOldThing. Does it have a color property? No. So JavaScript would continue down the chain, eventually reaching the global object, window. If that didn't have such a property, JavaScript would create one there. Ouch. Double ouch. A bazillion ouches. By our mistake, the with statement just created a global variable.

The same argument can be made with defaultColor. In fact, just looking at the example with statement you have absolutely no idea which of these following four statements JavaScript will execute:

someOldThing.color = someOldThing.defaultColor;
someOldThing.color = defaultColor;
color = someOldThing.defaultColor;
color = defaultColor;

Where the unqualified variables, in the worse case, are assumed to be on window.

So, all in all, given the fact that it can be so easily misread by programmers (especially programmers with varying levels of expertise), I recommend that you just forget about with completely.

Poof, it's gone.

  Loading links to posts on similar topics...