barryvan

Avoid Javascript’s ‘with’ keyword

Written by

Barry van Oudtshoorn

in

,

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
    Louigi Verona

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

    Reply
    1. Barry van Oudtshoorn Avatar
      Barry van Oudtshoorn

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

      Reply
  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';
    }
    }

    Reply
    1. Barry van Oudtshoorn Avatar
      Barry van Oudtshoorn

      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. 🙂

      Reply
  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

    Reply

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.

More posts