views:

14963

answers:

22

Alan Storm's comments in response to my answer regarding the with statement got me thinking. I've seldom found a reason to use this particular language feature, and had never given much thought to how it might cause trouble. Now, I'm curious as to how I might make effective use of with, while avoiding its pitfalls...

So my question is, where have you found the with statement useful?

+3  A: 

Visual Basic.NET has a similar With statement. One of the more common ways I use it is to quickly set a number of properties. Instead of:

someObject.Foo = ''
someObject.Bar = ''
someObject.Baz = ''

, I can write:

With someObject
    .Foo = ''
    .Bar = ''
    .Baz = ''
End With

This isn't just a matter of laziness. It also makes for much more readable code. And unlike JavaScript, it does not suffer from ambiguity, as you have to prefix everything affected by the statement with a . (dot). So, the following two are clearly distinct:

With someObject
    .Foo = ''
End With

vs.

With someObject
    Foo = ''
End With

The former is someObject.Foo; the latter is Foo in the scope outside someObject.

I find that JavaScript's lack of distinction makes it far less useful than Visual Basic's variant, as the risk of ambiguity is too high. Other than that, with is still a powerful idea that can make for better readability.

Sören Kuklau
True enough. Doesn't answer his question though. So it's off topic.
Allain Lalonde
This was running through my mind as well. *someone had to say it*. Why can't JavaScript just have the dot as well.
Carson Myers
+1  A: 

I think the obvious use is as a shortcut. If you're e.g. initializing an object you simply save typing a lot of "ObjectName." Kind of like lisp's "with-slots" which lets you write

