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

Syntax and semantics

with (object) statement

object

statement

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

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

with

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

window

window

with

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

The with statement is deprecated

with

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

with

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

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

b

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

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

The rationale of the deprecation

with

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

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

with

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.

(or to any other variable used inside ), because one cannot predict whether will refer to a real variable or to a property inside the 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.

Syntax:introduces the properties ofas local variables in. Example (the braces are optional for single statements, but it is recommended to add them):Its intended use is to avoid redundancy when accessing an object several times.turns this into:There is one similar case in JavaScript where the properties of an object are turned into variables and that is the global object. All of its properties are global variables and vice versa. While new global variables are automatically added to, thestatement 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.The use of thestatement is generally discouraged. It is forbidden in strict mode:Don’t use astatement.Do use a temporary variable with a short name.If you don’t want to expose the temporary variableto the current scope, you can use an IIFE You also have the option of making the object that you want to access a parameter of the IIFE:To understand whyis deprecated, look at the following example and notice how the function’s argument completely changes how it works.Interaction:There are thus two problems that thestatement causes: