with Keyword

with Keyword

Warning: Use of the with statement is not recommended, as it may be the source of confusing bugs and compatibility issues. See the "Ambiguity Contra" paragraph in the "Description" section below for details.

The with statement extends the scope chain for a statement.

Syntax

with (expression)
  statement

Adds the given expression to the scope chain used when evaluating the statement. The parentheses around the expression are required.

Any statement. To execute multiple statements, use a block statement ({ ... }) to group those statements.

Description

JavaScript looks up an unqualified name by searching a scope chain associated with the execution context of the script or function containing that unqualified name. The 'with' statement adds the given object to the head of this scope chain during the evaluation of its statement body. If an unqualified name used in the body matches a property in the scope chain, then the name is bound to the property and the object containing the property. Otherwise a ReferenceError is thrown.

Note: Using with is not recommended, and is forbidden in strict mode. The recommended alternative is to assign the object whose properties you want to access to a temporary variable.

Performance pro & contra

Ambiguity contra

function f(x, o) {
  with (o) {
    console.log(x);
  }
}

Only when f is called can x be determined as found or not - and if found, whether as a property of o, or, if no such property exists, as f's first formal argument. If you forget to define x in the object you pass as the second argument, you won't get an error - instead you'll just get unexpected results. (And it's also unclear what the actual intent of such code would be).

Contra: Code using with may not be forward compatible, especially when used with something other than a plain object. Consider this example:

function f(foo, values) {
  with (foo) {
    console.log(values);
  }
}

If you call f([1,2,3], obj) in an ECMAScript 5 environment, then the values reference inside the with statement will resolve to obj. However, ECMAScript 2015 introduces a values property on Array.prototype (so that it will be available on every array). So, in a JavaScript environment that supports ECMAScript 2015, the values reference inside the with statement could resolve to [1,2,3].values. However, in this particular example, Array.prototype has been defined with values in its Symbol.unscopables object. If it were not, one can see how this would be a difficult issue to debug.

Examples

Using with

let a, x, y;
const r = 10;

with (Math) {
  a = PI * r * r;
  x = r * cos(PI);
  y = r * sin(PI / 2);
}

Avoiding with by destructuring properties into the current scope

let a, x, y;
const r = 10;

{
  const { PI, cos, sin } = Math;
  a = PI * r * r;
  x = r * cos(PI);
  y = r * sin(PI / 2);
}

Using with with a proxy to create a dynamic namespace

const namespace = new Proxy({}, {
  has(target, key) {
    // Avoid trapping global properties like `console`
    if (key in globalThis) return false;
    // Trap all property lookups
    return true;
  },
  get(target, key) {
    return key;
  },
});

with (namespace) {
  console.log(a, b, c); // logs "a b c"
}