How to Create an Async Function via “new Function”

By  on  

One thing I love about JavaScript is that there are many ways to accomplish the same task, one such example being creating functions. There are several patterns for functions; one of the last you see used is the new Function method:

/* new Function(arg1, arg2 (...), body) */
const myFunction = new Function('users', 'salary', 'return users * salary');

What if you want to use this new Function method to create an async function? You need to be a bit clever, and thanks to MDN, we have an answer:

// Shim for allowing async function creation via new Function
const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;

// Usage
const fetchPage = new AsyncFunction("url", "return await fetch(url);");
fetchPage("/").then(response => { ... });

The usage of Object.getPrototypeOf(async function(){}).constructor is super clever, as a native AsyncFunction doesn't exist. I don't believe that I've ever used the new Function pattern but that doesn't mean you don't! And now you can make them asynchronous!

Recent Features

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    Introducing MooTools LazyLoad

    Once concept I'm very fond of is lazy loading. Lazy loading defers the loading of resources (usually images) until they are needed. Why load stuff you never need if you can prevent it, right? I've created LazyLoad, a customizable MooTools plugin that...

  • By
    Submit Button Enabling

    "Enabling" you ask? Yes. We all know how to disable the submit upon form submission and the reasons for doing so, but what about re-enabling the submit button after an allotted amount of time. After all, what if the user presses the "stop"...

Discussion

  1. Gustavo

    fetch() is already an async function, can you change your example?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!