--- title: getter slug: Web/JavaScript/Reference/Functions/get translation_of: Web/JavaScript/Reference/Functions/get original_slug: Web/JavaScript/Reference/الدوال/get ---
{{jsSidebar("Functions")}}

The get صينطاكس طعمنيققbinds an object property to a function that will be called when that property is looked up.

{{EmbedInteractiveExample("pages/js/functions-getter.html")}}

Syntax

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

Parameters

prop
rty to bind to the given fun-tion.
expression
Starting with ECMAScript 2015, you can also use expressions for a computed property name to bind to the given function.

Description

احا الشبشب ضاع احا دا كان ةبصباع

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:

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.

const obj = {
  log: ['example','test'],
  get latest() {
    if (this.log.length === 0) return undefined;
    return this.log[this.log.length - 1];
  }
}
console.log(obj.latest); // "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 {{jsxref("Operators/delete", "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 {{jsxref("Object.defineProperty()")}}.

const 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

const expr = 'foo';

const 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. 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:

This means that you shouldn’t write a lazy getter for a property whose value you expect to change, because if the getter is lazy then it will not recalculate the value.

Note that getters are not “lazy” or “memozied” by nature; you must implement this technique if you desire this behavior.

In the following example, the object has a getter as its own property. On getting the property, the property is removed from the object and re-added, but implicitly as a data property this time. Finally, the value getsreturn this.notifier = document.getElementById('bookmarked-notification-anchor'); },

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

get vs. defineProperty

While using the get keyword and {{jsxref("Object.defineProperty()")}} have similar results, there is a subtle difference between the two when used on {{jsxref("classes")}}.

When using get the property will be defined on the instance's prototype, while using {{jsxref("Object.defineProperty()")}} the property will be defined on the instance it is applied to.

class Example {
  get hello() {
    return 'world';
  }
}

const obj = new Example();
console.log(obj.hello);
// "world"

console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
// undefined

console.log(
  Object.getOwnPropertyDescriptor(
    Object.getPrototypeOf(obj), 'hello'
  )
);
// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }

Specifications

Specification
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}

Browser compatibility

{{Compat("javascript.functions.get")}}

See also