The Javascript Event Loop

How does Javascript handle concurrency?

When you execute asynchronous code in Javascript, it goes through something called an Event Loop. It describes in what order your code will run by using a call stack and a callback queue. This is important to understand so you don't run into race conditions in your codebase. In this episode, we deep dive into how it all works!

Shownotes

• 01:30 - Basics and why it matters

  • Javascript is single threaded
  • The event loop gives it Javascript the ability to handle concurrency and async code
  • It's useful for describing animation states

• 07:30 - The mechanics

  • Browser initializes with v8 engine
  • The event loop runs, and code executes top to bottom
  • Two concepts - callstack and heap
  • Callstack is FIFO (Last in first out) - like a stack of pancakes
  • It describes when callbacks will occur when things are finished in that execution
  • When nothing is left over in the callback queue, everything has been executed
• 12:30 Examples:

console.log("hello");
setTimeout(() => {
  console.log("resolve timeout");
},5000)
console.log("last line");

Hello is logged, then resolve timeout is placed into a callback queue. last line is then logged. 5 seconds later, the callback queue is checked, and resolve timeout is logged.

What if you had a long list of executable code, and a setTimeout with a very short duration called in the middle?

console.log(1);
console.log(2);
console.log(3);
setTimeout(()=> {
  console.log("set time out function")
}, 100);
//.....
console.log(1000);

The setTimeout function will still execute after all other code runs.

• 16:50 - Additional notes

  • For async await, understand the order in which your promises are resolving.
  • If two HTTP calls can be executed in parallel, use Promise.all()
  • Stack vs Heap in Event Loops

• 22:00 - Dessert Time

  • 22:40 - Swimming with Vincent
  • 24:00 - Linux OS and GPUs with German

Social Media

• German's Twitter
• Vincent's Twitter
• Vincent's Instagram
• Tweet us your thoughts on @codechefsdev

Links

• The event loop playground
• Overview of Event Loops