Shorthand function properties in ES6

Posted . Visible to the public. Repeats.

Here is an ES5 object literal with two string properties and a function property:

let user = { 
  firstName: 'Max',
  lastName: 'Muster',
  fullName: function() { return this.firstName + ' ' + this.lastName }
}

user.fullName() // => 'Max Muster'

In ES6 we can define a function property using the following shorthand syntax:

let user = { 
  firstName: 'Max',
  lastName: 'Muster',
  fullName() { return this.firstName + ' ' + this.lastName }
}

user.fullName() // => 'Max Muster'

We can also define a getter inside the object literal, without using Object.defineProperty():

let user = { 
  firstName: 'Max',
  lastName: 'Muster',
  get fullName() { return this.firstName + ' ' + this.lastName }
}

user.fullName // no parentheses
Henning Koch
Last edit
Henning Koch
Keywords
javascript, ecmascript
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2020-07-09 12:50)