Execution Mechanism Analysis of Async Functions Without Await in JavaScript

Basic Execution Mechanism of Async Functions

In JavaScript, async functions are designed to simplify the handling of asynchronous operations, but their execution behavior varies significantly depending on the presence of await expressions. According to the explicit statement in MDN official documentation: An async function can contain an await expression, which pauses the execution of the async function and waits for the resolution of the passed Promise, then resumes the async function's execution and returns the resolved value.

Synchronous Execution Characteristics Without Await

When an async function contains no await expressions internally, the function execution remains completely synchronous. This means the function body executes in normal synchronous code order without any asynchronous pauses or intervention from the event queue. This characteristic can be clearly demonstrated through the following comparative experiment:

// Define computation-intensive function
function someMath() {
  for (let i = 0; i < 9000000; i++) { 
    Math.sqrt(i**5) 
  }
}

// Define delayed Promise
function timeout(n) {
   return new Promise(cb => setTimeout(cb, n))
}

// Async function without await
async function a() {
  someMath()
  console.log('in a (no await)')
}

// Async function with await
async function b() {
  await timeout(100)
  console.log('in b (await)')
}

// Test function calls
function testA() {
  console.log('clicked on a button')
  a()
  console.log('after a (no await) call')
}

function testB() {
  console.log('clicked on b button')
  b()
  console.log('after b (await) call')
}

When executing testA(), the console output sequence is: clicked on a button → in a (no await) → after a (no await) call. This indicates that function a executes completely synchronously, with both the someMath() computation and log output within the function body completing before subsequent code.

Asynchronous Execution Behavior With Await

In contrast, when executing testB(), the output sequence is: clicked on b button → after b (await) call → in b (await). Here, a clear order reversal occurs because await timeout(100) causes function execution to pause, allowing the subsequent console.log('after b (await) call') to execute before the log within the function body.

The essence of this behavior lies in how await divides the function body into multiple microtask phases. Specifically:

async function example() {
  console.log('synchronous part')
  await somePromise
  console.log('asynchronous resumption part')
}

Is equivalent to:

function example() {
  console.log('synchronous part')
  return somePromise.then(() => {
    console.log('asynchronous resumption part')
  })
}

Analysis of Practical Application Scenarios

In actual development, conditional use of await is a common requirement. Consider the following component initialization scenario:

async function initializeComponent(stuff) {
   if (stuff === undefined) {
      stuff = await getStuff()
   }
   // Component initialization logic

   if (/* Context has been blocked */) {
       renderComponent() // Re-render if stuff had to be loaded
   }
}

// Usage pattern
initializeComponent()
renderComponent()

In this scenario, when the stuff parameter is already provided, the function internally doesn't execute await, keeping the entire function synchronous, and renderComponent() executes immediately. When stuff needs to be obtained from an asynchronous source, await causes the function to execute asynchronously, requiring additional mechanisms to ensure correct rendering timing.

Comparison with Other Languages

It's worth noting that JavaScript's async/await mechanism differs significantly from implementations in other languages. Taking Rust as an example, Futures require explicit polling or awaiting to execute, which is completely different from JavaScript Promise's automatic scheduling mechanism. In Rust, even if a function is marked as async, the function body won't execute at all without proper executor polling.

Best Practice Recommendations

Based on the above analysis, developers are recommended to:

1. Clearly define synchronous/asynchronous boundaries in functions and document them explicitly
2. For conditional asynchronous operations, consider returning a unified Promise interface
3. Avoid performing time-consuming operations in async functions without await to prevent blocking the main thread
4. Use conditional await cautiously in scenarios requiring strict execution order

By deeply understanding the execution mechanism of async functions, developers can more accurately predict and control code behavior, writing more reliable and efficient asynchronous applications.