You are currently offline, so some features of this site may not work fully.

Your browser doesn’t support some of the latest CSS features used to build this site.

Read more about my usage of new CSS features.

ES-Whatever!

ECMAScript is coming along, fast.

It was a year or so ago I presented on the latest ES6 features, and stated in the talk that the Ecma TC39 board were going to release a version every year with whatever features were ready at the time - giving it a quicker turnaround so that browsers could start implementing the new standards ASAP.

Now I’ve had a little look at the latest standards, implemented a few cool new features of ES2016 and ES2017 and upgraded my transpilation tooling to cope with this mayhem.

As a side note, let’s stop talking about “ES6” now, and stick with the ESYYYY naming conventions! It was confusing for a while, but as there'll be a release each year now it makes a lot more sense:

`ES${new Date().getFullYear()}`
— Good joke, made it into my slides last year.

ES2016

Array.prototype.includes

Remember having to do this?:

if (arr.indexOf(str) !== -1) {
    // element exists in array
}

When I first encountered code like this I had no clue what it meant. The logic is there if you think about it carefully, but on first glance this looks nonsensical!

Fear not. A new array prototype method, includes has been implemented:

if (arr.includes(str)) {
    // includes!
}

Much better. Cleaner, more concise code. Great!

Exponentiation operator

Another implementation that gives cleaner, more readable code is the exponentiation operator:

let x = 2;
let squared = x ** 2; // instead of Math.pow(x, 2);
let cubed = x ** 3; // instead of Math.pow(x, 3);

Don’t be put off by the big word (that I can never spell), it means to the power of. Instead of using something like Math.pow(2, 2); you can quickly and easily use the exponentiation operator, again making your code that little bit nicer.


Updating your Babel build

Now how can you use all this cool new stuff!? Well, most browsers are adapting pretty quickly to the latest ECMAScript standards but if you find yourself having to support legacy browsers but want to write in the new-fangled way, here’s how.

If you’re already using Babel to transpile ES6 code, great. If not, here’s an ok talk you can watch to get a grasp of it…

The env preset

I’m now using the env preset with Babel which by default includes settings to transpile the Latest set of features. You can also override the config with an Autoprefixer-style targets object, specifying browsers you want to convert your code for compatibility.

Upgrade your npm build process like this:

npm remove babel-preset-es2015 -D
npm install babel-preset-env -D

Change your .babelrc or babel entry in package.json to include:

"presets": [
    "env"
]

…and give that a whirl.

Huzzah! You can now use new JavaScript features.

You may now proceed to level 2016.


TL;DR

The latest JavaScript features with examples and how to start using them in your code now, with Babel as a transpiler for non-supporting browsers.

It’s getting really fun to watch closely the progress and new proposals coming out - I feel like JavaScript is definitely maturing as a language and the speed that we’re seeing these features come out is getting to be so beneficial!

Further resources