Asynchronous / Synchronous JavaScript

Synchronous

If you are new to programming like myself then most of the code you have been writing has be synchronous. JavaScript is a single threaded process. Processes everything in line from top to bottom.

Below we can see that if we increment the number by one and log after each time the number increases as we might have expected.

let num = 1;
console.log(num); // 1
num++;
console.log(num); // 2
num++;
console.log(num); // 3
num++;
console.log(num); // 4

num = 1 --> num = 2 --> num = 3 --> num = 4 ... ect

Isn’t that wonderful everything marching in line one by one, so nice so easy… Here is where the problem lies. We you start working with APIs or anything that where we might not know exactly when the answer will be supplied, what do we do? Do we wait until the info is returned to us? Absolutely not!

This concept is known as blocking MDN: When a web app runs in a browser and it executes an intensive chunk of code without returning control to the browser, the browser can appear to be frozen.

Let’s take a look back at our first example and we will introduce setTimeout. seTimeout takes a callback function and it doesn’t execute the code until after a amount of time, which is the second parameter. What would you expect to log? Two? Maybe because JavaScript is running down the file. The answer is one , because of synchronously.

let num = 1;                    <-------  1 
setTimeout(function() {                 |
  num++;                          <------------------ 2
}, 0);                                  |
console.log(num);  // 1         <-------- 1    

One is logged to the console, but why, we’ve told it to execute it right away. Because of that single threaded process it will execute everything in the call stack before it can do anything else. Passing zero into setTimeout tells JavaScript to execute that callback as soon as it can. Now we are updated the variable asynchronously!!!!!

Asynchronous

SetTimeout and setInterval are easy ways to begin to understanding asynchronous code. They both take a callback function. Callbacks are often used to continue executing code asynchronously. A brief catch up with callbacks.

MDN: A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Not all callbacks are asynchronous. For example forEach, map, filter all take callbacks as arguments but they run synchronously. Remember earlier how we don’t want to wait for an action to finish before moving on, that is the power of asynchronous code. When we need the information but not necessarily right away our async code is stored in an Event Queue, that won’t run until after the main thread has cleared. So the main thread can keep on chugging along and when that info is finally retrieved we can execute that bit of code, not stopping the process.

Referring back to the set time out from earlier and adding the bit of callback knowledge we can further breakdown what is happening inside of setTimeout. Our callback is an anonymous function, that adds one to the num variable and console.log that number. After the call stack has been cleared our function is called adding one to num. Num is now 2, then after 100ms the other setTimeout function is called adding one to num making num 3.

setTimeout(function() {       
  num++;
  console.log(num);                <----- 3
}, 100);
console.log(num);                <-------------- 1
setTimeout(function() {
  num++;  
  console.log(num);                <----- 2
}, 0);

Even though the examples have been very basic we are just scraping the surface. What I want to get across that JavaScript is run synchronously but there are many reasons we might not want for our code to execute that way, and asynchronous code is becoming more and more crucial to web development.

References:

General asynchronous programming concepts

Callback function