Search⌘ K
AI Features
Home
Courses
The JavaScript Interview Handbook: 100+ Interview Questions

JavaScript Execution: Call Stack & Event Loop

Explore how JavaScript executes code using the call stack, event loop, and event queue. Learn the relationship between synchronous and asynchronous code including setTimeout, to strengthen your understanding for JavaScript coding interviews.

We'll cover the following...

Let’s go over some important and commonly tested concepts of JavaScript during interviews. This includes the working of the call stack, web API, and event queue.

setTimeout

JavaScript is single-threaded, meaning it can only run one command at a time. Due to this, commands are not run in parallel. Because the execution happens line-by-line, each command is considered synchronous hence blocking.

So, is it possible to run an asynchronous code in JavaScript?

This is where the setTimeout function comes into play. It is a web API provided by the browser that takes a callback function as its first parameter and time in milliseconds as its second parameter. It executes the callback function after the specified number of milliseconds pass.

Let’s take a look at an example:

Javascript (babel-node)
console.log("Before Function")
setTimeout(function(){
  console.log("Inside Function")
},3000)
console.log("After Function")

As you can see, the command on line 1 executes first. Next, setTimeout is invoked; however, as seen from the output, the command on line 5 runs before the command on line 3. So, After Function is displayed before Inside Function. Why is this the case? This is where event queue comes into play. Let’s discuss that next.

Event table & queue

As you know, the call stack stores all your running JavaScript code. The interpreter reads the code line-by-line, pushes each statement into the call stack one-by-one, and pops them once they execute. However, if the statement is asynchronous, it is removed from the call stack and forwarded to the event table. This table is responsible for moving the asynchronous code to the event queue after a specified time. Here the statement waits for execution.

This brings us to the question. When will the statements from the event queue execute?

The event loop is responsible for keeping check of both the call stack and the event queue. It keeps checking if all the statements from the call stack have finished execution; that is, if the call stack is empty. If so, it pops the statement from the event queue (if present) to the call stack to execute.

Note: All synchronous statements execute first, and only then can the asynchronous ones execute.

Event loop

Let’s take a look at an illustration of the event loop:

Let’s take the code from the start and map it to the diagram above.

  1. First, the command console.log("Before Function") (line 1) enters the call stack and executes.

  2. Next, the setTimeout function statement enters the call stack, but since it is an asynchronous web API, the code (callback passed to setTimeout and the time) is removed from the call stack and put in the event table.

  3. In the event table, the setTimeout callback function waits for the time specified, 3000ms in this case. After this time passes, the callback function moves from the event table to the event queue to wait for execution.

  4. In the meantime, the command console.log("After Function") (line 5) enters the call stack and executes.

  5. All this time, the event loop will continuously check the call stack. When the last command (on line 5) finishes execution, it’ll check the event queue for any commands. There it’ll find the code for the setTimeout callback function, console.log("Inside Function"), which it’ll remove and pass to the call stack to execute, displaying it last.

Note: Even though the time delay is passed in setTimeout, it does not necessarily mean the callback will execute right after. That’ll only happen once all the commands in the call stack execute.