What’s new in ECMAScript 6?

For Starters, What’s ECMAScript 6?

There was a time, back in 1997, when JavaScript adopted a newly created standard known as ECMAScript, created by an organization known as Ecma International.

Moving on into the future, the standard had received multiples revisions, being the last big one released in June 2009, ECMAScript 5.

Once again, in June of this year, ECMAScript 6 (or just ES6) was published and adopted by JavaScript. In other words, new features everybody!

A lot has been written already about all these new changes, so we are going to focus only on the stuff that we think will really help us to build better applications faster, or to improve existing ones, without causing too much of a hassle.

Does It Actually Work?

JavaScript is being currently used in a bazillion of internet pages nowadays, so changing it is not a really straightforward thing to do. Moreover, modern browsers have to deal with internal modifications in order to apply the features of the new standard, therefore we need to wait until their new implementations are ready before being able to use ECMAScript 6 at it’s full extent.

JavaScript is being currently used in a bazillion of internet pages nowadays, so changing it is not a really straightforward thing to do. Moreover, modern browsers have to deal with internal modifications in order to apply the features of the new standard, therefore we need to wait until their new implementations are ready before being able to use ECMAScript 6 at is full extent.

But fear not! You can still use the previous standard ECMAScript 5, thanks to the backward compatibility of ES6. Thus your old apps written in ES5 will still work when the new standard reigns over us.

Because new is always better. Just kidding, except on this case, it actually is! Besides, thanks to transcompilers such as Babel, you can always transform all your code under ES6 to ES5 at any time (yay for backwards portability!).

So, start learning the new standard right away to make full use of the new features and changes, but don’t forget your roots… ES5 is still being used worldwide, and it will be for many years to come.

Alrighty Then, So What’s New?

As it was mentioned earlier, ES6 introduces lots of changes. Some of them are:

• block scoping,
• for..of loops,
• generators,
• iterators,
• classes,
• modules,
• arrow functions,
• binary data,
• promises,
• collections, and
• proxies.

All these features are obviously backwards compatible. In layman terms, these features are like bread. A loaf of bread could be the single feature that we are using in ES6, but it can be discomposed on its separated ingredients and created in ES5. That’s actually what the transcompiler does, and what ES6 does is related to what is known as making the syntax sweeter in the programming world.

For a big ass list with all the new features of ES6 check this out. Though, as we said earlier, not all browsers are ready yet to support the whole pack of features.

In this article we are only covering a few of them, starting with block scoping. By the way, you can try all our snippets in es6fiddle, just copy and paste the code.

The scope of a variable is where it’s binding is valid, i.e. where the variable can be used. Usually, the only way to declare variables in JavaScript is via the keyword var, which sets a function-level (or global) scope. This could be a bit confusing to programmers with a background in languages such as C++ or Java, where block scoping is the way to go.

Here is where ES6 shines, by bringing alongside the keywords let, which allows you to declare a real block scope variable; and const, which follows the same rules as the former, except that the value is immutable so we can only assign to it once.

Here is where ES6 shines, by bringing alongside the keywords let, which allows you to declare a realblock scope variable; and const, which follows the same rules as the former, except that the value is immutable so we can only assign to it once.

Template Strings

No more manual interpolation to get readable texts as we can now combine string variables using template strings:

Default Parameter Values

Simple and intuitive default values for function parameters, as in C++ and Python:

Introducing for..of

Opposed to for..in, which iterates over an object property names, for..of iterates over property values. This allows you another way to loop over iterable objects.

Generators

These generators functions are defined by using the keyword function* (yes, with the asterisk) and they return a Generator object. The basic syntax can be seen here, but it’s somewhat like this:

These generators functions are defined by using the keyword function* and they return a Generatorobject. The basic syntax can be seen here, but it’s somewhat like this:

While they look like normal functions, they work quite different from them.

1. The first time you use a generator, it doesn’t execute its body. Instead, it returns an iterator object for that function.
2. Every time the method next() of the generator is called, the function is executed until the first time the keyword yield is hit inside of it. In that moment, the method returns an object with two attributes: value (the value next to yield) and done (indicating whether the function has finished executing).
3. When you use the next() method again, it will start from the place it left, and the parameter you pass to it will replace the yield keyword of the previous return value.

Example:

As you can see it enables 2-way communication (between caller and function) and it allows to have functions that may be interrupted to do some necessary work (outside of it) before finishing.

Wrapping Up

In this article we’ve aimed to cover some of what we think are the most useful add-ons that ES6 includes. We may update this list in the future as we keep using the new standard, and we welcome any suggestion you might have.

If you like what you’re reading, and would like to work with us write to jobs at monits dot com with subject “Medium — Job opportunity”.