Avoid Javascript’s ‘with’ keyword

Javascript is a fantastic language — in fact, it’s become the language that I do most of my programming in nowadays. It’s flexible, fast, and powerful. Unfortunately, though, it suffers from a few flaws, which, although not critical, can be frustrating. One of the potentially most confusing features is the with keyword, which promises a lot, but can really just make life difficult.

The with keyword might appear to be harmless enough: it allows you to avoid typing long references; instead of
[sourcecode language=’javascript’]ah.woom.ba.weh.lyric = ‘In the jungle’;[/sourcecode]
we can type
[sourcecode language=’javascript’]with (ah.woom.ba.weh) {
lyric = ‘In the jungle’;
}[/sourcecode]

But what happens if we happen to have a variable in scope named lyric? In the example below, which lyric should be modified?
[sourcecode language=’javascript’]var lyric = ‘In the jungle’;
with (ah.woom.ba.weh) {
lyric = ‘The mighty jungle’;
}[/sourcecode]
The simplest way to deal with this issue is to use a variable:
[sourcecode language=’javascript’]var a = ah.woom.ba.weh;
a.lyric = ‘The mighty jungle’;[/sourcecode]
Now there is no ambiguity.

Based on a post by Douglas Crockford at the YUI Blog.

Comments

5 responses to “Avoid Javascript’s ‘with’ keyword”

  1. Louigi Verona Avatar

    Are you using jQuery? I found it to be very fast and much easier syntax than JavaScript.

    1. Barry van Oudtshoorn Avatar

      I actually use MooTools by preference — it provides many of the same benefits as jQuery, and the syntax is similar.

  2. Martin Avatar
    Martin

    Think you might not have grasped the main benefit of with … it’s for setting lots of properties, e.g.

    var oMyElement = document.createElement( 'DIV' );
    with ( oMyElement )
    {
    id = 'Fred';
    with ( style )
    {
    width = '100px';
    height = '100px';
    display = 'inline';
    }
    }

    1. Barry van Oudtshoorn Avatar

      Yes, you’re right that with can be very useful — but to my mind, the danger of not knowing exactly what you’re changing outweighs the potential benefit. Personally, I would use the MooTools method of setting lots of properties…

      var oMyElement = new Element('div', {
      id: 'Fred',
      styles: {
      width: '100px',
      height: '100px',
      display: 'inline'
      }
      });

      …which means that I can get away without using with. 🙂

  3. Rami Avatar
    Rami

    According to what you are saying
    the main issue is to avoid ambiguity -and this is a good concept)

    think of this snippets

    var if; //why this does not work

    meaning you should be careful with naming
    et voila

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Your post must include a link to this post.

How does this work?
Write a response on your own website and include a link to this post. Then submit your response’s URL here. Your response may appear here after moderation. To update or remove it, edit or delete your original post and submit the same URL again. Learn more about Webmentions.