Skip to main content

Javascript: Event Loop

Hi techies! This blog is a 2-part series discussing about Event Loops and Arrow functions. These are important concepts that every JavaScript programmer must be aware of from interview perspective and also to enhance your understanding in JS. You can also take a look at the previous blog to know more about Promises in Javascript.

Brief Introduction
It is a concept in which JS engine executes blocks of code by following a set of rules. It makes use of two data structures - a call stack and a callback queue. Whenever call stack is empty, it removes a function from queue and pushed onto the stack. With the help of event loop, JS achieves asynchronous behaviour.

Why should I care?
If we don’t understand how JS execution works, then we might get unintended results for our code.

Ex. Let’s say a user is trying to login to our website, so we will follow below steps, i.e., input their credentials, verify them, and show home page on success.


Now here authenticate function takes some time to perform verification, but we see the welcome message shown before the user is verified. This is undesirable.

To solve this problem, we should make authenticate function return a promise and show welcome message upon promise settlement.


Event Loop explained
The above picture shows major components of a browser.
  • Heap – Objects are allocated memory from here.
  • Stack – This represents the single thread provided for JavaScript code execution. Function calls form a stack of frames.
  • WebAPIs – These are built into the browser and not part of JS language.
  • Queue – After an API finishes execution, it is sent to the queue where it waits for its callback function execution.
  • Event Loop – checks whether stack is empty, if true then it picks one function from queue and places it on stack.

Let’s take an example. Guess the output of following code snippet.


The output is


Let’s see pictorially how JS executes it
  1. The state is clear. The browser console is clear, and the Call Stack is empty.



  2. console.log(“1”) is added to the stack.



  3. console.log(“1”) is executed and subsequently removed from the stack and setTimeout(function cb1(){…}) is added to the stack.



  4. setTimeout(function cb1() { ... }) is executed and removed from the stack. The browser creates a timer as part of the Web APIs. It is going to handle the countdown for you.



  5. console.log(“3”) is added to the stack while the timer runs in the browser for cb1. Since the wait time is 0 ms, the callback will be added to queue as soon as the browser receives it (ideally).



  6. console.log(“3”) is executed and removed from the stack. And cb1 is pushed to the queue.



  7. The event loop checks that stack is empty now, so it takes cb1 from queue and pushes it to the stack. cb1 executes and adds console.log(“2”) onto the stack.



  8. console.log(“2”) executes and is removed from the stack, then cb1 also completes execution is removed from the stack.



    So the delay argument in setTimeout() does not guarantee the start of execution after timer finishes the delay. It serves as a minimum time for the delay part.
I hope this blog helps you to have an understanding about Event Loops, what they are, how they work and why they are important. Please stay tuned, as we will be coming up with the second part soon to discuss about Arrow Functions.

References

About Amlgo Labs : Amlgo Labs is an advanced data analytics and decision sciences company based out in Gurgaon and Bangalore, India. We help our clients in different areas of data solutions includes design/development of end to end solutions (Cloud, Big Data, UI/UX, Data Engineering, Advanced Analytics and Data Sciences) with a focus on improving businesses and providing insights to make intelligent data-driven decisions across verticals. We have another vertical of business that we call - Financial Regulatory Reporting for (MASAPRAHKMAEBAFEDRBI etc) all major regulators in the world and our team is specialized in commonly used regulatory tools across the globe (AxiomSL Controller ViewOneSumX DevelopmentMoody’s RiskIBM Open Pages etc).We build innovative concepts and then solutions to give an extra edge to the business outcomes and help to visualize and execute effective decision strategies. We are among top 10 Data Analytics Start-ups in India, 2019 and 2020.

Please feel free to comment or share your views and thoughts. You can always reach out to us by sending an email at info@amlgolabs.com
 or filling a contact form at the end of the page.

Comments

More Popular Posts

Amlgo Blog - Experience The Experiments

Amlgo Labs Blog  is a step towards our vision to share knowledge and experiences, Amlgoites accept every challenge very enthusiastically. We do experiments, we fail but we learn and build complex solutions to help our clients solve their problems in Data, Analytics, Prediction, Forecasting, Reporting, Designing and Development area. During this process we enjoy immense learning everyday and we have decided to share our thoughts, learnings, experiments and experiences so that we don't work in silos and contribute the best of our knowledge towards community and learn more by views and reviews. This website is maintained and brough to you by  Amlgo Labs Professionals .   Our Strong Basics -  1)   KISS (Keep It Simple and Straightforward) :  We believe most of the problems can be solved by keeping things simple and straight. This is the learning we had in past, sometimes we try to solve technical problems using high end algorithms and complex codes but this results into complications.

JavaScript: The Important Basics

In this weird world of technology people often get confused how does a website work? What all things should I be aware of? So we are here to help you. Most of the content on web is developed with the help of JavaScript. JavaScript is really becoming popular these days with the coming of ECMAScript2015 and ECMAScript 2016, for this reason, some beginners learning React and Angular and are also trying to tackle more modern JavaScript syntax at the same time. If you're new to both, it can be confusing as to "what is JavaScript and what are its important features". This document should serve as a primer to help you get up-to-speed on JavaScript syntax that we feel matters the most for learning React as well as Angular.

Power BI Blog - What is Power BI and Why we use Power BI.

This Power BI blog is an introduction to the Power BI. In this Power BI tutorial, you will learn Power BI basics - what is Power BI, Power BI Desktop and Power BI Service. Power BI tool is a combination of Business Intelligence and Visualization. Before we dig deep let’s understand what is Business Intelligence. Business Intelligence is a broad spectrum which consists of using different business strategies and techniques to gather data, refine it and process it for the purpose of data analysis which gives us some meaningful information which helps in data driven decision making. When we present this information in the form of some charts, graphs it takes the form of Visualization.

Polybase Installation for Scale-Out process

This part is the continuation of the previous blog about the introduction of  Polybase Scale-Out Group . As we have discussed in our earlier blog PolyBase enables your SQL Server instance to process Transact-SQL queries that read data from external data sources. SQL Server 2016 and higher can access external data in Hadoop and Azure Blob Storage. Starting in SQL Server 2019, PolyBase can be used to access external data in SQL Server, Oracle, Teradata, and MongoDB.

Polybase Blog - Introduction

Overview: This Polybase blog series is all about the use of Polybase Technology in today’s era to be able to take advantage of the Data(Relational and Non-Relational) by using T-SQL only. Data whether Big or not is the lifeline to many different sectors to cope up with Production, Maintenance, Predictions, Taking Precautionary Measures, Customer Satisfaction, Customer Retention, Sales, Revenue Generation and many more.

A simplified view of a QlikView tool:

In our last blog related to Qlikview, we discussed the use of Qlikview for Financial Data Analytics . Qlikview is a Business Intelligence tool that consists of a front end to visualize the processed data and a back end to provide the security and publication of the mechanism for QlikView user documents.

Stages of New Regulatory Reporting Implementation

In the last blog, we discussed what is  Financial Regulatory Reporting  and its importance in the banking industry. Regulatory Reporting comprises the submission of business numbers as required by regulators to evaluate and track the financial and operational status of financial institutions and their compliance with required regulatory provisions.