Asynchronous JavaScript to learn before JavaScript Frameworks

In this series of articles, we aimed to cover the following topics:

• Important ES6 Features
• Objects and Array methods
• Asynchronous JavaScript and Fetch API (this article)
• NPM and import/export modules in JavaScript In the last two articles, we have already covered the first two topics so, in this article, we will talk about Asynchronous JavaScript and Fetch API. So, without wasting any time let’s get started with the topic:

Before jumping into the details of Asynchronous JavaScript, let us first talk about the execution of Synchronous Code in JavaScript. We will consider a simple example to understand this:

function sayHi() {
  console.log('Hi!');
}

console.log('Program starts'); // prints: Program starts
sayHi();                      // prints: Hi!
console.log('Program ends'); // prints: Program ends

As you can notice, it follows a sequential order, that is all the tasks are executed in the order in which they were coded. Internally the JavaScript engine executes these tasks with the help of Call Stack.
Let’s see how the Call Stack helps in executing our code:

As you can notice, The task that is currently in execution gets added to the Call Stack and is popped from it once it completes its execution.
So, Now, you have an idea about the execution of synchronous code and the Call Stack, let’s get started with asynchronous javascript.

Read More>>