Asynchronous Programming in JavaScript

Before jumping to Asynchronous, we need to know what Synchronous means.

Consider you have 2 lines of code. The code at line 2 will not execute until 1 finishes. This style of code is known as Synchronous code.

Now again you have 2 lines of code, but now code on line 2 will be not be waiting for code at line 1 to complete. This style of coding is known as Asynchronous coding.

Often we face a situation where we need to support async programming. For instance, you are fetching some data from server on line 1. Now lines after line 1 depends on the result that we will get from server in line 1. In this scenario, we use various techniques that support asynchronous programming.

Some of these are listed below:

1. Callback
2. Async
3. Promise
4. Observable

Let’s take this example as base:

var returnName = function() {
  setTimeout(() => {
    return {'name': 'JS'}
  }, 2000);
}
var result = returnName();  //Line 7
console.log('Result: ', result);  //Line 8

On executing this code, we will find that the console on line 8 is returning undefined. The reason behind this is that the code is synchronous in nature i.e the function returnName on Line 7 will execute without waiting for 2 seconds to get the result.

Now let’s convert this code to behave in asynchronous manner.

Callback

A callback is a function that is passed as a parameter to another function and is called after the function in which it is passed has complete its execution.

var returnName = function(callback) {
  setTimeout(() => {
    callback({'name': 'JS'});
  }, 2000);
}
returnName((result) => {
  console.log('Result: ', result);
});

Async

The async function declaration defines an asynchronous function, which returns an AsyncFunction object. The return type of Async is a Promise.

async function returnName() {
  return new Promise(resolve => setTimeout(() => {
    resolve({'name': 'JS'});
  }, 2000));
}
returnName().then((result) => {
  console.log('Result: ', result);
});

Promise

Promise is one of the way to support asynchronous programming. It has only 2 outcomes, resolve or reject i.e either your result will be a success or a failure.

function returnName() {
  return new Promise(resolve => setTimeout(() => {
    resolve({'name': 'JS'});
  }, 2000));
}
returnName().then((result) => {
  console.log('Result: ', result);
});

Observable

Observable is an enhancement over Promise. Observable is a stream of data. The result is an array.

var returnName = new Observable(observer => {
  setTimeout(() => {
    observer.next({'name': 'JS'})
  }, 2000)
});
returnName.subscribe({
  next(result) { console.log('Result: ', result) } 
});

Will elaborate the article soon !!! If you like the basics, hit the clap icon :) .