As we can see from the above result, each function call and console.log statement is executing in series AKA in a synchronous manner. This means until the function a has returned, the next line of code won’t be called. By default, a function with no return statement returns undefined value.

Using Web APIs, some JavaScript jobs can be transferred to other threads. For example, handling of AJAX request should be done on a different thread, else our main thread would be blocked until the network response is received. This would be a horrible UX for the user, as his/her screen would just freeze for several seconds or minutes.

Web APIs are APIs that extend JavaScript functionality to perform asynchronous tasks. For example, setTimeout is a Web API that performs some action after a given delay. To understand how Web APIs work, or least how setTimeout works, you should check out my article on the event loop.

Web APIs is not a part of the JavaScript standard. They are not included in the JavaScript engine. Instead, they are provided by the browser or server-side JavaScript frameworks like Node.js

Basically, setTimeout(callback, delay) function takes a callback and stores it temporarily. It waits for delay given in milliseconds and then pushes the callback function in the stack once the stack is empty. Then the callback function gets executed. This is basically how all Web APIs work.

Natively, most Web APIs are callback based. They need a callback function to notify when an asynchronous operation is done. Let’s add asynchronous nature to our earlier example and see the problem with it.