Promises and Asynchronous Javascript - Part 1

As we know Javascript is Single Threaded programming language, it means the code is executed line by line and one after another.
Thus, we can say javascript is Synchronous in nature.

Asynchronous javascript enables us to run the tasks which do not take much time and keeping the tasks aside which take much longer time for there execution, because of this technique we don't have to wait for the tasks which require more time for there execution and stopping the program at same point till the execution of that that function is not over, instead we run the other tasks without stopping the program at single point.

Now let's see some code examples to understand nature of javascript in detail.

console.log("Hi)
console.log("How are you?")
console.log("Bye)

The Output of the code above is

Hi
How are you?
Bye

Same code using setTimeout().

console.log("Hi)
setTimeout(()=>{
console.log("How are you?")
},1000);
console.log("Bye)

Now the output will be

Hi
Bye
How are you?

Now this may seems little confusing to you, is it?

Lets find out why we are getting this output

So we are using setTimeout() function in the code above, setTimeout() is a function which we get from the browser's webApi.
Whatever is written inside the setTimeout() function is executed after the milli seconds which we mention in it.

setTimeout(() => {console.log("Hello")}, 1000);

If you run the code above then Hello will be printed on the console after 1000ms or 1s [1000ms = 1s].

Let's see one more code example

function myName(name) {
setTimeout(() => {
return "My name is" + name;
}, 1000)
}
console.log("Hi)
const _name = myName("John");
console.log(_name);
console.log("Bye)

The Output of the above code is

Hi
undefined
Bye

Now you may think why we are getting undefined yes?
we are using setTimeout() inside the myName() function thus the myName() function will return My name is John after 1s.
and as we know GEC is created inside the javascipt which maps all the variables initially to undefined in the memory allocation phase and assign values to them in the code execution phase when the line in which the value is assigned to the variable in the code is encountered. Thus initially the variable _name is undefined and after 1s it get the value My name is John but due to synchronous nature of javascript undefined is printed on the console.

This is end of the Part-1, I hope you got an idea about the nature of the javascript and what is the issue with synchronous nature of the javascript, we will learn about callbacks and promises in javascript in part-2.