Method definitions

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Method definition is a shorter syntax for defining a function property in an object initializer. It can also be used in classes.

Try it

const obj = {
  foo() {
    return "bar";
  },
};

console.log(obj.foo());
// Expected output: "bar"

Syntax

js
({
  property(parameters) {},
  *generator(parameters) {},
  async property(parameters) {},
  async *generator(parameters) {},

  // with computed keys
  [expression](parameters) {},
  *[expression](parameters) {},
  async [expression](parameters) {},
  async *[expression](parameters) {},
})

Description

The shorthand syntax is similar to the getter and setter syntax.

Given the following code:

js
const obj = {
  foo: function () {
    // …
  },
  bar: function () {
    // …
  },
};

You are now able to shorten this to:

js
const obj = {
  foo() {
    // …
  },
  bar() {
    // …
  },
};

Properties defined using this syntax are own properties of the created object, and they are configurable, enumerable, and writable, just like normal properties.

function*, async function, and async function* properties all have their respective method syntaxes; see examples below.

However, note that the method syntax is not equivalent to a normal property with a function as its value — there are semantic differences. This makes methods defined in object literals more consistent with methods in classes.

Method definitions are not constructable

Methods cannot be constructors! They will throw a TypeError if you try to instantiate them. On the other hand, a property created as a function can be used as a constructor.

js
const obj = {
  method() {},
};
new obj.method(); // TypeError: obj.method is not a constructor

Using super in method definitions

Only functions defined as methods have access to the super keyword. super.prop looks up the property on the prototype of the object that the method was initialized on.

js
const obj = {
  __proto__: {
    prop: "foo",
  },
  notAMethod: function () {
    console.log(super.prop); // SyntaxError: 'super' keyword unexpected here
  },
};

Examples

Using method definitions

js
const obj = {
  a: "foo",
  b() {
    return this.a;
  },
};
console.log(obj.b()); // "foo"

Method definitions in classes

You can use the exact same syntax to define public instance methods that are available on class instances. In classes, you don't need the comma separator between methods.

js
class ClassWithPublicInstanceMethod {
  publicMethod() {
    return "hello world";
  }
  secondPublicMethod() {
    return "goodbye world";
  }
}

const instance = new ClassWithPublicInstanceMethod();
console.log(instance.publicMethod()); // "hello world"

Public instance methods are defined on the prototype property of the class and are thus shared by all instances of the class. They are writable, non-enumerable, and configurable.

Inside instance methods, this and super work like in normal methods. Usually, this refers to the instance itself. In subclasses, super lets you access the prototype of the object that the method is attached to, allowing you to call methods from the superclass.

js
class BaseClass {
  msg = "hello world";
  basePublicMethod() {
    return this.msg;
  }
}

class SubClass extends BaseClass {
  subPublicMethod() {
    return super.basePublicMethod();
  }
}

const instance = new SubClass();
console.log(instance.subPublicMethod()); // "hello world"

Static methods and private methods use similar syntaxes, which are described in the static and private elements pages.

Computed property names

The method syntax also supports computed property names.

js
const bar = {
  foo0: function () {
    return 0;
  },
  foo1() {
    return 1;
  },
  ["foo".toUpperCase()]() {
    return 2;
  },
};

console.log(bar.foo0()); // 0
console.log(bar.foo1()); // 1
console.log(bar.FOO()); // 2

Generator methods

Note that the asterisk (*) in the generator method syntax must be before the generator property name. (That is, * g(){} will work, but g *(){} will not.)

js
// Using a named property
const obj = {
  g: function* () {
    let index = 0;
    while (true) {
      yield index++;
    }
  },
};

// The same object using shorthand syntax
const obj2 = {
  *g() {
    let index = 0;
    while (true) {
      yield index++;
    }
  },
};

const it = obj2.g();
console.log(it.next().value); // 0
console.log(it.next().value); // 1

Async methods

js
// Using a named property
const obj = {
  f: async function () {
    await somePromise;
  },
};

// The same object using shorthand syntax
const obj2 = {
  async f() {
    await somePromise;
  },
};

Async generator methods

js
// Using a named property
const obj = {
  f: async function* () {
    yield 1;
    yield 2;
    yield 3;
  },
};

// The same object using shorthand syntax
const obj2 = {
  async *f() {
    yield 1;
    yield 2;
    yield 3;
  },
};

Specifications

Specification
ECMAScript® 2027 Language Specification
# sec-method-definitions

Browser compatibility

