What is wrong with WITH statement in JavaScript?

Question

I seem to remember there is a problem with WITH. I don’t miss it; I prefer each line of my code to stand on its own.

I started wondering about this when I learned (at SO) that people consider chaining one of their favorite features of jQuery. JavaScript’s WITH and jQuery’s chaining is, basically, the same feature, right?

Answer 1

With and chaining aren't quite the same. With affects scope, while chaining doesn't. Consider:

a.b.c = foo;

or:

with(a.b) { c = foo; }

In the second case, you've got no idea if c exists outside the with block, so if it's possible that you're just clobbering something another part of the program is relying on.

Answer 2

No, they aren't the same thing...

With is a shorthand to reference a class's members without the need to fully qualify their names.

with o 
{
   x = y;   // where x is a member of o. But how can you tell for sure?
}

Read what Douglas Crockford has to say about With. He encourages avoiding it--says its error prone and ambiguous. I agree with him.

jQuery chaining is a way to implement a fluent interface that allows you to pipe the result fro one method directly into another method. That is the output of a given method serves as input into the next. jQuery chaining can indeed look like with if you use lots of whitespace. The example below is from John Resig shows this.

jQuery("div").hide("slow", function(){
  jQuery(this)
    .addClass("done")
    .find("span")
      .addClass("done")
    .end()
    .show("slow", function(){
      jQuery(this).removeClass("done");
    });
});

Read about jQuery chaining here and here

Answer 3

You should read with Statement Considered Harmful for a good explanation as to why you should avoid with.

No, with is not the same as chaining:

JavaScript’s with statement was intended to provide a shorthand for writing recurring accesses to objects.

Answer 4

Or you can reference from Mozilla here get more information.

The following is a fragment of the article

'with' makes it hard for a human reader or JavaScript compiler to decide whether an unqualified name will be found along the scope chain, and if so, in which object. So given this example:

  function f(x, o) {
    with (o)
      print(x);
  }

only when f is called is x either found or not, and if found, either in o or (if no such property exists) in f's activation object, where x names the first formal argument. If you forget to define x in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected results.

Answer 5

fwiw, I strongly disagree with crockford and the whole anti-with movement. Yes, I enjoy flogging deceased equestrians too.

The point where I agree with the anti's is that with should never be used as a crutch for object creation/assignment which in effect means never used directly:

BAD

with(a.b)
{
  c = x;
}

GOOD

with(a)
{
  b.c = x;
}

I believe the second form actually increases readability because it both indicates a block (the with itself) and removes whitespace (less text = less brainache) without recourse to redundant declarations/assignments. My argument is that with is only dangerous when you don't know what you're doing, and my follow on from that is if you don't know what you're doing you shouldn't be doing it. As I said, I realise I'm against the grain here.

Answer 6

I think the question has been answered above, just wanted to add my two cents on the topic of 'with.' The example almost all of you bring up are ambigious class and variable names, which with with or without with are hard to maintain and understand. If you name your variables, classes, objects with some kind of meaning with can be golden.

var car = {
           wheels: {radius: 5, rim: 'gold', shape: 'circle'},
           body: {color: 'black', windows: 'tinted'}
           };

and Now:

with (car){
    wheels.shape = square;
    body.color = blue;
}

Point being, with can be powerful and save a lot of time for the programmer after you. It works well only if you use it correctly and already have a habit of verbose naming of variables and sufficient commenting. Furthermore, someone said that if you do:

with(a){
    x = 3;
}

that somehow a variable that is not a member of the class will somehow gets overridden. Correct me if I am wrong but if there is a global variable x and a property a.x, in the with block, only the a.x get's overridden since that is the current scope.