with

with (expression)
  statement

expression

. .

statement

. ({ ... }) .

. '' ' ' . .

foo; //   
foo.bar; // bar  

. .

const foo = { bar: 1 };
console.log(foo.bar);
// foo    .
// bar foo  .

, .

console.log(globalThis.Math === Math); // true

with . (in ) .

with this .

with ([1, 2, 3]) {
  console.log(toString()); // 1,2,3
}

@@unscopables , ( ) . Symbol.unscopables .

with . with .

• : with . with . , .

• : with JavaScript , . .

  js

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

  f with x . x o.x f f . x . . .

• : with . . .

  js

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

  ECMAScript 5 f([1, 2, 3], obj) , with values obj . ECMAScript 2015 Array.prototype values ( values ). with values [1, 2, 3].values , .

  values Array.prototype[@@unscopables] values values . values , .

with

with Math . with PI cos sin . JavaScript Math .

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

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

with

with . with .

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);
}

IIFE with

IIFE .

const objectHavingAnEspeciallyLengthyName = { foo: true, bar: false };

if (((o) => o.foo && !o.bar)(objectHavingAnEspeciallyLengthyName)) {
  //   .
}

with

with . .

const namespace = new Proxy(
  {},
  {
    has(target, key) {
      // `console`      .
      if (key in globalThis) {
        return false;
      }
      //    .
      return true;
    },
    get(target, key) {
      return key;
    },
  },
);

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

• block
• Strict mode
• Symbol.unscopables
• Array.prototype[@@unscopables]