ECMAScript 7 - What to expect?

Now that ES6 has been officially accepted, it’s time to look forward to the next iteration of JavaScript, which is ECMAScript 7. There are many new and exciting features in ES7.

Support for asynchronous programming

Of all the new features in ES7, the most exciting one, in my view, is the addition of async and await for asynchronous programming, which occurs quite often, especially when you're trying to build applications using Node.js. To explain async and await, it's better you first see an example. Let’s say you have three asynchronous operations, each one dependent on the result returned by the previous one. There are multiple ways you could do that. The most common way to do this is to utilize callbacks. Let’s take a look at the code:

myFirstOperation(function(err, firstResult){
  mySecondOperation(firstResult, function(err, secondResult){
      myThirdOperation(secondResult, function(err, thirdResult){
        /*
        Do something with the third result
        */
      });
  });
});

The obvious flaw with this approach is that it leads to a situation known as callback hell. The introduction of promises simplified async programming greatly, so let’s see how the code would look using promises (which were introduced with ES6):

myFirstPromise()
.then(firstResult => mySecondPromise(firstResult))
.then(secondResult => myThirdPromis(secondResult))
.then(thirdResult =>{
  /*
  Do something with thrid result
  */
}, err => {
  /*
  Handle error
  */
});

Now, let’s see how to handle these operations using async and await:

async function myOperations(){
  const firstResult = await myFirstOperation();
  const secondResult = await mySecondOperation(firstResult);
  const thirdResult = await myThirdOperation(secondResult);
  /*
  Do something with third result
  */
};

try {
  myOperations();
} catch (err) {
  /*
  Handle error
  */
}

This looks just like synchronous code? What?

Exactly! The use of async and await makes life much simpler, by making async functions seem as if they are synchronous code. Under the hood, though, all of these functions execute in a nonblocking fashion, so you have the benefit of nonblocking async functions, with the simplicity and readability of synchronous code. Brilliant!

Object rest and Object spread

In ES6, we saw the introduction of array rest and spread operations. These new additions make it easier for you to combine and decompose arrays. ES7 takes this one level further by providing similar functionality for objects.

Object rest

This is a extension to the existing ES6 destructuring operation. On assignment of the properties during destructuring, if there is an additional ...rest parameter, all the remaining keys and values are assigned to it as another object. For example:

const myObject = {
  lorem : 'ipsum',
  dolor : 'sit',
  amet : 'foo',
  bar : 'baz'
};

const { lorem, dolor, ...others } = myObject;

// lorem === 'ipsum'
// dolor === 'sit'
// others === { amet : 'foo', bar : 'baz' }

Object spread

This is similar to object rest, but is used for constructing objects instead of destructuring them:

const obj1 = {
  amet : 'foo',
  bar : 'baz'
};

const myObject = {
  lorem : 'ipsum',
  dolor : 'sit',
  ...obj1  
};

/*
myObject === {
  lorem : 'ipsum',
  dolor : 'sit',
  amet : 'foo',
  bar : 'baz'
};
*/

This is an alternative way of expressing the Object.assign function already present in ES6. In the precding code, myObject, is a new object, constructed using some properties of obj1 (there is no reference to obj).

The equivalent way of doing this in ES6 would be:

const myObject = Object.assign({
  lorem : 'ipsum',
  dolor : 'sit'
}, obj1);

Of course, the object spread notation is much more readable, and the recommended way of assigning new objects, if you choose to adopt it.

Observables

The Object.observe function is a great new addition for asynchronously monitoring changes made to objects. Using this feature, you will be able to handle any sort of change made to objects, along with seeing how and when that change was made.

Let's look at an example of how Object.observe will work:

const myObject = {};

Object.observe(myObject, (changes) => {
  const [{ name, object, type, oldValue }] = changes;
  console.log(`You tried to ${type} the ${name} property`);
});

myObject.foo = 'bar';
//You tried to add the foo property

Caveat

Although this is a good feature, as of this writing, Object.observe is being tagged as obsolete, which means that this feature could be removed at any time in the future. While it’s still ok to play around and experiment with this, it is recommended not to use it in production systems and larger applications.

Additional utility methods

There have been additional methods added to the String and Array prototypes:

1. Array.prototype.includes: This checks whether an array includes an element or not:

    [1,2,3].includes(1); //true

2. String.prototype.padLeft and String.prototype.padRight:

   'abc'.padLeft(10); //"abc       "
   'abc'.padRight(10); //"       abc"
   

3. String.prototype.trimLeft and String.prototype.trimRight:

    'n t   abc n  t'.trimLeft(); //"abc n  t"
   'n t   abc n  t'.trimRight(); //"n t   abc"
   

Working with ES7 today

Many of the features mentioned here are still in the proposal phase, but you can still get started using them in your JavaScript application today!

The most common tool used to get started is babel. In case you want to make a browser application, babel is perfect for compiling all of your code to regular ES5. Alternatively, you can use the many babel plugins already available to use babel with your favorite toolbelt or build system. In case you have trouble setting up your project, there are many yeoman generators to help you get started.
If you are planning to use ES7 to build a node module or an application in node, there is a yeoman generator available for that as well.

About the author

Soham Kamani is a Full stack web developer and electronics hobbyist. He is especially interested in JavaScript, Python, and IOT. He can be found on Twitter at @sohamkamani and at sohamkamani.com.