161

What does get mean in this ES6 class? How do I reference this function? How should I use it?

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width;
  }
}
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Armeen Moon
  • 18,061
  • 35
  • 120
  • 233

3 Answers3

156

It means the function is a getter for a property.

To use it, just use it's name as you would any other property:

'use strict'
class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width;
  }
}

var p = new Polygon(10, 20);

alert(p.area);
Amit
  • 45,440
  • 9
  • 78
  • 110
  • 2
    Classes are implicitly in strict mode btw. http://www.ecma-international.org/ecma-262/6.0/#sec-strict-mode-code – Kit Sunde Aug 14 '15 at 09:58
  • 2
    @KitSunde - at least on my browser (Chrome, Win7), without that statement I get console errors instead of working sample. And this is not part of "The Answer", much like the "Run code snippet" button isn't. – Amit Aug 14 '15 at 09:59
  • 6
    Can you not just call `p. calcArea`? if not, why not? – ksav Oct 25 '16 at 13:03
  • 13
    Are the get / set keywords just syntactical sugar - since a call to Polygon.calcArea() wil also act as a getter as well ? – curtybear Jun 06 '17 at 17:49
  • 1
    so function get ```get``` keyword can't have parameter? – dante Feb 07 '20 at 04:34
  • @CraigO.Curtis seems like it. Simply just a matter of declarative programming. Using the word 'get' implies that you are retrieving something, which is more intuitive than a function name by itself. Look at ```get fullName``` and ```fullName()```. The former is more explicit in what is being done. – Matthew Wolman Sep 25 '20 at 19:38
89

Summary:

The get keyword will bind an object property to a function. When this property is looked up now the getter function is called. The return value of the getter function then determines which property is returned.

Example:

const person = {
    firstName: 'Willem',
    lastName: 'Veen',
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }

}

console.log(person.fullName);
// When the fullname property gets looked up
// the getter function gets executed and its
// returned value will be the value of fullname
Willem van der Veen
  • 33,665
  • 16
  • 190
  • 155
  • 3
    Thumbs up for the practical example! – Niket Pathak Sep 25 '18 at 21:18
  • 18
    I think I can simplify it even further. The 'get' lets you treat a class method, as if it were a simple property in an object. If you leave off the 'get', you can still access the value by calling .area() instead of just .area – dwilbank Nov 01 '18 at 21:19
27

It is getter, same as Objects and Classes in OO JavaScript. From the MDN Docs for get:

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

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252