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.

To respond on your own website, enter the URL of your response which should contain a link to this post’s permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post’s URL again. (Find out more about Webmentions.)