Asynchronous Programming - Reading Assignment

[dAnijboned]

1. What is the difference between synchronous and asynchronous functions?
   A synchronous functions “block” the execution flow of our program (we are “stuck” in the function call while waiting for it to finish) while an asynchronous function will return immediately (we will need a mechanism to read the result, if any, once the function finishes).

2. What is callback hell?
   The process of dealing with return values from multiple asynchronous function calls.

3. Which technique can help us solve callback hell?
   Using promises (jQuery comes with a builtin library implementing this functionality).

[Zoltan]

@ivan

What is the difference between synchronous and asynchronous functions?

Synchronous functions run after the other and wait for one to finish its task before the next can begin. Asynchronous functions can run simultaneously, in parallel without having to wait for one another to finish their tasks. Asynchronous functions run more efficiently without clogging up the network.

@ivan

What is callback hell?

If we write multiple nested functions, we can end up in callback hell that is hard to maintain, understand and debug.

@ivan

Which technique can help us solve callback hell?

By using the Promise library of jQuery.

[jon_m]

Hi @Cliff!
Generally speaking, all correct

A couple of observations, to build on your answers:

@Cliff

Asynchronous functions depart from this thread when called (to wait for data from a server for example) and runs on a separate background thread until its completion.

Even though it uses asynchronous functionality, JavaScript has a single-threaded runtime, which means there is only one call stack executing one piece of code at a time. Slow synchronous code leads to blocking of the call stack and the browser not being able to perform other operations, run other code or perform any rendering. JavaScript, however, is a non-blocking programming language, while at same time remaining single-threaded. This is how it manages to be both:

• Code for an asynchronous operation (containing the callback) => call stack
• This code triggers a Web API (e.g. DOM event listener, AJAX network request, setTimeout function etc.) outside the JavaScript Runtime but still within the browser.
• The code containing the callback is now removed from the call stack and transferred to the Web API, meaning the call stack can continue executing other code while the asynchronous operation continues in the Web API outside the runtime.
• When the asynchronous operation completes (e.g. event triggered, time elapses, data retrieved from network etc.) the callback is then transferred to the back of something called the event queue (also known as the task or message queue).
• When the call stack is clear/empty, something called the event loop pushes the oldest callback from the front of the task queue to the call stack for execution.

@Cliff

Promises help us negotiate callback hell by forming callback chains and dealing with errors.

@Cliff

forming callback chains

But the whole point is that they are not callbacks (to avoid callback hell). You are right that, instead of nesting, the formation is that of a chain — a chain of promises instead of nested callbacks.

[jon_m]

Nice answers, @dAnijboned!

Here are a couple of observations, and a link to some additional information, to continue building on your knowledge:

@dAnijboned

while an asynchronous function will return immediately

Not necessarily immediately, but it doesn’t block the call stack like synchronous functions do. You mention that we need a mechanism to be able to do this. Have a look at this post, as I’ve attempted to provide a clear summary of how this mechanism works.

@dAnijboned

What is callback hell?
The process of dealing with return values from multiple asynchronous function calls.

Yes…all nested within each other, often making them very difficult for the developer to read, decipher or keep track of.

[Stas_Simon]

1.Asynchronous functions allow you to execute other commands while waiting for the previous when synchronous functions can only get to the other after the previous was executed.
2. Having to execute multiple complex operations.
3. “promise” It extends the runtime of the execution.

[letscrypto]

1. a synchronous function keeps the browser occupied while nothing is happening.
2. callback hell is the complexity of figuring out which nested callback is being called (or has failed).
3. One approach is to use a library to manage this complexity, such as Node.js Fibers.

[thecil]

1. What is the difference between synchronous and asynchronous functions?

@letscrypto

a synchronous function keeps the browser occupied while nothing is happening.

Yes sir, but could you please describe the asynchronous functions?

If you have any doubt, please let us know so we can help you!

Carlos Z.

[Pendar]

1. What is the difference between synchronous and asynchronous functions?

Synchronous functions happen one at a time, where asynchronous functions may use an additional thread to manage the event loop of other functions in the background.

2. What is callback hell?

Callback hell is when you call a function which receive a function, which receive a function, which receive a function … and so on … Usually this chunk of code looks like a rotated pyramid

3. Which technique can help us solve callback hell?

Promises can solve a callback hell situation

[letscrypto]

@thecil

could you please describe the asynchronous functions?

An asynchronous function is a function which may take some time to complete and hence we do not simply wait for it to finish, but we give it a callback function to call upon completion.

[Antonastrm]

1. The way they execute differs. Synchronous functions are executed in sequence. Asynchronous functions are executed when events happen.
2. Callback hell is when several nested callback functions are needed to perform simple tasks.
3. Something that can help callback hell is to use something called “promises”.

[rbrownlow]

1. Synchronous functions are functions that can only be done one at a time. It ties up the program until the first task is competed. Asynchronous functions allow multiple functions to be done at the same time-not having to wait until the first task is completed.
2. Callback hell is a term referring to how complicated programs often lead to many levels and sub-levels of nested functions.
3. Callback hell can be resolved by using promises.

