JavaScript’s with statement and why it’s deprecated

This post explains how the with statement works in JavaScript and why its use is discouraged.

Syntax and semantics

Syntax:

    with (object)
        statement

introduces the properties of object as local variables in statement. Example (the braces are optional for single statements, but it is recommended to add them):

    > with({ first: "John" }) { console.log("Hello "+first); }
    Hello John

Its intended use is to avoid redundancy when accessing an object several times.

    foo.bar.baz.bla   = 123;
    foo.bar.baz.yadda = "abc";

with turns this into:

    with(foo.bar.baz) {
        bla   = 123;
        yadda = "abc";
    }

There is one similar case in JavaScript where the properties of an object are turned into variables and that is the global object window. All of its properties are global variables and vice versa. While new global variables are automatically added to window, the with statement works differently: variables that are declared inside it are not added to its argument, but to the surrounding function, where they still exist after leaving it.

    > with({}) { var x = "abc"; }
    > x
    'abc'

The with statement is deprecated

The use of the with statement is generally discouraged. It is forbidden in strict mode:

    > function foo() { "use strict"; with({}); }
    SyntaxError: strict mode code may not contain 'with' statements

Best practice: Don’t use a with statement.

    with(foo.bar.baz) {
        console.log("Hello "+first+" "+last);
    }

Do use a temporary variable with a short name.

    var b = foo.bar.baz;
    console.log("Hello "+b.first+" "+b.last);

If you don’t want to expose the temporary variable b to the current scope, you can use an IIFE:

    (function() {
        var b = foo.bar.baz;
        console.log("Hello "+b.first+" "+b.last);
    }());

You also have the option of making the object that you want to access a parameter of the IIFE:

    (function(b) {
        console.log("Hello "+b.first+" "+b.last);
    }(foo.bar.baz));

The rationale of the deprecation

To understand why with is deprecated, look at the following example and notice how the function’s argument completely changes how it works.

    function foo(arg) {
        with(arg) {
            console.log("arg: "+arg)
        }
    }

Interaction:

    > foo("Hello");
    arg: Hello  // parameter arg
    
    > foo({});
    arg: [object Object]  // parameter arg
    
    > foo({ arg: "Hello" });
    arg: Hello  // property arg.arg

There are thus two problems that the with statement causes:

• Performance: one cannot optimize the access to arg (or to any other variable used inside with), because one cannot predict whether arg will refer to a real variable or to a property inside the with argument. That can change with each call.
• Security: you cannot determine what an identifier refers to by looking at its syntactic surroundings (its lexical environment). According to Brendan Eich that was the actual reason why with was deprecated, not performance considerations. Quoting a tweet of his:

  with violates lexical scope, making program analysis (e.g. for security) hard to infeasible.

---