Member-only story
Async/Await for Beginners— Understanding Asynchronous Code in Javascript
Being introduced in ES7, the Async / Await syntax finally made it into JavaScript as a standard. But what’s so special about it and why do we need it at all? As I am a beginner myself, I struggled a lot with understanding and handling asynchronous code in JavaScript in the past. Therefore, this article should be an introduction to JavaScript’s problems with asynchronous code and how Async / Await can help us in solving them.
What is Asynchronous Programming?
To truly understand why we need things like Async / Await, we have to take a look at JavaScript’s core concepts. At its base, JavaScript is a synchronous programming language. This means it is single-threaded. Only one operation can be executed at a time. I visualized in the following graphic why this can lead to problems.
By default, the code execution in JavaScript is synchronous. This means that each operation blocks the following until it’s done. Therefore, operations which typically take longer (e.g. network requests) will block any further execution. This is quite bad and will naturally lead to performance issues as you can grasp from the graphic.
However, through features like the Event Loop, today’s JavaScript found ways to execute code asynchronously. Thus, it can perform operations seemingly concurrently and not only sequentially.
As shown in the graphic, the asynchronous way of handling operations is by starting them and then waiting for their responses in the future. Thus, time in between can be used for other operations. With this mechanism, long performing operations are no longer blocking your code from further execution.
The Problem of Asynchronous Execution
But… this asynchronous execution can cause problems too. What if we, for instance, make a network request in line 1 and continue working with the requested data in line 2? Since we only started the network request in line 1, we can not be sure that it is already resolved in line 2 — probably, we will get the…
