Top 10 Most used ES2015 features
ECMAScript aka ES is a standardized specification for scripting languages. A few of the major implementations are JavaScript, Chrome V8, Chakra, and ActionScript. The 5th edition made its way in the year 1999 and it has been empowering browsers ever since. The 6th edition known as ES6 with an official name ‘ECMAScript 2015’ has introduced significant improvements and has also added new features. Here is the specification from ECMA.
Since most browsers don’t fully support the new ES6 features, we are compelled to use transpilers — to transform JavaScript to JavaScript. Check out the compatibility table for browsers progress in supporting ES6 features. ECMA plans to release new specifications each year. This means that browser vendors will always be in a mad chase to catch up. On the brighter side, transpilers will help fill in gaps with polyfills. Be it ES2016, ES2017 or ES2018, don’t fret, transpilers are here to stay.
ES2015 provides a plethora of features. If you are one of M Night Shyamalan’s Airbenders, you should definitely check out ECMAs spec. If you are like most of us, presenting to you — the top 10 most used ES6 features.
1. Classes
Classes offer syntactic sugar over prototype based inheritance. This single enhancement positions JavaScript to merge with conventional programming. If __proto__ or Person.prototype.speak sounds alien to you, let it remain that way; just use classes. They provide super() calls, instance and static methods.
2. Arrows
Shorthand to function declaration using => also known as ‘the fat arrow’. The biggest advantage of using Arrows is, of course, the conciseness but it actually shines at binding this for you. Gone are the days of self.that = this or .bind(this).
3. Template strings
With ES5, we formatted strings with dynamic value using + and quotes. This inspired templating libraries such as Handlebars and Mustache. With ES6+ template strings, you can rewrite the above displayFeatures method into:
The template strings can also be multiline. Also, the ${} is not limited only to variable names, any JS expressions can be used as well.
4. Object literals
Object literals known as POJO (Plain Old JS Object) has had a face lift. Objects with same property value can be written in shorthand ex) {isDeployed}. Compare this with a revealing module pattern usage return {isDeployed: isDeployed} Also, you can declare computed property names within the object literal instead of defining them outside. Finally, you can now define methods within an object literal with a shorthand { isDeployed() {}}
5. let, const
Hoisting — a terminology which inspired JS developers to conjure scoping questions with mysterious answers. The sands of time have put an end to such amusement with block level scoping. Now with ‘let’ keyword, you can achieve block level scoping. ‘Const’, like the name suggests is used to declare constants.
6. Rest, Spread, default
Rest and Spread, ‘…’ operator enhances es5 coding with an elegant DRY approach. Spread operators usefulness becomes apparent once you start using them in function calls;foo(bar, ...arguments) in array literals; [...params, 10, 20] and in object literals{...state} Redux reducers use spread operators extensively in reducers to copy the previous state to return a new immutable state. Rest Operator is the opposite of Spread, it offers a way to split an array to single arguments. Finally, Default operator enables us to now set default values right at the functional level parameter definition.Function foo(x, y=20){return x*y} // foo(1) == 20
7. Iterators
For an object to be iterable, it has to implement the iterable protocol. All it means is that the proto chain must have a ‘Symbol.iterator’ key. Built-in iterable’s are String, Array, TypedArray, Map and Set. Let’s assess Strings.
Symbol iterators can be used with custom object types as well. Once the iterator logic is implemented on the instance proto chain, the custom object can be iterated.
8. Generators
Generators are a new type of functions in ES6+. While the traditional function, once invoked, runs to completion, Generator functions can be paused and resumed. What sorcery?
function *runner() { let val = 1 + (yield “foo”); console.info(val)}
Once the JS interpreter arrives at the keyword ‘yield’, it pauses and waits for it to be resumed. On resume, it uses the inbound value and completes the rest of function. Clearly, this basic explanation demands a separate article.
9. Modules
Prior to ES6, 2 standards for writing modules were CommonJS and AMD (Asynchronous Module Definition). With ES6, JS officially supports modules. With the help of import and export keywords, you can write independent ES6 modules which can be imported and used by other modules. We can now do away with globals, enjoy faster compilation and more importantly leverage its compatibility with all environments (browser / non-browser).
10. Promises
Promises have arrived natively in JavaScript. Before native Promises, libraries like Q, when, WinJS, RSVP.js have provided plumbing for async operations and helped negate the infamous call back hell. Now with Promises, we have a standardized approach to implement async calls.
There you have it folks, the Top 10 Most used ES6 features.
Originally published at javascriptstore.com on August 25, 2017.
