How to Make Synchronous Function Asynchronous in JavaScript

To make a synchronous function asynchronous in JavaScript, wrap its logic inside a Promise or declare it as an async function and use await for asynchronous operations. You can also use setTimeout to delay execution and simulate async behavior.

Syntax

Here are common ways to make a synchronous function asynchronous:

• Async function: Use async keyword before the function to make it return a Promise automatically.
• Promise wrapper: Wrap the synchronous code inside a new Promise and resolve it asynchronously.
• setTimeout: Use setTimeout to delay execution and simulate async behavior.

javascript

async function asyncFunction() {
  // asynchronous code here
  return 'done';
}

function promiseFunction() {
  return new Promise((resolve) => {
    // synchronous code
    resolve('done');
  });
}

function timeoutFunction() {
  setTimeout(() => {
    console.log('done');
  }, 0);
}

Example

This example shows a synchronous function converted to asynchronous using async/await and Promise. It simulates a delay with setTimeout to mimic async behavior.

javascript

function syncFunction() {
  return 'Hello';
}

// Convert to async using Promise
function asyncFunction() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Hello');
    }, 1000); // simulate 1 second delay
  });
}

async function run() {
  console.log('Start');
  const result = await asyncFunction();
  console.log(result);
  console.log('End');
}

run();

Output

Start
Hello
End

Common Pitfalls

Common mistakes when making synchronous functions asynchronous include:

• Not returning a Promise or missing async keyword, so the function remains synchronous.
• Forgetting to use await when calling async functions, causing unexpected behavior.
• Using setTimeout without wrapping in a Promise, which can make it hard to handle results.

javascript

function wrongAsync() {
  // This looks async but returns undefined immediately
  setTimeout(() => {
    console.log('Done');
  }, 1000);
}

async function rightAsync() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Done');
    }, 1000);
  });
}

async function test() {
  wrongAsync(); // No way to wait for this
  const result = await rightAsync();
  console.log(result); // Prints 'Done' after 1 second
}

test();

Output

Done

Quick Reference

Summary tips to convert synchronous functions to asynchronous:

• Use async keyword to declare async functions.
• Wrap synchronous code in new Promise and resolve asynchronously.
• Use await to pause execution until Promise resolves.
• Use setTimeout inside Promises to simulate delays.
• Always return a Promise from async functions for proper chaining.

Key Takeaways

Use async keyword or Promise to make functions asynchronous in JavaScript.

Always return a Promise or use async functions to enable awaiting results.

Use setTimeout inside Promises to simulate asynchronous delays.

Forget to await async calls can cause unexpected synchronous behavior.

Wrapping synchronous code in Promises helps integrate with async workflows.