Why the JavaScript with Statement Is a Bad Idea: Performance Pitfalls and Hidden Bugs

Basic Description

The with statement sets the scope of a block of code to a specific object, allowing property access without repeatedly referencing the object. Its basic syntax is with (expression) statement;.

with (location) {
    var qs = search.substring(1);
    var hostName = hostname;
    var url = href;
}

Drawbacks of with

Although it can simplify code, the with keyword is strongly discouraged because it introduces performance problems and makes code semantics unclear, which hampers debugging.

Performance Issues

Two benchmark functions compare a loop that accesses an object directly versus one that uses with. The direct version runs in about 0.85 ms, while the with version takes around 84 ms, a dramatic slowdown.

function func() {
    console.time("func");
    var obj = {a: [1,2,3]};
    for (var i = 0; i < 100000; i++) {
        var v = obj.a[0];
    }
    console.timeEnd("func"); // 0.847ms
}

function funcWith() {
    console.time("funcWith");
    var obj = {a: [1,2,3]};
    var obj2 = {x: 2};
    with (obj2) {
        console.log(x);
        for (var i = 0; i < 100000; i++) {
            var v = obj.a[0];
        }
    }
    console.timeEnd("funcWith"); // 84.808ms
}
func();
funcWith();

The slowdown occurs because the JavaScript engine cannot optimize code that contains with. The engine loses the ability to perform static analysis and therefore cannot generate efficient bytecode or apply minification.

Unclear Semantics and Debugging

Using with obscures which object a variable belongs to, leading to bugs. For example, assigning to a inside a with block may create a global variable if the target object lacks that property.

function foo(obj) {
    with (obj) {
        a = 2; // modifies obj.a if it exists, otherwise creates global a
    }
}
var o1 = {a: 3};
var o2 = {b: 3};
foo(o1); // o1.a becomes 2
foo(o2); // creates global a = 2
console.log(o1.a); // 2
console.log(o2.a); // undefined
console.log(a);    // 2 (global)

Extended Analysis

Further examples combine with with this and variable hoisting, showing how property look‑ups are resolved and why unexpected values like undefined appear.

var obj = {
    x: 10,
    foo: function() {
        with (this) {
            var x = 20;
            var y = 30;
            console.log(y); // 30
        }
    }
};
obj.foo();
console.log(obj.x); // 20
console.log(obj.y); // undefined

Another nested example demonstrates how inner functions inherit the with scope and how call affects this binding.

({
    x: 10,
    foo: function() {
        function bar() {
            console.log(x); // 20 (from with block)
            console.log(y); // 30 (local)
            console.log(this.x); // 10 (original object)
        }
        with (this) {
            var x = 20;
            var y = 30;
            bar.call(this);
        }
    }
}).foo();

Conclusion

The with statement may appear convenient, but it severely harms performance, creates ambiguous scope, and introduces hard‑to‑track bugs. Modern JavaScript development should avoid it entirely and rely on explicit object references for clear, maintainable code.