Understanding Synchronous and Asynchronous Code in JavaScript

Understanding Synchronous and Asynchronous Code in JavaScript

JavaScript is a single-threaded programming language. This means it has one call stack and one memory heap. As expected, it executes code in order and must finish executing a piece of code before moving into the next.

Introduction

JavaScript is a single-threaded programming language. This means it has one call stack and one memory heap. As expected, it executes code in order and must finish executing a piece of code before moving into the next. However, thanks to the V8 engine, JavaScript can be asynchronous which means we can execute multiple tasks in our code at one time. So, in this article, I decided to show you the difference between Synchronous and Asynchronous code in JavaScript.

JavaScript Code.

Photo by Irvan Smith on Unsplash

Synchronous JavaScript

Synchronous code in JavaScript will start from the top of a file and execute all the way to the bottom, each line in order until it gets the bottom and it will stop. For example, if a function takes a while to execute or has to wait on something, it freezes everything up in the meanwhile because synchronous code in JavaScript can only do one task at a time, it waits until a particular statement has executed then it moves to the next one. A good example of this happening is the window alert function **alert("Hello World")**** :**

Synchronous Code in JavaScript.

You can’t interact with the webpage at all until you hit OK and dismiss the alert.

Asynchronous JavaScript

We mentioned above that JavaScript is a single-threaded language, So how do we get asynchronous code with JavaScript then?

Well, the JavaScript engine has a web API that handles tasks in the background. The call stack recognizes functions of the web API and hands them off to be handled by the browser. Once those tasks are finished by the browser, they return and pushed onto the stack as a callback. That can help execute multiple functions at one time. So, asynchronous code starts executing from the top to the bottom of a file, but during that execution, it will run into some asynchronous functions where it will split off and execute that asynchronous code separately from the rest of the code at the same time. Let’s look at a simple example:

Asynchronous Code in JavaScript.

In the example above, the first line of code will start executing because It is on the stack first, so “first” gets printed. then it will move to the next line where the javascript engine will notice an asynchronous function setTimeout **thatrequires 1000 milliseconds to be executed, So the engine will push it off to the WebAPI to be done asynchronously. The call stack moves on without caring about the code handed off to the Web APIs and `console.log("three")**` is printed.

programming javascript technology asynchronous web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Private Class Fields and Methods in JavaScript Classes

JavaScript private class fields and methods are new features for classes. In this tutorial, you will learn all you need to know about them.

WeakMap in JavaScript - An Easy Introduction

WeakMap allows you to add additional data into an Object that belongs to another or third-party code. With the special “weak” link feature of WeakMaps, we can make sure the data associated with this alien object, would only exist as long as the object is alive.

Import and Export Statements in JavaScript and How to Use Them

Import and export statements are two great features introduced ES6 (ES2015). These two statement allows you to export and import your code and use it whenever you need. This tutorial will show you what import and export statements are, how they work and how to use them.