Have you ever needed to run one function based on the results of a different function? Needed to validate input before submitting it to a database server? Or maybe even wanted to display data to the screen without triggering a page reload.
These are all examples of situations where you would want to employ asynchronous techniques in your code. But what do I mean by that?
Well, computers are designed to be asynchronous, meaning that things can be done outside of the main thread. It is in the nature of computers to halt execution of one program to allow another to execute in the meantime.
While most high-level programming languages like C and Java are synchronous by nature, most of them have ways of handling asynchronous operations. JavaScript is no different, except in the way that while some languages have the capability of spawning new threads. JavaScript lacks this capability.
As a synchronous language, JavaScript is single-threaded. The JavaScript Engine has one execution call stack and one memory heap and therefore, functions synchronously. Parsing code line by line in sequential order storing variables and functions in memory.
When the engine begins looking at your code, it creates the global execution context.
Whenever a function gets called, a new local execution context gets created and when the engine comes across a function call, it enters the local execution context and continues parsing in there.
Functions are pushed to the call stack and executed in a last-in-first-out manner, always executing what is at the top of the call stack first.
This works fine for much of what we want to do in JavaScript. But what if we encounter code that holds up this process? Our entire application locks up because a function is taking a long time to run. What we need to be able to do is to start a function and run it in the background while the rest of the program is free to respond to other events. This is the problem that asynchronous techniques are designed to solve.
In order to effectively leverage asynchronous techniques in your JavaScript projects. It is best to have a good understanding of topics such as callback functions, promises, and async/await syntax. This is one of the primary reasons why asynchronous techniques are a considered more advanced subject for a new developer. While it is a relatively simple topic to explain, it can be uniquely challenging to master and put into practice.
At its core, it is simply a technique that allows you to control exactly how a program will behave if it encounters any blocking code on the execution call stack. It allows for these time-consuming parts to be run in the background without interrupting the other functions of the application.
Asynchronous programming shines in its ability to handle situations such as this. Over the years developers have come up with techniques for handling these situations. By the time you are finished with this series you will have a solid understanding of how to employ this in your projects.
Follow me in this series and we will cover Callbacks, Promises and Async/Await to level up your understanding. Starting with callbacks.
Top comments (0)