ES6 JavaScript features

You've probably read a few things about ES6 and the updated JavaScript. Of course not all JS engines support it yet, but if you are developing on Node, then you'll probably be using the babel transpiler to downgrade your code. More and more IDES are supporting this new syntax (although not the Apps Script one), so I thought I should create a few articles on some of the changes to go along with the increasing number of examples on the site that feature the new syntax.

Is it a good thing?

Some of the changes are significant - such as block scope variables with let and readonly variables with const. Others are superuseful such as `text ${substitution} within ${tickmarks}', and others just let you write more concise code by getting rid of unnecessary fluff. In this article, we'll look at how the arrow syntax can be used to define functions. 


Example


Take a look at this simple timer function that returns a resolved promise when done.
const handyTimer = (ms, packet) => new Promise((resolve, reject)=>setTimeout(()=>resolve(packet), ms));

How do you think it compares to the 'old way'
var handyTimer = function  (ms,packet) {
    
    return new Promise (function (resolve, reject) {
        setTimeout (function () {
            resolve (packet);
        }, ms);
    });
};

The key points are
  • no need for the function keyword - function xyz (a,b) {return x;} - becomes (a,b) => x;
  • no need for {} around the body or a return keyword, if there's just one statement in the function. 
Now lets use it, using the new syntax - run something, wait a bit, do something else, show the final result
doSomethingAsync()
  .then((result)=>handyTimer(2000,result))
  .then((result)=>doSomethingElse(result))
  .then((result)=>console.log(result));

and the same thing with the old syntax
doSomethingAsync()
  .then(function (result) { 
     return handyTimer(2000,result);
   })
  .then(function (result) {
     return doSomethingElse (result);
  });
  .then(function (result) {
     console.log(result));
  });

But of course if you do all that, but with callbacks instead of promises, you end up with a mess, even with just a couple of callbacks like this.
doSomethingAsync (function (result) {
    setTimeout (function () {
        doSomethingElse (result, function (otherResult) {
            console.log (otherResult);
        }) 
     }, ms);
})

And I'm not going to even bother with error handling in the old style, since it's rather nice with the new syntax, but horrible in the old style.
doSomethingAsync()
  .then((result)=>handyTimer(2000,result))
  .then((result)=>doSomethingElse(result))
  .then((result)=>console.log(result))
  .catch((error)=>console.log('something terrible happened',error));

Let me know if you have questions and want some more stuff on ES6. 

For more like this, see Google Apps Scripts snippets. Why not join our community , follow the blog, twitter, G+ .You want to learn Google Apps Script?

Learning Apps Script, (and transitioning from VBA) are covered comprehensively in my my book, Going Gas - from VBA to Apps script, available All formats are available now from O'Reilly,Amazon and all good bookshops. You can also read a preview on O'Reilly

If you prefer Video style learning I also have two courses available. also published by O'Reilly.
Google Apps Script for Developers and Google Apps Script for Beginners.



Comments