DEV Community

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

Posted on • Updated 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)