Revision 695501 of Property accessors

<div>
 <div>
  {{jsSidebar("Operators")}}</div>
</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>Property accessors provide access to an object's properties by using the dot notation or the bracket notation.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">
object.property
object["property"]
</pre>
<h2 id="Description">Description</h2>
<p>One can think of an object as an <em>associative array</em> (a.k.a. <em>map</em>, <em>dictionary</em>, <em>hash</em>, <em>lookup table</em>). The <em>keys</em> in this array are the names of the object's properties. It's typical when speaking of an object's properties to make a distinction between properties and methods. However, the property/method distinction is little more than a convention. A method is simply a property that can be called, for example if it has a reference to a <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">Function</a> instance as its value.</p>
<p>There are two ways to access properties: dot notation and bracket notation.</p>
<h3 id="Dot_notation" name="Dot_notation">Dot notation</h3>
<pre class="brush: js">
get = object.property;
object.property = set;
</pre>
<p><code>property</code> must be a valid JavaScript identifier, i.e. a sequence of alphanumerical characters, also including the underscore ("<code>_</code>") and dollar sign ("<code>$</code>"), that cannot start with a number. For example, <code>object.$1</code> is valid, while <code>object.1</code> is not.</p>
<h4 id="Example.3A">Example:</h4>
<pre class="brush: js">
document.createElement('pre');
</pre>
<p>Here, the method named "createElement" is retrieved from <code>document</code> and is called.</p>
<h3 id="Bracket_notation" name="Bracket_notation">Bracket notation</h3>
<pre class="brush: js">
get = object[property_name];
object[property_name] = set;
</pre>
<p><code>property_name</code> is a string. The string does not have to be a valid identifier; it can have any value, e.g. "1foo", "!bar!", or even " " (a space).</p>
<h4 id="Example.3A_2">Example:</h4>
<pre class="brush: js">
document['createElement']('pre');
</pre>
<p>This does the exact same thing as the previous example.</p>
<h3 id="Property_names" name="Property_names">Property names</h3>
<p>Property names must be strings. This means that non-string objects cannot be used as keys in the object. Any non-string object, including a number, is typecasted into a string via the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">toString</a> method.</p>
<h4 id="Examples.3A">Examples:</h4>
<pre class="brush: js">
var object = {};
object['1'] = 'value';
alert(object[1]);
</pre>
<p>This outputs "value", since 1 is type-casted into '1'.</p>
<pre class="brush: js">
var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
object[foo] = 'value';
alert(object[bar]);
</pre>
<p>This also outputs "value", since both foo and bar are converted to the same string. In the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, this string would be "['object Object']".</p>
<h3 id="Method_binding" name="Method_binding">Method binding</h3>
<p>A method is not bound to the object that it is a method of. Specifically, <code>this</code> is not fixed in a method, i.e., <code>this</code> does not necessarily refer to an object containing the method. <code>this</code> is instead "passed" by the function call. See <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#Method_binding">method binding</a>.</p>
<h3 id="Note_on_eval" name="Note_on_eval">Note on <code>eval</code></h3>
<p>JavaScript novices often make the mistake of using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a> where the bracket notation can be used instead. For example, the following syntax is often seen in many scripts.</p>
<pre class="brush: js">
x = eval('document.forms.form_name.elements.' + strFormControl + '.value');
</pre>
<p><code>eval</code> is slow and should be avoided whenever possible. Also, <code>strFormControl</code> would have to hold an identifier, which is not required for names and IDs of form controls. It is better to use bracket notation instead:</p>
<pre class="brush: js">
x = document.forms["form_name"].elements[strFormControl].value;
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>ECMAScript 1st Edition.</td>
   <td>Standard</td>
   <td>Initial definition. Implemented in JavaScript 1.0</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Chrome for Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
 <li>{{jsxref("Object")}}</li>
</ul>