I was recently working on a project in which I was trying to use a shorthand notation for destructuring assignment of a variable. I was researching different ways of getting a specific scenario to work. And while doing that research, I found that ES2015 had added 3 new object initialization shorthand notations that I had not known existed. And so I decided to share these with everyone.
Note: As with most good things, these do not work with Internet Explorer. So if you are supporting it, these still might be good to have in your arsenal when Microsoft drops support for IE later.
What does object initialization shorthand notations mean?
Objects initialization by default can be done using
new Object or the literal notation by using an object initializer. The object initializer has been one of the most common ways:
There are ways to make this initialization concise in specific scenarios and we are going to go through those shorthands in this post.
The 3 new object initialization shorthand notations were added to it in ES2015:
- Shorthand property names
- Shorthand method names
- Computed property names
Shorthand property names
This one is the most widely known object initialization shorthand notation out there. Whenever the property name key on an object is the same as a variable name in scope, we can omit the property value while constructing the object.
This means code that used to be:
can now be:
Shorthand method names
This one was a little surprising when I first saw it in the sense that I always knew about shorthand property names. But I never thought that the same could also be applied to function/method names. With shorthand method names, we can omit the function keyword completely when creating methods inside an object.
There was code that was like:
can be shorthanded to:
We have been used to this in the form of classes, and it is not a huge win, but this post is about shorthands and I like these new introductions.
Computed Property Names
This was the most interesting shorthand of all the 3 object initialization shorthands. It allows us to have an expression to be computed as a property name on the object. Therefore we can now have dynamic keys in object names.
Have you ever done this?
And it will work! The idea of being able to inject a dynamic key might seem trivial but it opens up a lot of possibilities. We can even add complex expressions in there or even use template literals:
Will you use any of these? Let us know in the comments below!