get

  • Revision slug: Web/JavaScript/Reference/Operators/get
  • Revision title: get
  • Revision id: 418371
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Properly re-formatted the js_minversion_note (was broken in the past, possibly related to this https://bugzilla.mozilla.org/show_bug.cgi?id=769351)Moved From JavaScript/Reference/Operators/get to Web/JavaScript/Reference/Operators/get

Revision Content

Summary

Binds an object property to a function that will be called when that property is looked up.

Syntax

{get prop() { . . . } }

Parameters

prop
the name of the property to bind to the given function

Description

Sometimes it is desirable to allow access to a property that returns a dynamically computed value, or you may want reflect the status of an internal variable without requiring the use of explicit method calls. In JavaScript, this can be accomplished with the use of a getter. It is not possible to simultaneously have a getter bound to a property and have that property actually hold a value, although it is possible to use a getter and a setter in conjunction to create a type of pseudo-property.

{{js_minversion_note("1.8.5", '

Starting in JavaScript 1.8.5, the get operator:

');}}

A getter can be removed using the delete operator.

Examples

Defining a getter with the get operator

This will create a pseudo-property latest of object o that will return the most recent entry into o.log:

var o = {
  get latest () {
    if (this.log.length > 0) {
      return this.log[this.log.length - 1];
    }
    else {
      return null;
    }
  },
  log: []
}

Note that attempting to assign a value to latest will not change it.

Deleting a getter using the delete operator

delete o.latest;

Browser compatibility

Based on Robert Nyman's page

No support (notably in IE6-8) means that the script will trigger a syntax error.

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("1.8.1") }} 1 9 9.5 3
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

{{ languages( { "ja": "ja/JavaScript/Reference/Operators/get" } ) }}

 

Revision Source

<h2 id="Summary">Summary</h2>
<p>Binds an object property to a function that will be called when that property is looked up.</p>
<h2 id="Syntax">Syntax</h2>
<p><code>{get <em>prop</em>() { .&nbsp;.&nbsp;. } }</code></p>
<h2 id="Parameters">Parameters</h2>
<dl>
  <dt>
    <code>prop</code></dt>
  <dd>
    the name of the property to bind to the given function</dd>
</dl>
<h2 id="Description">Description</h2>
<p>Sometimes it is desirable to allow access to a property that returns a dynamically computed value, or you may want reflect the status of an internal variable without requiring the use of explicit method calls. In JavaScript, this can be accomplished with the use of a getter. It is not possible to simultaneously have a getter bound to a property and have that property actually hold a value, although it is possible to use a getter and a setter in conjunction to create a type of pseudo-property.</p>
<div>
  {{js_minversion_note("1.8.5", '
  <p style="text-align: left;">Starting in JavaScript 1.8.5, the <code>get</code> operator:</p>
  <ul style="text-align: left;">
    <li>can have an identifier which is either a number or a string;</li>
    <li>must have exactly zero parameters (see 
      <a href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" class="external" rel="external nofollow" target="_blank">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a>
      for more information);</li>
    <li>must not appear in an object literal with another <code>get</code>
      or with a data entry for the same property (<code>{ get x() { }, get x() { } }</code>
      and <code>{ x: ..., get x() { } }</code> are forbidden).</li>
  </ul>
 ');}}</div>
<p>A getter can be removed using the <code><a href="/en/JavaScript/Reference/Operators/delete" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator">delete</a></code> operator.</p>
<h2 id="Examples">Examples</h2>
<h3 id="Example:_Defining_a_getter_with_the_get_operator" name="Example:_Defining_a_getter_with_the_get_operator">Defining a getter with the <code>get</code> operator</h3>
<p>This will create a pseudo-property <code>latest</code> of object <code>o</code> that will return the most recent entry into <code>o.log</code>:</p>
<pre class="brush: js">
var o = {
  get latest () {
    if (this.log.length &gt; 0) {
      return this.log[this.log.length - 1];
    }
    else {
      return null;
    }
  },
  log: []
}
</pre>
<p>Note that attempting to assign a value to <code>latest</code> will not change it.</p>
<h3 id="Example:_Deleting_a_getter_using_the_delete_operator" name="Example:_Deleting_a_getter_using_the_delete_operator">Deleting a getter using the <code>delete</code> operator</h3>
<pre class="brush: js">
delete o.latest;
</pre>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>Based on <a class="external" href="http://robertnyman.com/javascript/javascript-getters-setters.html#regular-getters-and-setters">Robert Nyman's page</a></p>
<p>No support (notably in IE6-8) means that the script will trigger a syntax error.</p>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox (Gecko)</th>
        <th>Chrome</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatGeckoDesktop("1.8.1") }}</td>
        <td>1</td>
        <td>9</td>
        <td>9.5</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>Android</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><code><a href="/en/JavaScript/Reference/Operators/delete" title="en/JavaScript/Reference/Operators/Special_Operators/delete_Operator">delete</a></code></li>
  <li><code><a href="/en/JavaScript/Reference/Operators/set" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/set_Operator">set</a></code></li>
  <li><code><a href="/en/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en/JavaScript/Reference/Global_Objects/Object/defineGetter">__defineGetter__</a></code></li>
  <li><code><a href="/en/JavaScript/Reference/Global_Objects/Object/defineSetter" title="en/JavaScript/Reference/Global_Objects/Object/defineSetter">__defineSetter__</a></code></li>
  <li><a href="/en/JavaScript/Guide/Working_with_Objects#Defining_Getters_and_Setters" title="en/JavaScript/Guide/Working with Objects#Defining Getters and Setters">Defining Getters and Setters</a> in JavaScript Guide</li>
</ul>
<div class="noinclude">
  <p>{{ languages( { "ja": "ja/JavaScript/Reference/Operators/get" } ) }}</p>
</div>
<p>&nbsp;</p>
Revert to this revision