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.
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.
To solve this problem, we should make authenticate function return a promise and show welcome message upon promise settlement.
Event Loop explained
- 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
- The state is clear. The browser console is clear, and the Call Stack is empty.
- console.log(“1”) is added to the stack.
- console.log(“1”) is executed and subsequently removed from the stack and setTimeout(function cb1(){…}) is added to the stack.
- 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.
- 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).
- console.log(“3”) is executed and removed from the stack. And cb1 is pushed to the queue.
- 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.
- 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.
References
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
- https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5t
- https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4
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
(MAS, APRA, HKMA, EBA, FED, RBI etc) all major regulators in the world
and our team is specialized in commonly used regulatory tools across the
globe (AxiomSL
Controller View, OneSumX Development, Moody’s
Risk, IBM 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
Post a Comment