Asynchronous array operations in ES7 JavaScript async/await functions

A glaring problem with the most excellent async/await feature in JavaScript is all the existing coding structures that only work with synchronous code. In an async/await function it's trivially easy to write a simple "for" loop that contains whatever async/await calls you want. But as soon as you try "Array.forEach" with an async callback function it will fail miserably. That's because this function, like so many existing interfaces which take a callback function, assumes the callback is synchronous. Instead of waiting for the Promise to resolve, it plows on ahead executing the next iteration.

To take an example, consider this pale cheap attempt to duplicate the Unix "du" command:


async function du(filez) {
    var total = 0;
    filez.forEach(async (filenm) =&gt; {
        var stats = await fs.statAsync(filenm);
        total += stats.size;
    });
    return total;
}

After you start writing async functions it's natural to want to write this. The syntax for an async callback function is as shown here, and each loop iteration will wait for the "statAsync" function to finish executing. BTW -- this relies on the "fs-extra-promise" module, which provides functions equivalent to the "fs" module but producing Promise objects.

If you run this with a suitable array, the value for "total" is as shown here:


$ node --harmony-async-await du access.js 2files.js
0

The problem is what I stated above -- the "forEach" operation does not know to wait for the async function to finish. It just plows on, and its work finishes long before any of the callback functions execute. Inserting some debugging printout demonstrates that:


$ node --harmony-async-await du access.js 2files.js
0
access.js 523 523
2files.js 331 854

The total was printed before the loop iterations ran.

It's possible to fix this problem by making the code ugly:


async function du(filez) {
    var total = 0;
    await Promise.all(filez.map(async (filenm) =&gt; {
        var stats = await fs.statAsync(filenm);
        total += stats.size;
        console.log(`${filenm} ${stats.size} ${total}`);
    }));
    return total;
}

The attraction of the async/await feature is to make our code beautiful. We have here code that works, but at the cost of uglification.

Enter the arraync package

A newly created package, https://www.npmjs.com/package/arraync, gives us an excellent solution. It is a Polyfill adding several functions to the Array object.

To install the module:


$ npm install arraync --save

Then in the code add:


require('asyncnc');

Then ... we can write our function as so:


async function du(filez) {
    var total = 0;
    await filez.forEachAsync(async (filenm) =&gt; {
        var stats = await fs.statAsync(filenm);
        total += stats.size;
        console.log(`${filenm} ${stats.size} ${total}`);
    });
    return total;
}

This is exactly what we had earlier, with the addition of an "await" keyword before the loop. In other words, this exactly fulfills the code we naturally want to write.

The arraync package provides a full complement of async-ified Array functions. They're automatically attached to the Array prototype for you.

The code shown here is an example out of a soon-to-be-released book on asynchronous programming in JavaScript. The book focuses on Promises, Generators and async/await. Keep an eye on this blog for an announcement.

«««««« Doctor Who: Silence in the Library, and Forest of the Dead Doctor Who: Silence in the Library, and Forest of the Dead »»»»»»