ES6 cool techniques

Since ES6 came out and started gaining traction, I was one of the early adopters to some of its features and like many developers I’ve came across a few tips and tricks that I want to share with you. 
This article isn’t meant to be a tutorial, it’s just exploiting the new syntax, and I’ll reference some code snippets in a random collection of ES6 features.

On to the code!

Template Literals

ES6 template literals aren’t really “templates” per se… more like strings literals actually. While using Template Literals, we can build strings that have special characters in them without the need to escape this particularly strings.

// ES5
var hello = "Hello from the \"future\" now give me a sandwich.";
// ES6
let hello = `Hello from the "future" now give me a sandwich.`;

More on strings

With ES6 we got lots of new stuff to use, some new methods like .includes() can be used on strings:

// ES5
var sandwich = 'sandwich';
var halfSandwich = 'sand';
console.log(sandwich.indexOf(halfSandwich) > -1); // true

In this case, instead of checking for a return value to verify the string is contained, we can simply use .includes() which will return the same thing, a boolean:

// ES5
const sandwich = 'sandwich';
const halfSandwich = 'sand';
console.log(sandwich.includes(halfSandwich)); // true

Another handy feature about ES6 Template Literals is the simplicity in which we define new lines inside a string.

// ES5
var sandwich = (
'bacon\n' +
'cheese\n' +
'tomatoes'
);
// ES6
let sandwich = ( `bacon
cheese
tomatoes`
);

Async Await

Now, this is one awesome, big time saving feature, Async Await! What this basically does is allowing us to perform the same thing we accomplished with Promises, but with much less effort. Let’s suppose we had a pice of code like the following:

var request = require('request');
function getJSON(url) {  
return new Promise(function(resolve, reject) {
request(url, function(err, res, body) {
resolve(body);
});
});
}
async function main() {  
var data = await getJSON(); // here is the await
console.log(data); // NOT undefined!
}
main();

Note that await may only be used in functions marked with the async keyword.

This async feature works by suspending execution in the script until the promise settles. And it always returns a Promise. That promise is rejected in the case of uncaught exceptions, and it’s otherwise resolved to the return value of the async function.

Enforcing mandatory parameters

Enforcing mandatory parameters via parameter default values triggers that they are only evaluated when they are actually used, letting you enforce that a given parameter is in fact provided:

// Provided parameter MUST be provided
function foo(provided = mandatory()) {
return provided;
}
// If Provided parameter is missing && the default value is evaluated
function mandatory() {
throw new Error('Missing parameter');
}

That’s it, yap, quick and easy, for now at least. These small group of 4 features are only a very few of all new methods that ES6 provides us, and it’s still evolving, so there’s always new stuff, useful or not, coming out in future releases.

Hope you enjoyed reading about this ES6 tips and that you got the grasp of it. I’ll be posting more cool features that I find the most useful to work with.

Thanks for reading :)

Follow me on Medium if you enjoy reading my content.
Photo credit
Lewis Ngugi.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.