How do you handle asynchronous behavior inside a class constructor in JavaScript?

Short Answer

You don't!

Long Answer

I was asked this question during a technical interview for my first full-time software engineering position. To tell you the truth, I did not know the answer but courageously stumbled into the right place. I am writing this post in hopes that it can help someone else who may end up with the same question someday. And I wanted to do the research to be confident in the answer.

A constructor in JavaScript returns an instance of a class. An asynchronous function returns a promise. If a constructor returns a specific class, but an asynchronous function returns a promise, a constructor in JavaScript must therefore be synchronous preventing it from using await or other asynchronous behavior.

Although you cannot make a constructor asynchronous there are common workarounds. The most idiomatic is to use “Factory Methods”. If you are a Java developer, you have certainly seen this pattern before. A Factory method (or function in the JS context) works as a wrapper around a constructor. This function can be asynchronous and thus handle your async and await calls. Once the asynchronous data is retrieved, it can be passed into a constructor and returned.

Class MyClass {
    constructor (data) {
        this.data = data;
    }
    // Constructor
    Static async create () {
        const data = await someAsyncFunction();
        return new MyClass(data);
    }
}

// Example usage
async function main() {
    const myObject = await MyClass.create();
    // do something
}
main();

If the factory method does not work for you, another common approach is the Initialization Method. This is like the Factory Method in reverse. First you create the class and then you asynchronously let it load in the data later. What this means is instead of awaiting that asynchronous call, you just call it explicitly in the end of your constructor and let it resolve when it can.

For example:

Class MyClass {
	constructor () {
		this.data = null; // Start out null
		this.initialize();
	}
	async initialize () {
		this.data = await someAsyncFunction(); // now set the data
	}
}

// Usage
async function main () {
	const myObject = new MyClass();
	// Do whatever you want!
	// You may have to call `await myObject.initialize()` to guarantee the data is ready
}

The drawback to this approach is you now need to explicitly call await myObject.initialize to guarantee the data is ready. This means initialize may be called twice. You could add a check like this to prevent that:

async initialize () {
    // only set data if not already set
    if (!this.data) this.data = await someAsyncFunction(); 
}

This will allow you to only initialize once, so you won’t make a redundant async call, but you still need to wait. Using the factory method generally will be cleaner. But in some use cases, like lazy loading a UI component, the initialize method might work well. In a lot of cases, frameworks with state management like React or Lit Elements handle this for you.

I hope this helps someone faced with a similar interview question to me!

Enjoyed this article? Subscribe to the RSS Feed!