What's new in ES6? How to use its functionalities?

Before we get to describing new features, we need to answer one, really basic question – how should we use functionalities offered by ES6 while they’re not fully implemented in the browsers yet.

How to use ES6 functionalities?

This question is valid, if we think about web browsers which interpret our scripts. Transpilers (transform + compile) are the solution – these tools allow to fully benefit from latest upgrades of the language without having to wait for native implementations. They’re responsible for converting our scripts to the code fully understandable for web browsers. One of the most popular transpilers are Babel.js and Traceur. Many people wonder whether they are a production-ready tools. No matter what answer you give to such a question, at least it’s worth to test how they work and how our code look before and after the transformation. Babel.js provides users with browser’s version REPL (read-eval-print-loop), in which we type our code in accordance to ES6 rules and the preview of the output code is visible next to our version of the code. Babel is available here. Babel.js was recently released as 6.0 version and the way of using this tool got heavily modified. In order to integrate it with currently used tools, I highly recommend checking it up at setup section. If you’re Browserify users, which we described in our previous article, there’s a babelify package available at npm, which is used as the transform for browserify.

Babel.js – installing and managing ES2015

Firstly, we install the very module:

npm install babelify

With 6.0, Babel doesn’t include any new functionalities by default, that’s why it’s recommended to install presets. In our case, ES2015 service.

npm install babel-preset-es2015

The modification of the Gulp task in order for it to support babelify looks like that:

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('default', function() {
return browserify({
entries: ['./main.js']
})
.transform(babelify, {presets: ["es2015"]})
.bundle()
.pipe(source('main.js'))
.pipe(gulp.dest('build'));
});

In case of JavaScript run on the server with the NodeJS runtime environment, the implementation is dynamic. With the new version new functionalities are available, and the access to the new functionalities is available just by upgrading the software’s version.

What’s new in ES6?

A few most important functionalities available in ES6:

• arrow functions – functions defined by using these characters "=>", they differ from the standard ones in that their this value is the same as in the context they’re executed in

var sum =(a,b)=>{return a+b;}

• improved syntax of object literal (enchanced object literals) – by defining objects via object literal we have more options: we can refer to super, set the prototype of the object and insert expressions as properties of the object
• strings template – thanks to "`" sign we can divide a string of characters into a few lines. Additionaly, we’re now able to insert expressions via "${…}" syntax into strings

var greeting = „Hello”;
`${greeting} world!`

• classes – it’s just the additional syntax that uses a prototype objects’ mechanism in JavaScript in such way it’s easier to define modules by using the classes template similarly to other languages

class User extends Person {
constructor(skills) {
super(skills);
this.languages = [];
}
getLanguages() {
return this.languages;
}
}

• destructuring – assigning variable based on the pattern

var [a, b] = [1, 2];

• let – it’s the declaration of the variable available within the block (contrary to var, which creates a variable accessible in the function it was declared in)
• const - setting a constant which in case of modification’s attempts will throw the TypeError exception
• maps – a new type of data structure. Speaking shortly, these are objects that as a clue can take not only a string of characters but also any type of data. There’s also a variation of this structure called Weakmaps – in this case, only other objects can be keys and there’s a difference in memory allocation (garbage collector)
• sets – an array which values are always unique (duplicates are being ignored); similarly to Maps, there’s also WeakSets variation

ES6: what’s next?

The functionalities mantioned above are in fact just the tip of the iceberg – the specification introduces way more functionalities and improvements, but the explanation of them is beyond the scope of this short entry.

If you want to delve into the topic I highly recommend "ES6 & Beyond book" from the series "You don’t know JS" by Kyle Simpson, available here.

The current support for browsers, environments and transpilers can be checked up here.