Javascript ES6: 3 Cool Features You Should Be Using

As the JavaScript community continued to grow in previous years, a lot of good things have happened to JavaScript as a language. One of those good things was its penetration into the server-side development world via Node.js, which suddenly made JavaScript developers worldwide even more powerful.

Today, I would like to discuss three of the beautiful new features introduced to the language in its release of the ECMA2015 (ES6) specification, and hopefully convince you to start writing ES6 if you are not doing it already.

This post is not an extensive guide to ES6 features, it is written as an introduction to the features and therefore, does not dive deep into the features. Neither will this article address the pros and cons of each feature.

Arrow Function

If you are a JavaScript developer, you already know the good old way of declaring functions.

Here is a simple function that converts an epoch timestamp into a human readable form.

Good Old Way

function dateFromTimeStamp(timeStamp) {
  var humanReadableDate = new Date(timeStamp);
    return humanReadableDate;
}
dateFromTimeStamp(1489957823485); //Sun Mar 19 2017 22:10:23 GMT+0100 (WAT)

ES2015

var dateFromTimeStamp = timeStamp => new Date(timeStamp);
dateFromTimeStamp(1489957823485); //Sun Mar 19 2017 22:10:23 GMT+0100 (WAT)

As you can see, the code looks shorter and cleaner — we can even omit the curly braces {} (one-liners only). There is support for implicit return as well, so we can conviniently omit the return keyword.

You can learn more about arrow functions here.

Template Literals

This remains one of the most important feature to me as it really makes string concatention easier and much more bearable.

Good Old Way

var friendOne = 'Smith';
var friendTwo = 'Olawale';
var friendThree = 'Victor';

var allOfThem = 'The three friends are ' + friendOne + ', ' + friendTwo + ', and' + friendThree; 
//Output:  'The three friends are Smith, Olawale and Victor'

ES2015

var friendOne = 'Smith';
var friendTwo = 'Olawale';
var friendThree = 'Victor';

var allOfThem = `The three friends are ${friendOne}, ${friendTwo} and ${friendThree}`;
//Output:  'The three friends are Smith, Olawale and Victor'

From the above, you can see that using ES6 template literal makes life easier and your code neater. I am sure I am not the only one who thinks the old solution looks like a hack. Another good thing is that template literal supports multiple lines so you can write strings that span multiple lines such javascript automagically adds \n for you wherever you break a line:

var author = 'Olawale';
var poem = `
I am ${author}, this is my poem
There isn't much to say
And here is my last line
`;
//Output: '\nI am Olawale, this is my poem\nThere isn\'t much to say\nAnd here is my last line\n'

You can read more about ES6 Template Literal here.

Default Parameter

Before the arrival of ES2015, when you want to specify a default parameter in a function, you had to do it in the body of the function like so:

function greetHuman(name) {
name = name || 'human';
return 'Hello ' + name + ', we come in peace'; 
}
greetHuman(); // 'Hello human, we come in peace'
greetHuman('Olawale'); // 'Hello Olawale, we come in peace'

With ES6, you can now do this in function head and as such, we no longer have to perform checks for undefined parameters in the function's body.

Here's what the code in ES6 would look like if you're combining arrow functions, template literal, and default:

const greetHuman = (name = 'human') => `Hello ${name}, we come in peace`;
greetHuman('Olawale'); 'Hello Olawale, we come in peace'
greetHuman(); 'Hello human, we come in peace'

You can learn more about these ES6 features here. Here are some additional resources to help you get started with ECMA(ES6):

• How to Get Started with learning ES6
• Introduction to ES6
• The Ultimate JavaScript Cheat Sheet

If you enjoyed this article, don't forget to share it with others and follow me on Twitter to be notified of my new posts.