DEV Community

Cover image for Asynchronous JavaScript to learn before JavaScript Frameworks
Rajat Verma
Rajat Verma

Posted on

1 2

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
Enter fullscreen mode Exit fullscreen mode

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:

Alt Text

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>>

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay