This post gives you an idea of what the code looks like in ECMAScript 6. This post doesn’t cover ever feature. But you will learn about how ECMAScript 6 relates to:
- Arrow Functions and Lexical this
- Default Function Parameters
- Arrow functions
Special thanks to Axel Rauschmayer for many of the snippets.
I found two great articles that I am pulling information from:
Today: function scope
In the code, you see line 3 ,
var tmp = x; where tmp is available outside its block.
EC6: block scope using let, const
let, which is like
var, except for the fact that it is block scoped instead of function scoped.
const behave similarly in the sense that both are block scoped, but with
const, the values are read-only and cannot be re-declared later on.
Arrow Functions and Lexical
Linq uses the arrow (
=>) operator uses and expression called a lambda expression. In ECMAScript 6, there is the idea of arrow functions, which seems to me to be similar. It looks like this:
In the post on Using the ‘this’ Keyword I described some of the issues around using
this. You can use the arrow function so do something similar to
var that = this;
Default Function Parameters
For those of you familiar with C# or TypeScript, you will instantly recognize the ide oa default parameters.
In ECMAScript 6 the default parameters are defined when the functions are defined.
ECMAScript 6 implements classes with minimal class declaration syntax that can be extremely important to distinguish classes and functions.
extends keyword to derive from a parent class, then use the
super keyword to call the parent class.
In programming languages, modules perform isolated discrete functions and are independent of one another. This helps to not only build reusable components across projects, but also keeps errors isolated to the parts related to the current project.
Lots of discussions in my blog about modules, such as Asynchronous Module Definition (AMD) I am a big fan.
You can name
exports to be used by other modules. For example:
default provides a way to export a function. For example:
export default a class.
And there are more features on the way, such as:
- Rename imports.
- Module IDs are configurable (default: paths are relative to importing file.
- Programmatic (conditional) loading of modules.
- Module loading is configurable.
Object.assign works in a way similar to
_.extend() from Underscore.js, which copies all of the properties in the source objects over to the destination object, and return the destination object.
Array.prototype.forEach(). It works for iterables. For example:
You learned about Promises in several posts:
- Asynchronous Programming Using Promises
- Promises for Asynchronous Operations Using jQuery
The ECMAScript 6 implementation will look familiar for the user of Q. If you are using jQuery, it will look a bit different. As a producer, you create a promise and send a result
A promise is always in either one of three (mutually exclusive) states:
- Pending: the result hasn’t been computed, yet
- Fulfilled: the result was computed successfully
- Rejected: a failure occurred during computation
A promise is settled (the computation it represents has finished) if it is either fulfilled or rejected. A promise can only be settled once and then stays settled. Subsequent attempts to settle it have no effect.
As a consumer of
promise, you are notified of a fulfillment or a rejection via reactions – callbacks that you register with the method
- Use ECMAScript 6 Today
- ECMAScript Compatibility Table
- ECMAScript 6 support in Mozilla
- Draft specification for ES.next
- ECMAScript 6 Promises(2/2): The API