CODEWITHSUNDEEP
ecmascript-6ecmascript-2016
N Sharma
N Sharma

Reputation: 34487

What is this syntax in ES6 or ES7?

I came across this syntax which I believe is ES6 or ES7. What do these lines of code do?

module.exports = async (taskData) => {
  // do stuff
}

Upvotes: -1

Views: 1224

Answers (3)

Andrew Li
Andrew Li

Reputation: 57934

It exports an asynchronous arrow function which takes in an argument taskData. The asynchronous function is new syntax that is set to come with this year's release, ES2017, called the async function, though the rest of the code is ES6 (ES2015) and ES5 (ES2011). It goes hand-in-hand with await and returns a Promise.

It's primarily useful to clean up promise chains, where the code can get really messy. Consider this example using promises, found here:

function loadStory() {
  return getJSON('story.json').then(function(story) {
    addHtmlToPage(story.heading);

    return story.chapterURLs.map(getJSON)
      .reduce(function(chain, chapterPromise) {
        return chain.then(function() {
          return chapterPromise;
        }).then(function(chapter) {
          addHtmlToPage(chapter.html);
        });
      }, Promise.resolve());
  }).then(function() {
    addTextToPage("All done");
  }).catch(function(err) {
    addTextToPage("Argh, broken: " + err.message);
  }).then(function() {
    document.querySelector('.spinner').style.display = 'none';
  });
}

The example above fetches a story, and iterates through all the chapters and adds them to the HTML. It works, but it can be very messy and hard to follow if you've got lots of stuff to do. Instead, you can use async and await, which is just syntactic sugar, but makes it much more clean:

async function loadStory() {
  try {
    let story = await getJSON('story.json');
    addHtmlToPage(story.heading);
    for (let chapter of story.chapterURLs.map(getJSON)) {
      addHtmlToPage((await chapter).html);
    }
    addTextToPage("All done");
  } catch (err) {
    addTextToPage("Argh, broken: " + err.message);
  }
  document.querySelector('.spinner').style.display = 'none';
}

The above is (in my opinion) way more clean and easy to follow, versus the messy promise chain in the first example.

Upvotes: 3

Alex Mann
Alex Mann

Reputation: 772

Async await syntax is set to be supported when ES2017 is released. Your code is essentially a function that returns a promise. Additionally, the async keyword allows for syntactic sugar when working with promises by use of the await keyword.

The => part is called an arrow function which again is a syntactic sugar for the most part. It is part of ES6.

Your function

module.exports = async (taskData) => {
  // do stuff
}

... is almost the same as:

module.exports = function(taskData) {
  return new Promise(function() {

    // do stuff
    if (err) reject(err)
    resolve(your return value)
  }
}

Note: the main difference is just the binding of the this keyword via the arrow function.

Upvotes: 1

Suraj Rao
Suraj Rao

Reputation: 29614

This is an async function which is set to return Promise as @Andrew says. It is using Arrow Function syntax.

()=>{}

This function is in ES6 and does not define its own this context and any use of this will refer to the outer scope.

Upvotes: 1

Related Questions