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.

Our volunteers haven't translated this article into Tiếng Việt yet. Join us and help get the job done!

The get syntax binds an object property to a function that will be called when that property is looked up.

Syntax

{get prop() { ... } }
{get [expression]() { ... } }

Parameters

prop
The name of the property to bind to the given function.
expression
Starting with ECMAScript 6, you can also use expressions for a computed property name 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 to 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.

Note the following when working with the get syntax:

A getter can be removed using the delete operator.

Examples

Defining a getter on new objects in object initializers

This will create a pseudo-property latest for object obj, which will return the last array item in log.

var log = ['test'];
var obj = {
  get latest () {
    if (log.length == 0) return undefined;
    return log[log.length - 1]
  }
}
console.log (obj.latest); // Will return "test".

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

Deleting a getter using the delete operator

If you want to remove the getter, you can just delete it:

delete obj.latest;

Defining a getter on existing objects using defineProperty

To append a getter to an existing object later at any time, use Object.defineProperty().

var o = { a:0 }

Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });

console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)

Using a computed property name

Note: Computed properties are experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet. This will trigger a syntax error in non-supporting environments.

var expr = "foo";

var obj = {
  get [expr]() { return "bar"; }
};

console.log(obj.foo); // "bar"

Smart / self-overwriting / lazy getters

Getters give you a way to define a property of an object, but they do not calculate the property's value until it is accessed. A getter defers the cost of calculating the value until the value is needed, and if it is never needed, you never pay the cost.

An additional optimization technique to lazify or delay the calculation of a property value and cache it for later access are smart or memoized getters. The value is calculated the first time the getter is called, and is then cached so subsequent accesses return the cached value without recalculating it. This is useful in the following situations:

  • If the calculation of a property value is expensive (takes much RAM or CPU time, spawns worker thread, retrieves remote file, etc).
  • If the value isn't needed just now. It will be used later, or in some case it's not used at all.
  • If it's used, it will be accessed several times, and there is no need to re-calculate that value will never be changed, or shouldn't be re-calculated.

This means that you shouldn't use a lazy getter for a property whose value you expect to change, because the getter will not recalculate the value.

In the following example, the object has a getter as its own property. On getting the property, the property removed from the object and re-added, but implicitly as a data property this time. Finally the value gets returned.

get notifier() {
  delete this.notifier;
  return this.notifier = document.getElementById("bookmarked-notification-anchor");
},

For Firefox code, see also the XPCOMUtils.jsm code module, which defines the defineLazyGetter() function.

Specifications

Specification Status Comment
ECMAScript 5.1 (ECMA-262)
The definition of 'Object Initializer' in that specification.
Standard Initial definition.
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Method definitions' in that specification.
Standard Added computed property names.
ECMAScript 2017 Draft (ECMA-262)
The definition of 'Method definitions' in that specification.
Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 2.0 (1.8.1) 9 9.5 3
Computed property names 46 34 (34) No support No support No support
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 1.0 (1.8.1) (Yes) (Yes) (Yes)
Computed property names 47 No support 34.0 (34.0) No support No support No support

See also

Document Tags and Contributors

 Last updated by: dwilsonmsft,