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.
Europe, are you ready?
TNW Conference is back for its 12th year. Reserve your 2-for-1 ticket voucher now.
Here’s the features of ES6 I’m looking forward to and am actively trying to take advantage of.
Variables and constants
This is valuable when you have a known number that can’t change over time and your application relies on it being the same.
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.
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.
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.
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.
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.
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.