DEV Community

Cover image for ECMAScript 6 ⚡ Shorthand Properties & Method Names
Marcos Mendes
Marcos Mendes

Posted on


ECMAScript 6 ⚡ Shorthand Properties & Method Names

Hey guys, how are you? This is going to be a short post and very straight to the point.

ES6 introduced a new concept/feature called “Property shorthand”, let's see an example of this feature below:

Let's imagine that we need to create an object to store information about a user, such as first name, last name and age:

Previously in ES5 we would do it as follows, we would create the object passing the property and value.

If you noticed, this way there is a lot of repetition, imagine if we needed to create a "Person" object with more information about our user, we would have a lot more repetitions.

So that's when the shorthand property comes into action, the shorthand allows us to do the following: If the property and the variable have the same name, we just have to create the object as follows =>

This way he will understand that first we will pass the property which is "firstName", then he will pass the value, and so on.
That way, we write a lot less code.

Another really cool thing is the way we create functions inside an object using the shorthand, let's create a function to return our user's full name.

Old form:

How to use in ES6:

With the shorthand I no longer need to put the "function" the "getFullName" is enough.

This makes it much easier to read and we write much less.

Top comments (0)

Tired of sifting through your feed?

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.