Search code examples
javascriptlanguage-featureswith-statementletecmascript-6

What is the difference between a let block statement and an equivalent with statement?


OBSOLETE

The block version of the let statement was dropped from ES6 before it was finalized, and it has been removed from the browsers that supported it. This question is now only of historic interest.

Is there any difference between using an ECMAScript 6 let block statement and using a with statement with an equivalent object literal?

using let statement

var x = 10;
let (x = x * 10,
     y = x + 5) {
    console.log("x is " + x + ", y is " + y);
}

using with statement

var x = 10;
with ({x: x * 10,
       y: x + 5}) {
    console.log("x is " + x + ", y is " + y);
    // writes "x is 100, y is 15"
}

Solution

  • The best I can come up with is that with will also leak any property of the Object prototype:

    with ({x: 10}) {
        hasOwnProperty = 3;
        console.log(hasOwnProperty);  // 3
    }
    console.log(hasOwnProperty);  // [native code]; this is window.hasOwnProperty
    

    Unlikely to be a problem in practice, but still a potential gotcha.

    I also suspect that with is slightly slower than lexicals, since it adds another namespace that has to be searched.

    Honestly, I'd just avoid both constructs; with-style implicit property access doesn't sit well with me, and if I really need a tight scope like that, a bare block with let expressions inside reads less awkwardly than a let block.