[jon_m]

Hi @Pendar,

Good answers

@Pendar

… asynchronous functions may use an additional thread to manage the event loop of other functions in the background.

You seem to have the right idea here…but just to be clear, even though it uses asynchronous functionality, JavaScript has a single-threaded runtime, which means there is only one call stack executing one piece of code at a time. Normally, this would lead to slow synchronous code blocking the call stack and the browser not being able to perform other operations. However, despite being single-threaded, JavaScript is also a non-blocking programming language. This is how it manages to be both:

• Code for an asynchronous operation (containing the callback) => call stack
• This code triggers a Web API (e.g. DOM event listener, AJAX network request, setTimeout function etc.) outside the JavaScript Runtime but still within the browser .
• The code containing the callback is now removed from the call stack and transferred to the Web API, meaning the call stack can continue executing other code while the asynchronous operation continues in the Web API outside the runtime .
• When the asynchronous operation completes (e.g. event triggered, time elapses, data retrieved from network etc.) the callback is then transferred to the event queue (also known as the task or message queue ).
• When the call stack is clear/empty, the event loop pushes the oldest callback from the front of the task queue to the call stack for execution.

[jon_m]

Hi @Antonastrm,

@Antonastrm

… Asynchronous functions are executed when events happen.

Not really… an asynchronous function is called and starts executing when the browser initiates operations which don’t usually happen instantaneously, but take time to complete. They then enable the browser to continue executing other code while waiting for the asynchronous operation to complete (or fail). The asynchronous function achieves this by including a callback function as one of its parameters, and it is this function that is called when the event completes (or fails).
Have a look at this post for some more detail.

[Yavuz_Gedik]

1. JavaScript is a single-treaded programming language. This means JS can only execute 1 command at once. This is also called synchronous functions. But JS has a workaround you can program JS asynchronous so that it will mimic asynchronous functions. This means that JS is able to execute all operations at the same time.
2. A callback is a function that is to be executed after another function has finished executing Callback hell is the situation where callbacks are nested within other callbacks several levels deep, potentially making it difficult to understand and maintain the code.
3. There are four solutions to callback hell:
   Write comments to make it readable for the reader
   Split functions into smaller functions
   Using Promises (.then, .catch)
   Using Async/await

[Davide_Coltro]

1. In the synchronous functions, only one section of the code can run at any one time. In the asynchronous functions, on the other hand don’t block the Javascript thread, instead they wait for completion of the execution while the thread does other work.
2. Callback hell is when too many callback functions are nested within a callback function.
3. Using promises can help us to solve callback hell.

[cincinnato]

1. What is the difference between synchronous and asynchronous functions? Sycronous stop the execution of the program waiting for user’s input. Asyncronous continue to execute
2. What is callback hell? It’s a problem of asyncronous functions.
3. Which technique can help us solve callback hell? Promises library contained on jQuery can prevent callback hell.

[jon_m]

@cincinnato

1. What is the difference between synchronous and asynchronous functions? Sycronous stop the execution of the program waiting for user’s input. Asyncronous continue to execute

Not really…

You are right that synchronous functions can block the program from continuing to execute, because they have to run their code from start to finish, and complete their task, before the browser can move on to perform other operations. This isn’t an issue with operations that can be performed instantaneously, as the browser can move on from them immediately, and so doesn’t get blocked. However, operations such as network requests for data from other servers take longer to complete and would block the browser if performed using synchronous functions. Instead, asynchronous functions enable the browser to initiate these kinds of operations, and then to continue executing other code while waiting for the asynchronous operation to complete, or for an error message to be thrown if it fails. The asynchronous function achieves this by including a callback function as one of its parameters.

[Mesiah]

@ivan

• What is the difference between synchronous and asynchronous functions?
• What is callback hell?
• Which technique can help us solve callback hell?

A: Synchronous is he function of doing one task at a time and asynchronous is the act of getting the next function ready for action at the same time but only responds after the syn is performed

A: Multiple complex operations of functions levels and sub levels

A: Promises send jquery libaryto help chain callbacks and deal with errors

[Kingsman]

1. What is the difference between synchronous and asynchronous functions?
   Synchronous:Sections of code that won’t allow other sections to be ran until that code is ran.
   Asynchronous:Code that can be put aside until a later date while Javes can move to other tasks.
2. What is callback hell?
   When there are various levels of nested functions in an operation making it more complex producing more levels and sub-levels.
3. Which technique can help us solve callback hell?
   Promises built into jQuery can help save the problems behind call back hell by chaining nested functions and call backs to it and dealing with errors by itself without Javes.

[Chakingo]

What is the difference between synchronous and asynchronous functions?
Synchronous functions are single-threaded events running in order. I.e B won’t execute if A hasn’t been executed
Asynchronous functions are events that allow JS to start task A and continue on with task B while A is loading.

What is callback hell?
Callback hell is when asynchronous functions stacked on top of each other makes code difficult to write, debug and maintain because of too many levels and sub-levels

Which technique can help us solve callback hell?
There is a pattern called “promises” that creates the appearance of top to bottom execution