DEV Community

Heru Hartanto
Heru Hartanto

Posted on

Understanding Asynchronous in javascript

#beginners #javascript

Let's me explain with a simple example:

console.log('First log');
console.log('Second log');
console.log('Third log');
Enter fullscreen mode Exit fullscreen mode

As we can see, every line of code will waits for previous line to complete execution before execute next line. this is called with synchronous.

Here another example:

console.log('First log');
setTimeout(()=>{
    console.log('Second log');
},2000)
console.log('Third log')
Enter fullscreen mode Exit fullscreen mode

setTimeout function will wait for milisecond time that set in second argument and executes anonymous function in the first arguments

First log
Third log
undefined
Second log
Enter fullscreen mode Exit fullscreen mode

As we can see, Third log does not wait for Second log to execute, the method of not waiting for the previous code to complete is called asynchronous.

When we need asynchronous ?

The best way to use asynchronous is when your website working with server to fetching data or getting response, instead of waiting all data from server fully loaded that maybe takes more than one minutes (depend on speed of your internet and server speed to resolve request) you could use asynchronous to make sure that code ahead will execute and javascript will not waiting server response to complete.

Top comments (4)

Collapse
 
yhormanp profile image
yhorman perez •

I agree with mukul 1312. Recently I had an interview where the first line was a setTimeout and second Line was a promise.resolve

I have not researched completely the topic but seems to be related how JavaScript works with task queue and microtask queue

The explanation that I gave in that moment was the details mentioned here in this post.

Collapse
 
justmedev profile image
justmedev •

Althought the examples of your "async code" are generally correct, you're showing just the tip of the iceberg. You aren't showing "real" async code (await xy) and explain how it works and behaves.

Collapse
 
mukul1312 profile image
Mukul1312 •

True. It's Will be great if you Explain async along with promises

Collapse
 
justmedev profile image
justmedev • • Edited

A simplification of async code is, that it is non-blocking. Meaning when you run async code, that for example gets data from a server, or in node, writes a file, the code doesn't stop the execution of other events.

if you would have code like this

first script

function getFromServerSync (uri) {
  console.log("started sync task")

 return /* get data from server (this takes a few seconds)*/;
}

console.log("before call sync")
const res = getFromServerSync("example.com");
console.log("response sync: ", res);
Enter fullscreen mode Exit fullscreen mode

second script

async function getFromServerAsync (uri) {
  console.log("async task started");
  const data = await /* get data from server async */;
  return data;
}

console.log("before call async");
const asyncRes = getFromServerAsync ("example.com");
console.log("response async: ", asyncRes);
Enter fullscreen mode Exit fullscreen mode

Now the first script will log

before call sync
started sync task
response sync: { ... }
Enter fullscreen mode Exit fullscreen mode

and the second one:

before call async
response async: undefined
async task started
Enter fullscreen mode Exit fullscreen mode

in the second part, as you can see, the console.log inside the async function got called after the code that was below the function call.
Why is this?
Because JavaScript queues async task and then executes them at the end. That way, they dont make your website unresponsive while they are working.

Async code is usually used when a task will take longer than a few miliseconds like requesting data from a server or uploading a file to a server.

This example is very simplified, keep that in mind!

Have fun coding

Read next

kafeel_ahmad profile image

JavaScript Best Practices

Kafeel Ahmad (kaf shekh) -

hamzakhan profile image

🚀 Why TypeScript is Better Than Vanilla JavaScript: A Technical Deep Dive 🛠️

Hamza Khan -

ayoola_damilare_212d5bde0 profile image

My React Journey: Day 11

Ayoola Damilare -

abhay_yt_52a8e72b213be229 profile image

Mastering JavaScript Objects: The Backbone of Dynamic Programming

Abhay Singh Kathayat -