introduced two new features to make objects more concise - Shorthand Properties and Shorthand Method Names.

Shorthand Properties

With Shorthand Properties, whenever you have a variable which is the same name as a property on an object, when constructing the object, you can omit the property name.

What that means is that code that used to look like this,

function formatMessage (name, id, avatar) {
return {
name: name,
id: id,
avatar: avatar,
timestamp: Date.now()
}
}

can now look like this.

function formatMessage (name, id, avatar) {
return {
name,
id,
avatar,
timestamp: Date.now()
}
}

Shorthand Method Names

Now, what if one of those properties was a function?

A function that is a property on an object is called a method. With ES6’s Shorthand Method Names, you can omit the function keyword completely. What that means is that code that used to look like this,

function formatMessage (name, id, avatar) {
return {
name,
id,
avatar,
timestamp: Date.now(),
save: function () {
// save message
}
}
}

can now look like this

function formatMessage (name, id, avatar) {
return {
name,
id,
avatar,
timestamp: Date.now(),
save () {
//save message
}
}
}

Both Shorthand Properties and Shorthand Method Names are just syntactic sugar over the previous ways we used to add properties to an object. However, because they’re such common tasks, even the smallest improvements eventually add up.


Before you leave

I know, "another newsletter pitch" - but hear me out. Most JavaScript newsletters are terrible. When's the last time you actually looked forward to getting one? Even worse, when's the last time you actually read one rather than just skim it?

We wanted to change that, which is why we created Bytes. The goal was to create a JavaScript newsletter that was both educational and entertaining. 84,512 subscribers and an almost 50% weekly open rate later, it looks like we did it.

Delivered to 84,512 developers every Monday

Avatar for Tyler McGinnis

Tyler McGinnis

CEO of ui.dev. Obsessed with teaching, writing, swimming, biking, and running.

Share this post

Want more javascript?

This is part of our Modern JavaScript course. You can take the rest of the course by starting a free 3-day trial.