desktop mobile server
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Bun
Deno
Node.js
Method definitions
Chrome – Full support
Chrome 39 (Release date: 2014-11-18)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 34 (Release date: 2014-12-01)
footnote Full support
Opera – Full support
Opera 26 (Release date: 2014-12-03)
footnote Full support
Safari – Full support
Safari 9 (Release date: 2015-09-30)
footnote Full support
Chrome Android – Full support
Chrome Android 39 (Release date: 2014-11-12)
footnote Full support
Firefox for Android – Full support
Firefox for Android 34 (Release date: 2014-12-01)
footnote Full support
Opera Android – Full support
Opera Android 26 (Release date: 2014-12-02)
footnote Full support
Safari on iOS – Full support
Safari on iOS 9 (Release date: 2015-09-16)
footnote Full support
Samsung Internet – Full support
Samsung Internet 4 (Release date: 2016-03-11)
footnote Full support
WebView Android – Full support
WebView Android 39 (Release date: 2014-11-12)
footnote Full support
WebView on iOS – Full support
WebView on iOS 9 (Release date: 2015-09-16)
footnote Full support
Bun – Full support
Bun 1 (Release date: 2023-09-08)
footnote Full support
Deno – Full support
Deno 1 (Release date: 2020-05-13)
footnote Full support
Node.js – Full support
Node.js 4 (Release date: 2015-09-08)
footnote Full support
Async generator methods
Chrome – Full support
Chrome 63 (Release date: 2017-12-06)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – Full support
Firefox 57 (Release date: 2017-11-14)
footnote Full support
Opera – Full support
Opera 50 (Release date: 2018-01-04)
footnote Full support
Safari – Full support
Safari 12 (Release date: 2018-09-17)
footnote Full support
Chrome Android – Full support
Chrome Android 63 (Release date: 2017-12-05)
footnote Full support
Firefox for Android – Full support
Firefox for Android 57 (Release date: 2017-11-28)
footnote Full support
Opera Android – Full support
Opera Android 46 (Release date: 2018-05-14)
footnote Full support
Safari on iOS – Full support
Safari on iOS 12 (Release date: 2018-09-17)
footnote Full support
Samsung Internet – Full support
Samsung Internet 8 (Release date: 2018-07-18)
footnote Full support
WebView Android – Full support
WebView Android 63 (Release date: 2017-12-05)
footnote Full support
WebView on iOS – Full support
WebView on iOS 12 (Release date: 2018-09-17)
footnote Full support
Bun – Full support
Bun 1 (Release date: 2023-09-08)
footnote Full support
Deno – Full support
Deno 1 (Release date: 2020-05-13)
footnote Full support
Node.js – Full support
Node.js 10 (Release date: 2018-04-24)
footnote Full support
Async methods
Chrome – Full support
Chrome 55 (Release date: 2016-12-01)
footnote Full support
Edge – Full support
Edge 15 (Release date: 2017-04-05)
footnote Full support
Firefox – Full support
Firefox 52 (Release date: 2017-03-07)
footnote Full support
Opera – Full support
Opera 42 (Release date: 2016-12-13)
footnote Full support
Safari – Full support
Safari 10.1 (Release date: 2017-03-27)
footnote Full support
Chrome Android – Full support
Chrome Android 55 (Release date: 2016-12-06)
footnote Full support
Firefox for Android – Full support
Firefox for Android 52 (Release date: 2017-03-07)
footnote Full support
Opera Android – Full support
Opera Android 42 (Release date: 2017-01-21)
footnote Full support
Safari on iOS – Full support
Safari on iOS 10.3 (Release date: 2017-03-27)
footnote Full support
Samsung Internet – Full support
Samsung Internet 6 (Release date: 2017-08-23)
footnote Full support
WebView Android – Full support
WebView Android 55 (Release date: 2016-12-06)
footnote Full support
WebView on iOS – Full support
WebView on iOS 10.3 (Release date: 2017-03-27)
footnote Full support
Bun – Full support
Bun 1 (Release date: 2023-09-08)
footnote Full support
Deno – Full support
Deno 1 (Release date: 2020-05-13)
footnote Full support
Node.js – Full support
Node.js 7.6 (Release date: 2017-02-21)
footnote Full support
Generator methods are not constructable (ES2016)
Chrome – Full support
Chrome 42 (Release date: 2015-04-14)
footnote Full support
Edge – Full support
Edge 13 (Release date: 2015-11-12)
footnote Full support
Firefox – Full support
Firefox 43 (Release date: 2015-12-15)
footnote Full support
Opera – Full support
Opera 29 (Release date: 2015-04-28)
footnote Full support
Safari – Full support
Safari 9.1 (Release date: 2016-03-21)
footnote Full support
Chrome Android – Full support
Chrome Android 42 (Release date: 2015-04-15)
footnote Full support
Firefox for Android – Full support
Firefox for Android 43 (Release date: 2015-12-15)
footnote Full support
Opera Android – Full support
Opera Android 29 (Release date: 2015-04-28)
footnote Full support
Safari on iOS – Full support
Safari on iOS 9.3 (Release date: 2016-03-21)
footnote Full support
Samsung Internet – Full support
Samsung Internet 4 (Release date: 2016-03-11)
footnote Full support
WebView Android – Full support
WebView Android 42 (Release date: 2015-04-15)
footnote Full support
WebView on iOS – Full support
WebView on iOS 9.3 (Release date: 2016-03-21)
footnote Full support
Bun – Full support
Bun 1 (Release date: 2023-09-08)
footnote Full support
Deno – Full support
Deno 1 (Release date: 2020-05-13)
footnote Full support
Node.js – Full support
Node.js 6 (Release date: 2016-04-26)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also