JS/TS
  • JavaScript Development
  • JS Principles
    • JS Principles
      • Primitive data types
      • typeof operator
      • Scope
      • Hoisting
      • IIFE
      • Closure
      • Anonymous functions in JS
      • Conditional (ternary) operator
        • Coercion vs Conversion
      • Event-driven programming
      • Factory Function
      • JSON.stringify()
      • Strict mode
      • super() keyword
      • What are memory leaks?
      • Micro-tasks within an event loop (Summary)
      • Macro-tasks within an event loop (Summary)
      • null vs undefined
    • Memory Management
    • Advanced function concepts
      • Impure vs Pure Functions
      • Factory functions
  • JavaScript Objects & Arrays
    • Introducing JavaScript objects
      • Build-in objects
        • isNaN()
      • RegExp
        • RegExp.prototype.test()
      • String
        • String.prototype.split()
        • String.prototype.slice()
      • Objects
        • Object.assign()
        • Object.create()
        • Object.defineProperties()
        • Object.defineProperty()
        • Object.entries()
        • Object.freeze()
        • Object.getOwnPropertyNames()
        • Object.getPrototypeOf()
        • Object.isFrozen()
        • Object.isSealed()
        • Map
      • Standard built-in methods to work with Arrays
        • Array.of()
        • Array.prototype.concat()
        • Array.prototype.every()
        • Array.prototype.filter()
        • Array.prototype.find()
        • Array.prototype.findIndex()
        • Array.prototype.forEach()
        • Array.prototype.join()
        • Array.prototype.map()
        • Array.prototype.pop()
        • Array.prototype.shift()
        • Array.prototype.reverse()
        • Array.prototype.some()
        • Array.prototype.sort()
        • Array.prototype.splice()
        • Array.prototype.unshift()
        • Array.prototype.includes()
        • Array.prototype.flatMap()
      • Prototypal inheritance
        • Inheritance with the prototype chain
        • Inheriting "methods"
  • JavaScript Mid
    • JavaScript & ES
      • Arrow Function
      • Anonymous Function
      • Callbacks
      • Promises
      • var, let, and const
      • Fetch API (function)
      • Fetch API
      • Synchronous vs Asynchronous
      • Encapsulation
      • Destructuring assignment
      • call() - apply() - bind()
      • 'This' keyword
      • Functional Programming
  • Browser
    • Event-driven programming
  • TypeScript
    • The TypeScript Handbook
      • Basic Types
      • Interfaces
      • Functions
      • Literal Types
      • Unions and Intersection Types
      • Classes
      • Enums
      • Generics
      • Implements vs extends
  • Hackerrank Practices
    • Practices and examples
  • JS Math
    • Mathematical
      • JavaScript | Math.E() function
      • Math.abs( ) Method
      • Math.ceil( ) function
      • Math floor()
      • Math.imul( ) Function
      • Math log( ) Method
      • Math max()/min() Method
      • Math pow( ) Method
      • Math.sign( ) Function
      • Math sqrt( ) Method
Powered by GitBook
On this page

Was this helpful?

  1. Browser

Event-driven programming

PreviousFunctional ProgrammingNextThe TypeScript Handbook

Last updated 4 years ago

Was this helpful?

The event loop is a process that waits for the Call Stack to be clear before pushing callbacks from the Task Queue to the Call Stack. Once the Stack is clear, the event loop triggers and checks the Task Queue for available callbacks. If there are any, it pushes it to the Call Stack, waits for the Call Stack to be clear again, and repeats the same process. We have the call stack, the web API, and the task Queue.

  • Call stack executes all the synchronous operations from the code from the last added.

  • Asynchronous operations are handled by the Web API, when they are resolved they are pushed in order to the task Queue.

  • When the call stack is clear gets the resolved async operations in the task Queue in the order they were pushed previously.

function getUserEmail(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('test@test.com');
        }, 1000);
    })
} 

function printUserEmail(): void {
    console.log('Printing...'); // Normal op
    getUserEmail().then(res => { // async op
        console.log(`The user email is: ${res} `);
    });
    console.log("User printed"); // Normal op
}

printUserEmail();

Let us see now a different example with async and await

function getUserEmail(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('test@test.com');
        }, 0);
    })
}

async function printUserEmail(): Promise<string> {
    console.log('Printing...'); // Normal op
    const userEmail = await getUserEmail();
    console.log("User printed", userEmail); // Normal op
    return userEmail;
}

printUserEmail();

https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4