Hello there,

In this article, we will learn about what is means to do asynchronous programming and why it is so helpful.

First, what is asynchronous programming?

Asynchronous as the name implies means operations that do no happen one after another.

Let's explain this with an analogy. In a queue of people waiting to be attended to, the person in front gets attended to before the next. That is being synchronous!

Asynchronous using this analogy means, everyone can be attended to independently without going through the queue!

Going back to asynchronous programming, it means programmed operations do not block the next code after it from being executed. This is what is referred to a Non-blocking code.

This is kind of programming is not available in all languages, but is available in JavaScript.

The use of asynchronous programming generally is found in asynchronous functions. Using what is known as a Promise or Using the keywords async and await.

A Promise in JavaScript is basically an instance that may (or may not) provide a value in the future. To get an instance of a Promise, you use the format.

const promiseObject = new Promise()

We will not go in-dept to promises for this article.

The Async Keyword

where async is used await is not far behind

async is used to denote functions that are expected to run asynchronously, i.e. they will not wait to what is in from of them before they run.

The syntax looks like:

async function myFunction() {
//do something asychronously
}

Also, calling an async function also uses a keyword (guess?), await

example:

async connectToMealAPI(){
    mealAPI.connect() //imaginary 
}

async function getMealRecipes(){
    let connection = await connectToMealAPI()
    return fetchMealRecipes(connection) //imaginary
}

In the example above, we had two async functions, connectToMealAPi and getMealRecipes. The other functions called are used for completeness sake. The connectToMealAPI() is called with the getMealRecipes using an await keyword, because it is asynchronous.

Another important note is, await can only be used inside an async function.

However, (for the sake of interviews), JavaScript can be asynchronous but is single-threaded. The single threaded however has to do with something called the call stack, which is essentially a stack of operations that the JavaScript engine needs to perform.

This means, when you execute JavaScript code, it places the pieces of operations within your code in a call stack and executes them one after the other. So you might ask, how it asynchronous?

This is possible because of something known as an Event Loop. Okay, I know, yet another term!

So Here is a list of terms I have used so far

• asynchronous
• Non blocking
• call stack
• event loop

So, let's settle this with code!

Example:

Copy the code below and paste it in your console (use the browser console for speedy results) and see what happens!

Looking at the code you would expect to get "first" "second" "third"

console.log("first")
setTimeout(() => {
    console.log("second")
}, 1000)
console.log("third")

That doesn't happen!

You'd get, "first" "third" undefined "second"

Why?

The JS engine while executing the code saw console.log("first") and immediately printed "first". Then, it saw setTimeout which goes to 1000 (in milliseconds) and skipped it. Then, it got to console.log("third") and immediately printed "third". Then, it went back to setTimeout which wasn't ready and then printed undefined. And when setTimeout was finally ready, it printed "second".

Make sense?

I hope it does!

I will stop here. If you have further questions, reach me (Idris). And let's chat!