The Javascript Event Loop

Podcast: Code Chefs - Hungry Web Developer Podcast Episode: The Javascript Event Loop Pub date: 2020-08-22 Get Podcast Transcript → powered by Listen411 - fast audio-to-text and summarization 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 The podcast and artwork embedded on this page are from Vincent Tang & German Gamboa, which is the property of its owner and not affiliated with or endorsed by Listen Notes, Inc.