2

I'm actually diving into the asyc/await part for the first time so I am having a hard time understanding it.

I know that async await is used to make a function run in an async manner but how, because as per the definition, the "await" keyword halts the execution of a function until the promise is resolved, and then executes the leftover code in the function. Isn't this a synchronous behaviour, because things are getting executed in order as they should be?

Feel free to help me out of my confusion or if I am wrong somewhere.

randomsizzler
  • 41
  • 6
  • 2
    async, but it looks synchronous https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function – evolutionxbox Jun 29 '22 at 09:54
  • "*Isn't this a synchronous behaviour*" - no, because it doesn't block other code outside of the function – Bergi Jun 29 '22 at 09:57
  • @Bergi so it only blocks the code inside the function? – randomsizzler Jun 29 '22 at 10:00
  • @randomsizzler Yes! Otherwise the function wouldn't be `async` – Bergi Jun 29 '22 at 10:01
  • 1
    "*The "await" keyword halts the execution of a function until the promise is resolved, and then executes the leftover code in the function. Isn't this a synchronous behaviour, because things are getting executed in order as they should be?* [No](https://jsbin.com/riyiduf/edit?js,console). You can see that *other code* also runs. [Compare with synchronous execution](https://jsbin.com/vilacak/edit?js,console) – VLAZ Jun 29 '22 at 10:01
  • To understand async/await you have to understand Promises. Additionally, understanding microtasks and macrotasks in JavaScript will help you understand even more _when_ (and with which priority) something asynchronous is going to execute. – danguilherme Jun 29 '22 at 10:01
  • @Bergi so if i don't use async and await, the execution of the other functions in my file would be halted until that specific functions isn't completely executed right? but what async and await does is, it allows the file to meanwhile run the other functions while it is busy completing that specific function – randomsizzler Jun 29 '22 at 10:16
  • @VLAZ does the above comment look good? – randomsizzler Jun 29 '22 at 10:16
  • @randomsizzler No, you can achieve the same with promises and/or callbacks, it's not the `async`/`await` syntax that does this. Either the function you call is synchronous (blocking), which means everything halts until it returns, or it's asynchronous, which means it returns immediately (and you can pause or do other things) and will call you back to resume your logic later. Whether that resumption happens via `await` or via a callback doesn't matter. – Bergi Jun 29 '22 at 10:20
  • @Bergi so ummm, the only benefit of async and await is that is halts the execution within the specific function until a promise is there and then continues to execute the leftover code in the function? – randomsizzler Jun 29 '22 at 10:30
  • The benefit is that you can write the code to look synchronous rather than use `.then` – evolutionxbox Jun 29 '22 at 10:30
  • @randomsizzler here are some links that should help with async/await: [What are asynchronous functions in JavaScript? What is "async" and "await" in JavaScript?](https://stackoverflow.com/q/62196932) | [When does async function actually return a pending promise?](https://stackoverflow.com/q/67769474) – VLAZ Jun 29 '22 at 10:31
  • @randomsizzler Yes, exactly. The same functionality would be achievable with plain `.then()` chaining, but `async`/`await` makes the code easier to read – Bergi Jun 29 '22 at 10:33

1 Answers1

4

Neither.

The async and await keywords are tools to manage promises.

Promises are a tool to manage asynchronous code.

If you mark a function as async then:

  • its normal return value is replaced with a promise that resolves to its normal return value.
  • you may use await inside it

If you use await on the left hand side of a promise, then the containing function will go to sleep until the promise settles. Execution outside the async function will continue while it sleeps (i.e. is is not halted).

This lets you use syntax that looks like it works on synchronous code to work on asynchronous code.

It doesn't make synchronous operations asynchronous or vice versa.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • sorry for the silly question, but javascript is synchronous in nature right? so how is the code written in it async? – randomsizzler Jun 29 '22 at 10:01
  • JavaScript has a main event loop where most JS runs. Async code runs outside that main event loop. e.g. `setTimeout` deals with an external timer. `fetch` deals with an external network API. Workers have their own event loops. – Quentin Jun 29 '22 at 10:02
  • In the end, everything runs in a single thread. Only "one code runs at a time". `setTimeout` will schedule your callback function to run at a certain time. When that time arrives, everything else is "paused" to execute your callback in the main thread. (Not really paused, but put in a queue to be executed next.) – danguilherme Jun 29 '22 at 10:05
  • 1
    @randomsizzler "*javascript is synchronous in nature right?*" no, not in nature. It was created for reactive programming in the browser. It exposes many asynchronous APIs. It further handles many asynchronous tasks like event handlers. Node adds on even more asynchronous tools over what a browser would have - a lot of the APIs there are also async: event emitters, filesystem access, cryptography, etc. Normally code is processed synchronously, yes, but there are *plenty* of asynchronicity in JS. It's quite infamous for it. – VLAZ Jun 29 '22 at 10:08