Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 535371 of with

  • Revision slug: Web/JavaScript/Reference/Statements/with
  • Revision title: with
  • Revision id: 535371
  • Created:
  • Creator: Havvy
  • Is current revision? No
  • Comment

Revision Content

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

Summary

Extends the scope chain for a statement.

Statement
Implemented in JavaScript 1.0
ECMAScript Edition ECMA-262

Syntax

with (object) {
  statement
}

Parameters

object
Adds the given object to the scope chain used when evaluating the statement. The parentheses around object are required.
statement
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.

Using with is not recommended, and is forbidden in ECMAScript 5 strict mode. The recommended alternative is to assign the object whose properties you want to access to a temporary variable.
(On a historical note, Firefox 1.5 used to generate a warning when the 'with' statement was used: "deprecated with statement usage". This has been removed in Firefox 1.5.0.1 ({{Bug(322430)}}).)

Performance Pro & Con

  • Pro: 'with' can help reduce file size by reducing the need to repeat a lengthy object reference without performance penalty. The scope chain change required by 'with' is not computationally expensive. Use of 'with' will relieve the interpreter of parsing repeated object references. Note, however, that in many cases this benefit can be achieved by using a temporary variable to store a reference to the desired object.
  • Con: 'with' forces the specified object to be searched first for all name lookups. Therefore all identifiers that aren't members of the specified object will be found more slowly in a 'with' block. Where performance is important, 'with' should only be used to encompass code blocks that access members of the specified object.

Ambiguity Con

  • Con: 'with' makes it hard for a human reader or JavaScript compiler to decide whether an unqualified name will be found along the scope chain, and if so, in which object. So given this example:
    function f(x, o) {
      with (o) 
        print(x);
    }

    only when f is called is x either found or not, and if found, either in o or (if no such property exists) in f's activation object, where x names the first formal argument. If you forget to define x in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected results.

  • Con: Code using with may not be forward compatible, especially when used with something else 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 6 introduces a values property on Array.prototype (so that it will be available on every array). So, in a JavaScript environment that supports ECMAScript 6, the values reference inside the with statement will resolve to [1,2,3].values.

Examples

Example: Using with

The following with statement specifies that the Math object is the default object. The statements following the with statement refer to the PI property and the cos and sin methods, without specifying an object. JavaScript assumes the Math object for these references.

var a, x, y;
var r = 10;

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

Revision Source

<div class="warning">
 Use of the <code>with</code> statement is not recommended, as it may be the source of confusing bugs and compatibility issues. See the "Ambiguity Con" paragraph in the "Description" section below for details.</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>Extends the scope chain for a statement.</p>
<table class="standard-table" height="84" width="287">
 <tbody>
  <tr>
   <td class="header" colspan="2">Statement</td>
  </tr>
  <tr>
   <td>Implemented in</td>
   <td>JavaScript 1.0</td>
  </tr>
  <tr>
   <td>ECMAScript Edition</td>
   <td>ECMA-262</td>
  </tr>
 </tbody>
</table>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
with (<em>object</em>) {
  <em>statement</em>
}
</pre>
<h3 id="Parameters" name="Parameters">Parameters</h3>
<dl>
 <dt>
  <code>object</code></dt>
 <dd>
  Adds the given object to the scope chain used when evaluating the statement. The parentheses around object are required.</dd>
 <dt>
  <code>statement</code></dt>
 <dd>
  Any statement. To execute multiple statements, use a <a href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> statement ({ ... }) to group those statements.</dd>
</dl>
<h2 id="Description" name="Description">Description</h2>
<p>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.</p>
<div class="note">
 Using <code>with</code> is not recommended, and is forbidden in ECMAScript 5 <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode</a>. The recommended alternative is to assign the object whose properties you want to access to a temporary variable.<br />
 (On a historical note, Firefox 1.5 used to generate a warning when the 'with' statement was used: "deprecated with statement usage". This has been removed in Firefox 1.5.0.1 ({{Bug(322430)}}).)</div>
<p><em>Performance Pro &amp; Con</em></p>
<ul>
 <li>Pro: 'with' can help reduce file size by reducing the need to repeat a lengthy object reference without performance penalty. The scope chain change required by 'with' is not computationally expensive. Use of 'with' will relieve the interpreter of parsing repeated object references. Note, however, that in many cases this benefit can be achieved by using a temporary variable to store a reference to the desired object.</li>
 <li>Con: 'with' forces the specified object to be searched first for all name lookups. Therefore all identifiers that aren't members of the specified object will be found more slowly in a 'with' block. Where performance is important, 'with' should only be used to encompass code blocks that access members of the specified object.</li>
</ul>
<p><em>Ambiguity Con</em></p>
<ul>
 <li>Con: 'with' makes it hard for a human reader or JavaScript compiler to decide whether an unqualified name will be found along the scope chain, and if so, in which object. So given this example:
  <pre>
function f(x, o) {
  with (o) 
    print(x);
}</pre>
  <p>only when <code>f</code> is called is <code>x</code> either found or not, and if found, either in <code>o</code> or (if no such property exists) in <code>f</code>'s activation object, where <code>x</code> names the first formal argument. If you forget to define <code>x</code> in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected results.</p>
 </li>
 <li>Con: Code using <code>with</code> may not be forward compatible, especially when used with something else than a plain object. Consider this example:
  <div>
   <pre class="brush:js">
function f(foo, values) {
    with (foo) {
        console.log(values)
    }
}
</pre>
   <p>If you call <code>f([1,2,3], obj)</code> in an ECMAScript 5 environment, then the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>obj</code>. However, ECMAScript 6 introduces a <code>values</code> property on <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype">Array.prototype</a></code> (so that it will be available on every array). So, in a JavaScript environment that supports ECMAScript 6, the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>[1,2,3].values</code>.</p>
  </div>
 </li>
</ul>
<h2 id="Examples" name="Examples">Examples</h2>
<h3 id="Example:_Using_with" name="Example:_Using_with">Example: Using <code>with</code></h3>
<p>The following <code>with</code> statement specifies that the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Math" title="JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> object is the default object. The statements following the <code>with</code> statement refer to the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Math/PI" title="JavaScript/Reference/Global_Objects/Math/PI"><code>PI</code></a> property and the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Math/cos" title="JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> and <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Math/sin" title="JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a> methods, without specifying an object. JavaScript assumes the <code>Math</code> object for these references.</p>
<pre class="brush:js">
var a, x, y;
var r = 10;

with (Math) {
  a = PI * r * r;
  x = r * cos(PI);
  y = r * sin(PI / 2);
}</pre>
<!--languages( { "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Instructions/with" } )-->
Revert to this revision