Monday, June 26, 2017

19+ JavaScript Shorthand Coding Techniques

 
View online
sitepoint
 
SitePoint Javascript

As I'm sure you are aware, ES6 (a.k.a. ES2015) was a significant update to the JavaScript language. It introduced dozens of new features and some funky new syntax.

Some of these features (e.g. built-in module support) added new capabilities to the language. These have changed the way we are able to write vanilla JavaScript. Other features (e.g. arrow functions) focused on making code simpler and more readable.

But, simplicity and readability are often subjective. These features made code more concise, but also introduced a sizable shift in syntax. This left a lot of people scratching their heads when they encountered things like:

const greeter = greeting => () greeting;  

Do you find that simpler or more complex than the ES5 equivalent?

var greeter = function(greeting){    return function(){      return greeting;    };  };  

For me, it was a matter of familiarity. The first few times I saw something like the ES6 example, I had to manually translate it to ES5 syntax. But, the more I practiced, the easier that became. And this doesn't just go for arrow functions, but for all the other new syntax that ES6 introduced. Destructuring, rest and spread, enhanced object literals... The list goes on.

But what about you? Do you still find this new ES6 syntax confusing? If so, you might like to check out 19+ coding shorthand techniques. We recently updated this popular article to include lots of ES6 code samples like the one above.

Or are you already writing ES6 like a boss and have some shorthand tips of your own to share? In either case, have a read and let us know what you think in the article's comments.

James Hibbard
JavaScript Editor
@SitePointJS

 
 
 

Modern JavaScript

This anthology is a collection of articles hand-picked from SitePoint's JavaScript channel with the aim of giving you a head start on modern JavaScript development.

 

SitePoint Premium

 
 
 

No comments:

Post a Comment