Over a million developers have joined DZone.

JavaScript for C# Programmers: the with Statement Considered Harmful

DZone's Guide to

JavaScript for C# Programmers: the with Statement Considered Harmful

· Web Dev Zone
Free Resource

Never build auth again! Okta makes it simple to implement authentication, authorization, MFA and more in minutes. Try the free developer API today! 

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.


Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!


Published at DZone with permission of Julian Bucknall, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}