Definições de Método

Baseline Widely available

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

No ECMAScript 2015 foi introduzida uma sintaxe reduzida para definição de métodos em inicializadores de objetos. É uma abreviação para uma função atribuída ao nome do método.

Experimente

Sintaxe

var obj = {
  propriedade( parametros… ) {},
  *generator( parametros… ) {},
// também com chaves computadas:
  [propriedade]( parameters… ) {},
  *[generator]( parametros… ) {},
// compare ES5 sintaxe para getter/setter:
  get propriedade() {},
  set propriedade(valor) {}
};

Descrição

A sintaxe reduzida é similar à da getter e setter introduzida no ECMAScript 5.

Dado o seguinte código:

js
var obj = {
  foo: function () {},
  bar: function () {},
};

Agora você pode reduzi-lo para isto:

js
var obj = {
  foo() {},
  bar() {},
};

Generator methods

Os generator methods também podem ser definidos utilizando a sintaxe reduzida.

  • Observe que o asterisco (*) na sintaxe reduzida deve estar antes do nome da propriedade generator. Assim, * g(){} funcionará, porém g *(){} não.
  • Se o método não for generator, sua definição não pode conter a palavra-chave yield. Dessa forma, generator functions legadas também não funcionarão, lançando um SyntaxError. Sempre utilize yield em conjunto com o asterisco (*)
js
// Utilizando a propriedade com nome (pre-ES6)
var obj2 = {
  g: function* () {
    var indice = 0;
    while (true) yield indice++;
  },
};

// O mesmo objeto utilizando a sintaxe reduzida
var obj2 = {
  *g() {
    var indice = 0;
    while (true) yield indice++;
  },
};

var coisa = obj2.g();
console.log(coisa.next().value); // 0
console.log(coisa.next().value); // 1

Métodos assíncronos

Funções assíncronas também podem ser definidas usando a sintaxe reduzida.

js
// Utilizando a propriedade com nome (pre-ES6)
var obj3 = {
  f: async function () {
    await alguma_promise;
  },
};

// O mesmo objeto com a sintaxe reduzida
var obj3 = {
  async f() {
    await alguma_promise;
  },
};

Generator methods assíncronos

Os generator methods também podem ser assíncronos

js
var obj4 = {
  f: async function* () {
    yield 1;
    yield 2;
    yield 3;
  },
};

// O mesmo objeto com a sintaxe reduzida
var obj4 = {
  async *f() {
    yield 1;
    yield 2;
    yield 3;
  },
};

Métodos reduzidos não são construíveis

Métodos assim definidos não são construtores e lançarão um TypeError se você tentar instanciá-los.

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

var obj = {
  *g() {},
};
new obj.g(); // TypeError: obj.g is not a constructor (modificado no ES2016)

Exemplos

Caso de teste simples

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

Nome de propriedades computados

A sintaxe reduzida também suporta nome de propriedades computados.

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

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

Especificações

Specification
ECMAScript Language Specification
# sec-method-definitions

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também