DEV Community: 3BiEiD

Methods of Handling Asynchronous Code

3BiEiD — Fri, 22 Dec 2023 13:59:58 +0000

JavaScript provides three methods of handling asynchronous code: callbacks, promises, and async/await. Let's discuss each.

Callbacks

Asynchronous callbacks are functions that are passed to another function so that the internal function can begin running code in the background. As soon as we need to handle multiple asynchronous operations, Callback Functions nest into one another, which leads to callback hell. This makes callbacks an old-fashioned method of writing asynchronous Javascript.

This is the basic syntax of the callback function:

function demoFunction(callback){
  callback();
}

Promises

Promises are used to track asynchronous operations, whether the asynchronous event has been executed or not. Promises have four states:
Pending: The initial state of promise before the event happens not fulfilled or rejected yet.
Fulfilled: Action/Operation related to the promise completed successfully.
Rejected: Action/Operation related to the promise failed
Settled: Promise has been fulfilled or rejected

let promise = new Promise (function(resolve, reject) {
  ... code
})

Async/Await

Async/await works with promises in asynchronous functions, making asynchronous code appear more like synchronous or procedural code. A promise is returned by an asynchronous function.

The syntax of an async function is as follows:

async function name(parameter1, parameter2, ...paramaterN) {
  // statements
}

Await can only be used in async functions, and it is used for calling async functions. Await blocks the execution of the code inside the async function in which it is contained until the async function has either resolved or been rejected.

Here is the syntax of the await function:

let result = await promise;

Promises in Js

3BiEiD — Fri, 22 Dec 2023 13:37:56 +0000

JavaScript Promise are easy to manage when dealing with multiple asynchronous operations where callbacks can create callback hell leading to unmanageable code.

Prior to promises events and callback functions were used but they had limited functionalities and created unmanageable code.

Multiple callback functions would create callback hell (a chain of limitless callbacks inside each other) that leads to unmanageable code.

Promises are used to handle asynchronous operations in JavaScript.

Promises are objects that have four states :
1) Pending: The initial state which means not rejected nor resolved.
2) Fulfilled: This term refers to successful completion.
3) Rejected: means the promise cannot be fulfilled due to an error or some exceptional situations in asynchronous operations.
4) Settled: Promise has been fulfilled or rejected

You can decide what to do upon this promise either in the happy way or the errors way, so there are 2 methods to do so
then() and catch()

let promise = new Promise(function (resolve, reject) {
    const x = "test";
    const y = "test"
    if (x === y) {
        resolve();
    } else {
        reject();
    }
});

promise
    .then(function () {
        console.log('Success');
    })
    .catch(function () {
        console.log('Some error has occurred');
    });

then() method can take 2nd argument, so you ignore catch()
The second argument is executed if the promise is rejected and an error is received. (It is optional and there is a better way to handle error using .catch() method

let promise = new Promise(function (resolve, reject) {
    resolve('test again');
})

promise
    .then(function (successMessage) {
        //success handler function is invoked 
        console.log(successMessage);
    }, function (errorMessage) {
        console.log(errorMessage);
    });

Sync VS Async in Js

3BiEiD — Fri, 22 Dec 2023 07:53:20 +0000

Synchronization in JavaScript?

JavaScript is synchronous by default: every line of code is executed one after the other, and each task must wait for the previous one to be completed before moving to the next.

Let’s look at this illustration below to see how synchronous JavaScript code runs:

console.log('One');
console.log('Two');
console.log('Three');
// LOGS: 'One', 'Two', 'Three'

In the above example, the first line of code, One, will be logged first, followed by the second line, Two, and the third line, Three. It’s easy to see that the code works sequentially; each line of code waits for the former to be completed before it executes.

Synchronous programming can be used when the aim is for simplicity rather than efficiency.

(A)Synchronization in JavaScript?

Asynchronous JavaScript programming is one of the key components of the language because it controls how we carry out tasks that require a lot of time
Asynchronous programming is programming that allows multiple events to occur simultaneously. This means that one operation may take place while another is still being processed.
It allows operations to take place in a non-sequential manner. Many web API features now require asynchronous code this is true for those that access or fetch data from external sources.

An example includes:

retrieving files from databases
accessing a video stream from a webcam

Because async is multi-threaded, it makes code non-blocking and allows tasks to complete quickly so that the other functions can continue to operate as the request is being processed. In a nutshell, asynchronous code starts now and finishes later.

For Example

console.log('One');
setTimeout(() => console.log('Two'), 100);
console.log('Three');

// LOGS: 'One', 'Three', 'Two'

The setTimeout is what makes our code asynchronous.

What the code does first in the example above is to log One. Then, instead of executing the setTimeout function, it logs Three before it runs the setTimeout function. Browsers run JavaScript, and there are web APIs that handle it for users.

JavaScript passes the setTimeout function in these web APIs, and then our code keeps running normally.

By running code asynchronously, other code is not blocked from running (non-blocking). When the work is complete, a notification is sent to the main thread about whether the task was successful or failed.

Conclusion:

Async is multi-thread, which means operations or programs can run in parallel.
Sync is a single-thread, so only one operation or program will run at a time.

Async is non-blocking, which means it will send multiple requests to a server.
Sync is blocking — it will only send the server one request at a time and wait for that request to be answered by the server.

Async increases throughput because multiple operations can run at the same time.
Sync is slower and more methodical.

A debate about x++; ⁉️🤔

3BiEiD — Tue, 07 Nov 2023 19:23:06 +0000

Hi there, I hope you all are fine
let us talk a little bit about C++ programming language and take a deep dive into assignment operator (=) and post-increment operator (++)

#include <iostream>
using namespace std;
int main()
{
    int x = 5;
    x = x++;
    cout<<x;    // 5
    return 0;
}

The question is why x equals 5?
First of all, let us divide this statement into 3 parts
1) x
2) =
3) x++;
As the assignment operator = assigns the right side to the left side and returns the left side we should start with the right-most part which is x++;

x++ This is a post-increment operator which means it will evaluate the current value (5), and increment the value in memory for the upcoming operations (6).

When you use x++, the value of x is first used in the expression where x++ appears, and then x is incremented by 1.

until now everything is clear?
again
so x++; will do two things,

it'll give you a temporary value (we can say) which is 5, and,
change x's real value in memory by 1.
but, if we say x = 900; we obviously say in this statement:
change x's real value in memory and assign 900 to it.

If you notice same bold phrase repeated which means the same behavior in 2 different situations normal assignment and post-increment.

so finally the x = part will overwrite (x = 6 in memory) so it will remain 5.
I hope you got it 👍