(with-slots (foo bar) objectname
   "some code that accesses foo and bar"

which is the same as writing

"some code that accesses (slot-value objectname 'foo) and (slot-value objectname 'bar)""

It's more obvious why this is a shortcut then when your language allows "Objectname.foo" but still.

Corporal Touchy
great to see lisp code! I think "with" in javascript is obviously inspired by it's scheme roots as a language, but alas your getting downvoted for posting LISP on a javascript question.
Fire Crow
Upvoting on basic principle. 'with' is a phenomenally powerful construct. But most JS people don't understand closures, and write ridiculously complex Java class inheritance systems on top of JS--so how could they be aware of the metaprogramming potential that 'with' offers?
jared
+4  A: 

Having experience with Delphi, I would say that using with should be a last-resort size optimization, possibly performed by some kind of javascript minimizer algorithm with access to static code analysis to verify its safety.

The scoping problems you can get into with liberal use of the with statement can be a royal pain in the a** and I wouldn't want anyone to experience a debugging session to figure out what the he.. is going on in your code, only to find out that it captured an object member or the wrong local variable, instead of your global or outer scope variable which you intended.

The VB with statement is better, in that it needs the dots to disambiguate the scoping, but the Delphi with statement is a loaded gun with a hairtrigger, and it looks to me as though the javascript one is similar enough to warrant the same warning.

Lasse V. Karlsen
The javascript with statement is worse than the Delphi one. In Delphi, with performs just as fast (if not faster) than object.member notation. In javascript, with has to walk the scope to check for matching members, thus always making it slower than object.member notation.
Martijn
+16  A: 

You can define a small helper function to provide the benefits of with without the ambiguity:

var with_ = function (obj, func) { func (obj); };

with_ (object_name_here, function (_)
{
    _.a = "foo";
    _.b = "bar";
});
John Millikin
OMG, MY HEAD EXPLODED! _without_ the ambiguity? Gotta vote that up, man!
Jarrod Dixon
@Jarrod: what is so funny about this (http://is.gd/ktoZ)? Most everyone who uses this site is smarter than me, so forgive me if I am wrong, but this seems like bad information.
raven
But that's just longer and harder to understand way of doing: var _ = obj_name_here; _.a="foo"; _.b="bar;
Rene Saarsoo
Rene: With that, you will expose the "_" variable to the outer scope, resulting in potential bugs. It will also expose any temporary variables used in calculating object parameters.
John Millikin
You'll get more bugs from `with_` being a muddy doubled version of `(function(_){ _.a="foo"; })(object_here);` (the standard way to simulate c/java-style blocks). Use that instead.
mk
+1  A: 

I just really don't see how using the with is any more readable than just typing object.member. I don't think it's any less readable, but I don't think it's any more readable either.

Like lassevk said, I can definitely see how using with would be more error prone than just using the very explicit "object.member" syntax.

17 of 26
+3  A: 

Using with also makes your code slower in many implementation, as everything now gets wrapped in an extra scope for lookup. There's no legitimate reason for using with in JavaScript.

Svend
Premature optimization. Don't claim "slower" unless you crunched the numbers; any overhead is likely trivial on both modern and ancient js impls.
mk
I strongly disagree with your conclusion, based on what may not be an issue for developers other than you.
Dave Van den Eynde
+19  A: 

As my previous comments indicated, I don't think you can use with safely no matter how tempting it might be in any given situation. Since the issue isn't directly covered here, I'll repeat it. Consider the following code

user = {};
someFunctionThatDoesStuffToUser(user);
someOtherFunction(user);

with(user){
    name = 'Bob';
    age  = 20;
}

Without carefully investigating those function calls, there's no way to tell what the state of your program will be after this code runs. If user.name was already set, it will now be Bob. If it wasn't set, the global name will be initialized or changed to Bob and the user object will remain without a name property.

Bugs happen. If you use with you will eventually do this and increase the chances your program will fail. Worse, you may encounter working code that sets a global in the with block, either deliberately or through the author not knowing about this quirk of the construct. It's a lot like encountering fall through on a switch, you have no idea if the author intended this and there's no way to know if "fixing" the code will introduce a regression.

Modern programming languages are chocked full of features. Some features, after years of use, are discovered to be bad, and should be avoided. Javascript's with is one of them.

Alan Storm
This problem only surfaces when you are assigning values to attribute of the object. But what if you are using it only to read values? I contend that it's okay to use it in that case.
toby
The same problem applies to reading the values Toby. In the above code snippet you don't know if name is is set on the user object, so you wouldn't know if you were reading the global name, or the user name.
Alan Storm
With reading values there's a clear precedence rule: attributes on the object are checked before variables outside the scope. This isn't any different from variables scoping in functions. The real problem with assignment and 'with', as I understand it, lies in the fact that whether or not the attribute assignment occurs depends on whether the attribute exists on the current object in question, which is a runtime property and cannot be deduced easily by looking at the code.
toby
I think you may be right there Toby. The write problem is enough for me to shy away from the construct entirely.
Alan Storm
+18  A: 

Hardly seems worth it since you can do the following:

var o = incrediblyLongObjectNameThatNoOneWouldUse;
o.name = "Bob";
o.age = "50";
Allain Lalonde
This did not make any sense to me. Although I'm not an expert at JavaScript
WmasterJ
@WmasterJFor clarity, see this post: http://yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/
Dennis
A: 

I think the with-statement can come in handy when converting a template language into JavaScript. For example JST in base2, but I've seen it more often.

I agree one can program this without the with-statement. But because it doesn't give any problems it is a legitimate use.

doekman
+2  A: 

I think that the usefulness of with can be dependent on how well your code is written. For example, if you're writing code that appears like this:

var sHeader = object.data.header.toString();
var sContent = object.data.content.toString();
var sFooter = object.data.footer.toString();

then you could argue that with will improve the readability of the code by doing this:

var sHeader = null, sContent = null, sFooter = null;
with(object.data) {
    sHeader = header.toString();
    sContent = content.toString();
    sFooter = content.toString();
}

Conversely, it could be argued that you're violating the Law of Demeter, but, then again, maybe not. I digress =).

Above all else, know that Douglas Crockford recommends not using with. I urge you to check out his blog post regarding with and its alternatives here.

Tom
Thanks for the response, Tom. I've read Crockford's recommendation, and while it makes sense it only goes so far. I'm coming around to the idea - touched on indirectly by doekman - that the real power of with{} is in the way it can be used to manipulate scope...
Shog9
+120  A: 

Another use occurred to me today, so i searched the web excitedly and found an existing mention of it: Defining Variables inside Block Scope.

Background

JavaScript, in spite of its superficial resemblance to C and C++, does not scope variables to the block they are defined in:

var name = "Joe";
if ( true )
{
   var name = "Jack";
}
// name now contains "Jack"

Declaring a closure in a loop is a common task where this can lead to errors:

for (var i=0; i<3; ++i)
{
   var num = i;
   setTimeout(function() { alert(num); }, 10);
}

Because the for loop does not introduce a new scope, the same num - with a value of 2 - will be shared by all three functions.

A new scope: let and with

With the introduction of the let statement in JavaScript 1.7, it becomes easy to introduce a new scope when necessary to avoid these problems:

for (var i=0; i<3; ++i)
{
   // variables introduced in this statement 
   // are scoped to the block following it.
   let (num = i) 
   {
      setTimeout(function() { alert(num); }, 10);
   }
}

But until other browsers implement it, this will remain limited to Mozilla-targeted code. However, we can easily simulate this behavior using with:

for (var i=0; i<3; ++i)
{
   // object members introduced in this statement 
   // are scoped to the block following it.
   with ({num: i})
   {
      setTimeout(function() { alert(num); }, 10);
   }
}

The loop now works as intended, creating three separate variables with values from 0 to 2. Note that variables declared within the block are not scoped to it - this is identical to the behavior of let, but unlike the behavior of blocks in C++ (in C, variables must be declared at the start of a block, so in a way it is similar).

Shog9
Never thought of using with with a literal, seems legit.
Matt Kantor
This is really really dead on. I've never thought of playing with JavaScript's scope this way. Totally expanded new areas to my coding. I wish I could upvote 10 times!
kizzx2
This is incredibly clever and solves a real problem!
erikkallen
+1... wish I could award more!
jldupont
For those still opposed, one could always use a closure:[code]for (var i = 0; i < 3; ++i) { setTimeout ((function () { var num = i; return function () { alert (num); }; }) (), 10);}[/code]
trinithis
+1 that is so much more readable than a closure
Chad
+1 for a point I hadn't considered. Wish I could give an extra +1 for `<3` in your code.
eyelidlessness
This is a great idea, but doesn't always work on Chrome. See: http://jsbin.com/iyopu/edit
Max Shawabkeh
Actually, the problem linked above appears on most non-Mozilla browsers (Chrome, Safari, Opera, IE).
Max Shawabkeh
@Max: yeah, Firefox's JavaScript is converting the declaration in the second example into an expression (see: https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Functions_and_function_scope#section_14 - *"A function declaration ceases to be one when it either..."*). Apparently, other JS engines don't properly capture the context when this occurs. Since it's an expression and not a declaration that's needed, the syntax in the first example should be used anyway.
Shog9
The point is that this post might suggest that a `with({...}) {...}` is a general-purpose replacement for the anonymous closure pattern used to hide local vars. However, an anonymous closure properly captures the context on all browsers, unlike `with`.
Max Shawabkeh
Uh, @Max? [An anonymous closure hides the definition completely](http://jsbin.com/iyopu/4/edit). Whichever technique you use (`with` or an anonymous function), you'll have to make sure that the result of your function *expression* is available to the outer scope... assuming that's what you really wanted.
Shog9
True, but with `with` the function declaration doesn't work even if it's called inside the scope: http://jsbin.com/iyopu/5/edit
Max Shawabkeh
@Max: see the last paragraph in this answer: `with` and `let` scope only those symbols defined in their argument list; JS doesn't have block scope, apart from that provided by function declarations. Chrome, etc. fail to respect the scope introduced by `with` when converting a function declaration into a function expression; once that error is introduced, it doesn't matter where the function is *called* from.
Shog9
In my last example, "x" is in the argument list of both the function expression closure and the `with` statement. But in one the scope is respected and properly nested, and in the other it isn't. I understand *why* the problem occurs. I'm just saying that it should be clarified that a `with` does not introduce a proper scope and can not completely replace the anonymous closure pattern.
Max Shawabkeh
@Max: And again, that's a bug in Chrome that occurs when you rely on the implicit conversion of a declaration to an expression (explicit expressions do work). That said, of course `with` is not a replacement for function closures. The means by which it introduces scope is *considerably* more limited, and of course it doesn't offer any of the other features of functions. On the other hand, `with` doesn't mask an existing context object (`this`) and offers a simpler syntax. So for simple scope needs such as those I describe above, it could be useful; but as a replacement for functions, hardly!
Shog9
@Max you can make that work by using the function expression instead http://jsbin.com/iyopu/7/edit
Jiaaro
*let* statement support in IE would really save my bacon right now, I'm struggling with my conscience on whether or not to use *with* instead. The real problem is that even with a *with* as a *let*, extra care still has to be taken because of inherited properties of an object on the prototype chain. For example, `var toString = function () { return "Hello"; }; with ({"test":1}) { console.log(toString()); };`. In the scope of the *with* statement, *toString()* is an inherited property of *Object*, so the explicitly defined function isn't called. Still a great answer, though :-)
Andy E
Pure brilliance!
bjornl
+9  A: 

Yes, yes and yes. There is a very legitimate use. Watch:

with (document.getElementById("blah").style) {
    background = "black";
    color = "blue";
    border = "1px solid green";
}

Basically any other DOM or CSS hooks are fantastic uses of with. It's not like "CloneNode" will be undefined and go back to the global scope unless you went out of your way and decided to make it possible.

Crockford's speed complaint is that a new context is created by with. Contexts are generally expensive. I agree. But if you just created a div and don't have some framework on hand for setting your css and need to set up 15 or so CSS properties by hand, then creating a context will probably be cheaper then variable creation and 15 dereferences:

var element = document.createElement("div"),
    elementStyle = element.style;

elementStyle.fontWeight = "bold";
elementStyle.fontSize = "1.5em";
elementStyle.color = "#55d";
elementStyle.marginLeft = "2px";

etc...

+1 as I also think there are plenty of legitimate uses of `with`. However, in this particular case you could just do: `element.style.cssText="background: black ; color: blue ; border: 1px solid green"`
GetFree
+21  A: 

I have been using the with statement as a simple form of scoped import. Let's say you have a markup builder of some sort. Rather than writing:

markupbuilder.div(
  markupbuilder.p('Hi! I am a paragraph!',
    markupbuilder.span('I am a span inside a paragraph')
  )
)

You could instead write:

with(markupbuilder){
  div(
    p('Hi! I am a paragraph!',
      span('I am a span inside a paragraph')
    )
  )
}

For this use case, I am not doing any assignment, so I don't have the ambiguity problem associated with that.

toby
That's pretty slick!
Shog9
+1 great use...
Anurag
+2  A: 

I don't ever use with, don't see a reason to, and don't recommend it.

The problem with with is that it prevents numerous lexical optimizations an ECMAScript implementation can perform. Given the rise of fast JIT-based engines, this issue will probably become even more important in the near future.

It might look like with allows for cleaner constructs (when, say, introducing a new scope instead of a common anonymous function wrapper or replacing verbose aliasing), but it's really not worth it. Besides a decreased performance, there's always a danger of assigning to a property of a wrong object (when property is not found on an object in injected scope) and perhaps erroneously introducing global variables. IIRC, latter issue is the one that motivated Crockford to recommend to avoid with.

kangax
The performance bogeyman gets trotted out frequently, almost as often as the globals thing... Always strikes me as odd, given that it's *JavaScript* we're talking about. You'd assume that the performance hit is *truly dramatic* to warrant that much attention, but... If you have any hard numbers on the cost of `with(){}` constructs like those given in other answers here, in modern browsers, I'd love to see them!
Shog9
Why is it odd in context of Javascript? :) And yes, it is dramatic. Think about it - an implementation needs to evaluate an expression in parenthesis, convert it to object, insert it into the front of the current scope chain, evaluate statement inside the block, then restore scope chain back to normal. That's a *lot* of work. Much more than a simple property lookup that can be turned into a highly-optimized low level code. Here's a very simple benchmark I just made (let me know if you find any mistakes) demonstrating the difference - https://gist.github.com/c36ea485926806020024
kangax
@kangax: I come from a C++ background, where it's sort of traditional for many programmers to obsess about small efficiencies in their code, even when they don't actually have a noticeable effect on the performance of the larger routine or program. It seems odd to me in the context of JavaScript, where such a large part of a routine's performance can depend on the VM implementation. I've seen a few instances where JS programmers will avoid, say, an anonymous function due to concerns over the setup cost, but this seems to be the exception not the rule, reserved for very sensitive areas of code.
Shog9
That said, you're absolutely correct with regard to the cost of `with(){}`: setting up a new scope with `with` is hugely expensive on every browser I tested. You'd want to avoid this in any code called very frequently. In addition, Chrome exhibited a dramatic hit for any code executing within a `with()` scope. Interestingly, IE had the best performance characteristics for code within `with()` blocks: factoring out the setup cost, `with()` provides the fastest means of member access in IE6 and IE8 VMs (though these VMs are the slowest overall). Good stuff, thanks...
Shog9
FWIW: here's the same set of tests with setup costs factored out: http://jsbin.com/imidu/edit Variable access for `with()` is almost an order of magnitude slower in Chrome, and over twice as fast in IE...!
Shog9
@kangax - Isn't that a bit short-sighted of you? @Shog9 - Thankfully, we're talking about a cleaner and more flexible language, javascript, rather than an ugly "high performance" language, C++. Now, before you try any retorts, know that I've used C++ for a while, and I'm not exactly novice.
Christian Sciberras
+2  A: 

The with statement can be used to decrease the code size or for private class members, example:

// demo class framework
var Class= function(name, o) {
   var c=function(){};
   if( o.hasOwnProperty("constructor") ) {
       c= o.constructor;
   }
   delete o["constructor"];
   delete o["prototype"];
   c.prototype= {};
   for( var k in o ) c.prototype[k]= o[k];
   c.scope= Class.scope;
   c.scope.Class= c;
   c.Name= name;
   return c;
}
Class.newScope= function() {
    Class.scope= {};
    Class.scope.Scope= Class.scope;
    return Class.scope;
}

// create a new class
with( Class.newScope() ) {
   window.Foo= Class("Foo",{
      test: function() {
          alert( Class.Name );
      }
   });
}
(new Foo()).test();

The with-statement is very usefull if you want to modify the scope, what is necessary for having your own global scope that you can manipulate at runtime. You can put constants on it or certain helper functions often used like e.g. "toUpper", "toLower" or "isNumber", "clipNumber" aso..

About the bad performance I read that often: Scoping a function won't have any impact on the performance, in fact in my FF a scoped function runs faster then an unscoped:

var o={x: 5},r, fnRAW= function(a,b){ return a*b; }, fnScoped, s, e, i;
with( o ) {
    fnScoped= function(a,b){ return a*b; };
}

s= Date.now();
r= 0;
for( i=0; i < 1000000; i++ ) {
    r+= fnRAW(i,i);
}
e= Date.now();
console.log( (e-s)+"ms" );

s= Date.now();
r= 0;
for( i=0; i < 1000000; i++ ) {
    r+= fnScoped(i,i);
}
e= Date.now();
console.log( (e-s)+"ms" );

So in the above mentioned way used the with-statement has no negative effect on performance, but a good one as it deceases the code size, what impacts the memory usage on mobile devices.

alex
A: 

It's good for putting code that runs in a relatively complicated environment into a container: I use it to make a local binding for "window" and such to run code meant for a web browser.

Aredridel
+1  A: 

I think the object literal use is interesting, like a drop-in replacement for using a closure

for(var i = nodes.length; i--;)
{
       // info is namespaced in a closure the click handler can access!
       (function(info)
       {           
            nodes[i].onclick = function(){ showStuff(info) };
       })(data[i]);
}

or the with statement equivilent of a closure

for(var i = nodes.length; i--;)
{
       // info is namespaced in a closure the click handler can access!
       with({info: data[i]})
       {           
            nodes[i].onclick = function(){ showStuff(info) };
       }        
}

I think the real risk is accidently minipulating variables that are not part of the with statement, which is why I like the object literal being passed into with, you can see exactly what it will be in the added context in the code.

Fire Crow
+1  A: 

Using "with" can make your code more dry.

Consider the following code:

var photo = document.getElementById('photo');
photo.style.position = 'absolute';
photo.style.left = '10px';
photo.style.top = '10px';

You can dry it to the following:

with(document.getElementById('photo').style) {
  position = 'absolute';
  left = '10px';
  top = '10px';
}

I guess it depends whether you have a preference for legibility or expressiveness.

The first example is more legible and probably recommended for most code. But most code is pretty tame anyway. The second one is a bit more obscure but uses the expressive nature of the language to cut down on code size and superfluous variables.

I imagine people who like Java or C# would choose the first way (object.member) and those who prefer Ruby or Python would choose the latter.

Jonah
Whoops I didn't realize someone already posted basically this same example a year ago.Performance issues aside, "with" makes for nice DRY code at the expense of being a bit more difficult to read.I think that for collaborations with other developers or most production code, it's good practice to avoid the "with" keyword. But if you are working with expert-level programmers and understand how to avoid potential inefficiencies then by all means go to town with "with."
Jonah
+1  A: 

I created a "merge" function which eliminates some of this ambiguity with the with statement:

if (typeof Object.merge !== 'function') {
    Object.merge = function (o1, o2) { // Function to merge all of the properties from one object into another
        for(var i in o2) { o1[i] = o2[i]; }
        return o1;
    };
}

I can use it similarly to with, but I can know it won't affect any scope which I don't intend for it to affect.

Usage:

var eDiv = document.createElement("div");
var eHeader = Object.merge(eDiv.cloneNode(false), {className: "header", onclick: function(){ alert("Click!"); }});
function NewObj() {
    Object.merge(this, {size: 4096, initDate: new Date()});
}
palswim
+1  A: 

You can use with to introduce the contents of an object as local variables to a block, like it's being done with this small template engine.

Jordão
+1  A: 

You got to see the validation of a form in javascript at W3schools http://www.w3schools.com/js/js_form_validation.asp where the object form is "scanned" through to find an input with name 'email'

But i've modified it to get from ANY form all the fields validate as not empty, regardless of the name or quantity of field in a form. Well i've tested only text-fields.

But the with() made things simpler. Here's the code:

function validate_required(field)
{
with (field)
  {
  if (value==null||value=="")
    {
    alert('All fields are mandtory');return false;
    }
  else
    {
    return true;
    }
  }
}

function validate_form(thisform)
{
with (thisform)
  {
    for(fiie in elements){
        if (validate_required(elements[fiie])==false){
            elements[fiie].focus();
            elements[fiie].style.border='1px solid red';
            return false;
        } else {elements[fiie].style.border='1px solid #7F9DB9';}
    }

  }
  return false;
}
Elvis Salaris
+5  A: 

I actually found the with statement to be incredibly useful recently. This technique never really occurred to me until I started my current project - a command line console written in JavaScript. I was trying to emulate the Firebug/WebKit console APIs where special commands can be entered into the console but they don't override any variables in the global scope. I thought of this when trying to overcome a problem I mentioned in the comments to Shog9's excellent answer.

To achieve this effect, I used two with statements to "layer" a scope behind the global scope:

with (consoleCommands) {
    with (window) {
        eval(expression); 
    }
}

The great thing about this technique is that, aside from the performance disadvantages, it doesn't suffer the usual fears of the with statement, because we're evaluating in the global scope anyway - there's no danger of variables outside our pseudo-scope from being modified.

I was inspired to post this answer when, to my surprise, I managed to find the same technique used elsewhere - the Chromium source code!

InjectedScript._evaluateOn = function(evalFunction, object, expression) {
    InjectedScript._ensureCommandLineAPIInstalled();
    // Surround the expression in with statements to inject our command line API so that
    // the window object properties still take more precedent than our API functions.
    expression = "with (window._inspectorCommandLineAPI) { with (window) { " + expression + " } }";
    return evalFunction.call(object, expression);
}

EDIT: Just checked the Firebug source, they chain 4 with statements together for even more layers. Crazy!

const evalScript = "with (__win__.__scope__.vars) { with (__win__.__scope__.api) { with (__win__.__scope__.userVars) { with (__win__) {" +
    "try {" +
        "__win__.__scope__.callback(eval(__win__.__scope__.expr));" +
    "} catch (exc) {" +
        "__win__.__scope__.callback(exc, true);" +
    "}" +
"}}}}";
Andy E