JavaScript

Event Loops in JavaScript | Explained with Examples

Event Loop is an advanced-level JavaScript concept, the Event loop is a function of javascript that places the instructions waiting in the event queue to the global execution stack. When you are working with asynchronous execution you have 3 different environments running which are namely: Execution stack, WEB APIs, and event/message queue which you can see in the image below:

The global execution context maintains a stack of all the functions being executed, it works on the behavior “last in first out”. Whereas, the Web API environment picks up the functions which are part of Web API (API calls, AJAX call, setTimeout(), and more) from the execution stack and starts executing them in its own environment. This, in turn, allows the execution stack to work on something else, thus implementing an asynchronous behavior.

When the WEB API finishes executing on the function it places the result onto the Event queue. Whenever the execution stack is empty, the event loop picks up the function in the event queue and places it back into the execution stack. This whole circle is known as the Event Loops in JavaScript.

Try this simple sequential code:

function f2() {
  console.log("Inside function F2");
  console.log("F2 has finished");
}
function f1() {
  console.log("Inside Function F1");

  f2();

  console.log("Ending of Function F1");
}

f1();

The output of this code is as

This code looks like this on the execution stack:

The stack works in this order:

  • Pointers goes in f1, and executes the command to print “inside function F1” and removes it from the stack
  • Pointer sees the line f2() and goes inside the f2
  • Pointer executes “Inside function F2” and removes it from the stack
  • Prints the lines “F2 has finished working” and removes it from the stack
  • Since f2 is done, it removed the “f2();” from the stack and returns to f1 to execute the remaining part of the f1 function
  • Prints the line “Ending of function F1” and removes it from the stack
  • Since no command is left in f1(), the pointer removes it from the stack as well.

Now, that you know how the execution stack works, you can move on to async code example by testing out the following lines of code:

function f2() {
  console.log("Inside function F2");
  setTimeout(() => {
    console.log("F2 has finished");
  }, 3000);
}
function f1() {
  console.log("Inside Function F1");

  f2();

  console.log("Ending of Function F1");
}

f1();

As you can see, in function f2() we are now doing a task that takes 3 seconds to finish. When the pointer reaches this setTimeout() statement, it places it inside the Web APIs environment and removes it from the execution stack.

The execution stack will keep working on the other part of the code while the WEB API will wait for the setTimeout() to finish like:

After this setTimeout() instruction has been moved to the Web API environment, the execution stack will look like this:

As you can see, while the Web API is working on the setTimeout function, the execution stack is working on other instructions and removing them from the stack. When the Web API finishes working on the “setTimeout()” it will move it to the event queue, while the Event loops wait for the execution stack to become empty.

When the stack is empty, the Event loop will move the setTimeout result to the execution stack as:

And then:

This is how the event loop works, that is why you get the following output on your console:

With the above output, you can verify the execution of the event loop

Conclusion

The event loop is a function that moves the instructions waiting to be executed into the global execution stack from the event queue. Whenever a function like setTimeout() needs to be executed simultaneously it is moved from the execution stack to the Web API environment. Web API works on the instruction while the JavaScript continues to execute other parts of the code, once the Web API is done working on the instruction, it places the instruction or function in the event queue from where it is moved to the execution stack whenever the stack is empty. This whole cycle is known as the Event Loop.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.