Why Can\'t Async/Await Be Used in JavaScript Constructors?

Asynchronous Invocation within Constructors: An Impossible Endeavor

Asynchronous programming using async/await has become commonplace, but its application within a constructor function raises an intriguing challenge. Consider the following code snippet:

customElements.define('e-mail', class extends HTMLElement {
  async constructor() {
    super()

    let uid = this.getAttribute('data-uid')
    let message = await grabUID(uid)

    const shadowRoot = this.attachShadow({mode: 'open'})
    shadowRoot.innerHTML = `
      <div>
<p>Unfortunately, this code fails with the error message:</p>
<blockquote>Class constructor may not be an async method</blockquote>
<p>The reason for this is fundamental: a constructor function is responsible for initializing and returning an object instance. However, the async keyword converts a function into a promise generator, resulting in the function returning a promise instead of the object itself. This creates an inherent conflict.</p>
<p><strong>Unveiling the Impossibility</strong></p>
<p>The misconception arises from the perceived similarity between async/await and promises. While async/await provides syntactic sugar for working with promises, it does not alter the underlying behavior. Promises represent asynchronous operations that either resolve or reject to produce a value.</p>
<p>In contrast, a constructor function must return the object that is being constructed. This immutable requirement cannot be reconciled with the promise-producing behavior of an async function.</p>
<p><strong>Workaround Strategies</strong></p>
<p>To overcome this limitation, consider employing one of the following design patterns:</p>
<ol><li>
<strong>Initialization Function (init())</strong>: Introduce an initialization function to perform asynchronous tasks. The object instance can only be used within this function.</li></ol>
<pre class="brush:php;toolbar:false">var myObj = new myClass();
myObj.init(function() {
    // inside here you can use myObj
});

2. Builder Pattern: Instead of calling the constructor directly, use a builder function to create an object instance. The builder function returns a promise that resolves to the object instance once all asynchronous tasks are complete.

myClass.build().then(function(myObj) {
    // myObj is returned by the promise, not by the constructor or builder
});

// with async/await:
async function foo () {
    var myObj = await myClass.build();
}

Note that while the examples above use promises in the builder pattern, callbacks can also be used.

Static Function Considerations

It is important to note that the this keyword within static functions does not refer to the instantiated object but to the class itself. Therefore, you cannot call methods directly within static functions. Instead, refer to methods using the class name or declare them as static methods.