6 reasons Web developers need to learn JavaScript ES6 now

If you’re a developer, you’ve probably heard a little bit about ECMAScript 6 (ES6) already, though at first glance it might seem a little confusing. What it really boils down to is this: it’s the next version of JavaScript, which delivers new language features you’ll be able to use long-term.

ES6 support is coming along well in major desktop browsers, with Chrome at more than 90 percent compatibility, Edge at 80 percent and Safari at 54 percent. On mobile there’s just 31 percent of ES6 support for Android 5.1 users and 54 percent for iOS users.

That said, you can still use ES6 features now by using a pre-processor like Babel to cross-compile your JavaScript back to ES5 compatible code for older browsers, meaning there’s no reason to put off learning about it.

Here’s the features of ES6 I’m looking forward to and am actively trying to take advantage of.

Variables and constants

JavaScript is finally getting constant supports, so you can define an immutable number in your code that stays consistently the same over time — if you later try to assign something to that constant, you’ll get an error.

This is valuable when you have a known number that can’t change over time and your application relies on it being the same.

Another new feature called ‘let’ offers a new way of defining variables in JavaScript. You’re probably used to defining them with ‘var’ but the difference is subtle: scope.

When you define a variable with ‘let’ it’s scoped to the exact block it’s inside, not globally. You can read more about let and const here.

Arrow functions

A major new addition to ES6 allows you to declare a function using a simple `=>` instead of the traditional function expression. It might seem confusing at first, but it has clear benefits for brevity in larger code bases:

The arrow function behaves differently from the function calls you’re accustomed to in that it inherits ‘this’ and ‘arguments’ from the context directly surrounding it, rather than scoping those within themselves.

Modules

Another interesting new concept in ES6 called Modules is something that JavaScript developers have been using for years.

Some projects, like Webpack, let you take advantage of modularization now. But, ES6 delivers it as part of native JavaScript in the browser for the first time.

The addition of modularization is a huge reason to start learning ES6 now, as it’ll change the way you work for good if you’re not already using modules.

ES6 modules are stored in individual files and there can only be one module per file, which still uses the .js file extension.

Each module can have multiple named exports and can export a single default, such as a function. There are a lot of intricacies to what you’re able to do with Modules, which are covered in depth here.

The most important thing to know is modules can help you clean up your code into easy to maintain chunks and the examples here should help you understand the benefits of easier to maintain code. 

Spread

It’s very simple, but the spread operator is a hugely convenient syntax that’s being added to expand an array wherever it’s called. You simply use ‘…’ to expand the array and instead of needing to actually extract the values of the array it’s done for you.

It’s not an earth shattering change, but it’s a way to stop using common hacks, as described by Mozilla’s developer documentation.

For-of

Iterators are finally getting improvements, so you’re able to iterate through variables with less messing around. For-in has existed for a long time, but for-of is being added in ES6:

The example, which is from Strongloop, shows that the new for-of loop only outputs list values rather than all properties stored on the object.

Classes

It’s somewhat unbelieveable it’s actually happening but JavaScript is getting real support classes with the release of ES6 even though they were hotly debated.

ES6 classes encourage the prototype-based object oriented pattern and they bring support for inheritance, constructors, static methods and more.

Before you use anything

Make sure to check that what you’re leveraging is widely supported and use a pre-processor to ensure backward compatibility for older browsers.