Synchronous Programming
In general, lines of code are executed one after another in Javascript (and in many other languages as well). This flow of code execution is called synchronous programming For example:
console.log(“Hello world!”); console.log(“Starting operation!”); let sum = 0; for (let i=1; i<=1000000000; i++) { sum += i; sum = sum % (1000000); } console.log(“Operation ended! Sum =”, sum); console.log(“Moving on for now while operation is in progress!”);
In the above program, “Hello world!” gets printed on the console first, then “Starting operation!” gets printed. After, we enter the for loop, which loops one billion times to calculate the sum of the first one billion natural numbers. This takes quite a long time - we will only see “Operation ended …” around a second after we see “Starting operation!”.
It would be terrible for user experience if our website suddenly freezes to perform a time-consuming operation.
Then, why is Javascript executed synchronously? To explain this, we need to introduce the concept of threads.
Threads
Threads are created by computers to complete tasks. When we run a Javascript application, our computer creates a thread to process tasks delegated by our code. A single thread can process one task at a time - that is why operations are carried out one at a time and one after another.
However, we don’t need to rely on just one thread - we can create multiple threads to process our tasks. Then, can we just create more threads to handle time-consuming tasks? Not exactly.
Let’s return to the example of summing numbers. Our first task (Task 1) is to add up a lot (one billion) of numbers. Since Task 1 takes a long time, let’s assign it to a side thread. Then, our second task (Task 2) is to output the sum. Here, Task 2 depends on the result of Task 1 - we need the resulting sum before we output it. If we try to run Task 2 in the main thread immediately after we begin Task 1, we won’t output the desired sum.
/* (Thread Diagram) /* Main thread: Task 2 /* Side thread: | ----- Task 1 ----- | */
To fix this issue, we can run (some) operations asynchronously. Features in Javascript such as Promises (and callbacks, the older way) allow our main thread to wait for another task to be completed before commencing an operation. While waiting, our main thread can perform other tasks, so our program won’t freeze. For example:
/* Main thread: (Task 3, Task 4, etc.) Task 2 /* Promise: | -------- Task 1 ---------- | */
We can commence Task 1 (summing numbers) in a side thread and create a promise, so that the main thread will wait from Task 1 to finish before starting Task 2 (outputting sum). In the meantime, the main thread will handle other tasks. This is the essence of asynchronous programming.
Next Section
2.2 CallbacksCopyright © 2021 Code 4 Tomorrow. All rights reserved.
The code in this course is licensed under the MIT License.
If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.