How I learned Async Javascript as a Beginner

By the time you are reading this article, you would have already worked with asynchronous javascript and even used it more times than you can count.

But before we get started, there are a few requiremnts to note;

• You should be familiar with the basics of Javascript and by that I mean, Variables, Data types (boolean, array etc), Functions.

You should understand HTML

Alright, now that we have gotten the basics out of the way, let's dive right in.

What is Asynchronous Javascript?

Remember I told you earlier that you already know async javascript before reading this article?

Let me clarify that statement now. If you've worked with JS, you will know that it is single-threaded. That means when you run your code, Javascript compiles and runs your code from top to bottom in order of hierarchy.

const a = 'Yay!';
const b = 2;
const c = 'happy';

console.log(a); //'Yay prints first
console.log(b); //2 prints second
console.log(c); //happy prints third

The above code is an example of a Javascript single-threaded case or more commonly known as synchronous(normal) Javascript.

Asynchronous javascript is just the exact opposite of this. In other words, the code is multi-threaded and does not run hierarchically.

Types of Asynchrounous JS

As explained, async code does not run in hierarchical order, instead they run based on certain needs or "Events". The code example below clearly describes this.

const a = 'Yay!';
const b = //async function;
const c = 'happy';

console.log(a); //'Yay prints first
console.log(b); //2 prints third
console.log(c); //happy prints first

When you run the code above, both a and c would be logged out to the console before b and that is because b is an async code.

If you've been working with event listeners on javascript, then you are already used to an async behavior and a type of async JS called Callbacks.

Let's look at an example ;

btn = document.createElement('button');
const a = 'Yay!';
function b() {
console.log(2)
}
const c = 'happy';
btn.addEventListener('click', b)


console.log(a); //'Yay prints first
console.log(b); //2 does not print at all, unless the action(btn is clicked) is carried out
console.log(c); //happy prints first

As you can see, despite the fact that the b function comes before c, it'll not be logged unless the action of clicking the button takes place.

Now that you know a little bit more about asynchronous JS, let's take a look at the second type of asynchronous JS called promises.

Promises are almost like callbacks except, with callbacks, you always have to refer back to the created function by calling it and nesting elements.

But with promises, you only have to create a new promise once, and from there you can work with it, however way you want.

You can create a promise like the example below;

const promise1 = new Promise((resolve, reject) => {
  const num1 = Math.floor(Math.random() * 10);
  if (num >= 5) {
    resolve("Promise is fulfilled!");
  } else {
    reject("Promise failed!");
  }
});

With promise, instead of nested complicated callback functions, you can just use the ".then" keyword.

Finally, the last type called async and await, makes writing promises so much easier.

const b = async () => {
await console.log(2);
}

The code example above is to visualize how the syntax of async await works.

I'll not be going further into these, so as not to confuse you,

But In conclusion, once you start working with things like APIs or server communication, you will realize the importance of asynchronous javascript and be able to pick it up in practice.

Thanks for reading my first Hashnode blog. If you enjoyed the content, don't hesitate to share it with a beginner out there.